VictoryLine

info

For examples of VictoryLine in action, visit the Line Chart examples.

Inherited Props

VictoryDatableProps

• categories
• data
• dataComponent
• domain
• domainPadding
• samples
• sortKey
• sortOrder
• x
• y
• y0

VictoryMultiLabelableProps

• labelComponent
• labels

VictoryCommonProps

• animate
• colorScale
• containerComponent
• disableInlineStyles
• domainPadding
• externalEventMutations
• groupComponent
• height
• horizontal
• maxDomain
• minDomain
• name
• origin
• padding
• polar
• range
• scale
• sharedEvents
• singleQuadrantDomainPadding
• standalone
• theme
• width

VictoryEventProps

• eventKey
• events

Component Props

---

eventKey

type: string | integer | string[] | Function

VictoryLine uses the standard eventKey prop. This prop is not commonly used. Read about the eventKey prop in more detail here

note

VictoryLine only renders one element per dataset, so only one event key will be generated.

---

events

type: object[]

VictoryLine uses the standard events prop. Read about it here

note

VictoryLine will use the special eventKey "all" rather than referring to data by index, as it renders only one element for an entire dataset

Live View

Loading...

Live Editor

<div>
  <h3>Click the line below</h3>
  <VictoryChart
    theme={VictoryTheme.clean}
  >
    <VictoryLine
      events={[{
        target: "parent",
        eventHandlers: {
          onClick: () => {
            return [
              {
                target: "data",
                eventKey: "all",
                mutation: ({ style }) => {
                  return style.stroke === "black"
                    ? null
                    : { style: { stroke: "black", strokeWidth: 5 } };
                }
              }
            ];
          }
        }
      }]}
      data={sampleData}
      theme={VictoryTheme.clean}
    />
  </VictoryChart>
</div>

---

interpolation

type: InterpolationPropType | Functiondefault: "linear"

The interpolation prop determines how data points should be connected when creating a path. Victory uses d3-shape for interpolating curves.

Polar line charts may use the following interpolation options: "basis", "cardinal", "catmullRom", "linear"

Cartesian line charts may use the following interpolation options: "basis", "bundle", "cardinal", "catmullRom", "linear", "monotoneX", "monotoneY", "natural", "step", "stepAfter", "stepBefore"

You can also provide a function if you need to adjust parameters for d3-shape curves or to use a custom curve function.

Live View

Loading...

Live Editor

<VictoryChart
  theme={VictoryTheme.clean}
>
  <VictoryLine
    interpolation="natural"
    data={sampleData}
  />
</VictoryChart>

---

style

type: { parent: object, data: object, labels: object }

VictoryLine uses the standard style prop. Read about it here

note

Since VictoryLine renders a single element to represent an entire dataset, it is not possible to use functional styles to change the style of the line as a function of an individual datum. Instead, try using gradient fills for styling continuous data.

default (provided by default theme): See [grayscale theme][] for more detail

Live View

Loading...

Live Editor

<VictoryLine
  style={{
    data: {
      stroke: "#c43a31",
      strokeWidth: ({ data }) => data.length
    },
    labels: {
      fontSize: 15,
      fill: ({ datum }) => datum.x === 3 ? "#000000" : "#c43a31"
    }
  }}
  data={sampleData}
  labels={({ datum }) => datum.x}
/>