VictoryLine renders a dataset as a single line path. Since VictoryLine renders only a single element to represent a dataset rather than individual elements for each data point, some of its behavior is different from other Victory components. Pay special attention to style and events props, and take advantage of VictoryVoronoiContainer to enable tooltips. VictoryLine can be composed with VictoryChart to create line charts.

<VictoryChart
  theme={VictoryTheme.material}
>
  <VictoryLine
    style={{
      data: { stroke: "#c43a31" },
      parent: { border: "1px solid #ccc"}
    }}
    data={[
      { x: 1, y: 2 },
      { x: 2, y: 3 },
      { x: 3, y: 5 },
      { x: 4, y: 4 },
      { x: 5, y: 7 }
    ]}
  />
</VictoryChart>

type: boolean || object

VictoryLine uses the standard animate prop. Read about it here

See the Animations Guide for more detail on animations and transitions

animate={{
  duration: 2000,
  onLoad: { duration: 1000 }
}}

type: array[string] || { x: array[string], y: array[string] }

VictoryLine uses the standard categories prop. Read about it here

categories={{ x: ["dogs", "cats", "mice"] }}

type: element

VictoryLine uses the standard containerComponent prop. Read about it here

containerComponent={<VictoryVoronoiContainer/>}

type: array[object]

VictoryLine uses the standard data prop. Read about it here

See the Data Accessors Guide for more detail on formatting and processing data.

<VictoryChart>
  <VictoryLine
    data={[
      { x: 1, y: 2 },
      { x: 2, y: 3 },
      { x: 3, y: 5 },
      { x: 4, y: 4 },
      { x: 5, y: 6 }
    ]}
  />
</VictoryChart>

type: element

VictoryLine uses the standard dataComponent prop. Read about it here

VictoryLine supplies the following props to its dataComponent: data, events, groupComponent, interpolation, origin (for polar charts), polar, scale, style

note: Because VictoryLine renders a single element to represent the entire dataset, the dataComponent it renders will not have access to datum like the dataComponent elements rendered by other Victory components such as VictoryScatter.

See the Custom Components Guide for more detail on creating your own dataComponents

default: <Curve/>

dataComponent={<Curve events={{ onClick: handleClick }}/>}

type: array[low, high] || { x: [low, high], y: [low, high] }

VictoryLine uses the standard domain prop. Read about it here

domain={{x: [0, 100], y: [0, 1]}}

type: number || array[left, right] || { x: [left, right], y: [bottom, top] }

VictoryLine uses the standard domainPadding prop. Read about it here

domainPadding={{x: [10, -10], y: 5}}

type: string || integer || array[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.

eventKey = "x";

type: array[object]

VictoryLine uses the standard events prop. Read about it here

See the Events Guide for more information on defining events.

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

<div>
  <h3>Click Me</h3>
  <VictoryLine
    style={{
      data: { stroke: "#c43a31" }
    }}
    events={[{
      target: "parent",
      eventHandlers: {
        onClick: () => {
          return [
            {
              target: "data",
              eventKey: "all",
              mutation: ({ style }) => {
                return style.stroke === "black"
                  ? null
                  : { style: { stroke: "black", strokeWidth: 5 } };
              }
            }
          ];
        }
      }
    }]}
    data={sampleData}
  />
</div>

type: array[object]

VictoryLine uses the standard externalEventMutations prop. Read about it in detail

type: element

VictoryLine uses the standard groupComponent prop. Read about it here

note: VictoryLine uses VictoryClipContainer as its default groupComponent VictoryClipContainer renders a <g> tag with a clipPath def. This allows continuous data components to transition smoothly when new data points enter and exit. Supplying a completely custom groupComponent to VictoryLine may result in broken animations.

default: <VictoryClipContainer/>

<VictoryChart>
  <VictoryLine
    groupComponent={<VictoryClipContainer clipPadding={{ top: 5, right: 10 }}/>}
    style={{ data: { stroke: "#c43a31", strokeWidth: 15, strokeLinecap: "round" } }}
    data={sampleData}
  />
</VictoryChart>

type: number

VictoryLine uses the standard height prop. Read about it here

default (provided by default theme): height={300}

height={400}

type: boolean

VictoryLine uses the standard horizontal prop. Read about it in detail

<VictoryLine horizontal
  data={sampleData}
/>

type: options || function

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.

Explore all the interpolation options.

default: "linear"

<VictoryLine
  interpolation="natural"
  data={sampleData}
/>

type: element

VictoryLine uses the standard labelComponent prop. Read about it here

note: To enable tooltips on VictoryLine, it is necessary to use VictoryVoronoiContainer

default: <VictoryLabel renderInPortal/>

<VictoryLine
  data={sampleData}
  labels={({ datum }) => datum.y}
  labelComponent={<VictoryLabel renderInPortal dy={-20}/>}
/>

type: array || function

VictoryLine uses the standard labels prop. Read about it here

<VictoryLine
  data={sampleData}
  labels={({ datum }) => datum.y}
/>

type: number || { x: number, y: number }

VictoryLine uses the standard maxDomain prop. Read about it in detail

<VictoryChart maxDomain={{ y: 4.5 }}>
  <VictoryLine data={sampleData}/>
</VictoryChart>

type: number || { x: number, y: number }

VictoryLine uses the standard minDomain prop. Read about it in detail

<VictoryChart minDomain={{ y: 0 }}>
  <VictoryLine data={sampleData}/>
</VictoryChart>

type: string

The name prop is used to reference a component instance when defining shared events.

name = "series-1";

type: { x: number, y: number }

The origin prop is only used by polar charts, and is usually controlled by VictoryChart. It will not typically be necessary to set an origin prop manually

Read about the origin prop in detail

type: number || { top: number, bottom: number, left: number, right: number }

VictoryLine uses the standard padding prop. Read about it here

default (provided by default theme): padding={50}

padding={{ top: 20, bottom: 60 }}

type: boolean

VictoryLine uses the standard polar prop. Read about it here

<VictoryChart polar
  domain={{ y: [0, 7]}}
  theme={VictoryTheme.material}
>
  <VictoryPolarAxis dependentAxis
    style={{ axis: { stroke: "none" } }}
    tickFormat={() => null}
  />
  <VictoryPolarAxis/>
  <VictoryLine
    data={sampleData}
    style={{
      data: { stroke: "#c43a31" },
    }}
  />
</VictoryChart>

type: array[low, high] || { x: [low, high], y: [low, high] }

The range prop is usually controlled by VictoryChart. It will not typically be necessary to set a range prop manually

Read about the range prop in detail

type: number

VictoryLine uses the standard samples prop. Read about it here

default: samples={50}

<VictoryChart>
  <VictoryLine
    samples={25}
    y={(d) => Math.sin(5 * Math.PI * d.x)}
  />
  <VictoryLine
    samples={100}
    style={{ data: { stroke: "red" } }}
    y={(d) => Math.cos(5 * Math.PI * d.x)}
  />
</VictoryChart>

type: scale || { x: scale, y: scale }

VictoryLine uses the standard scale prop. Read about it here Options for scale include "linear", "time", "log", "sqrt" and the d3-scale functions that correspond to these options.

default: scale="linear"

scale={{x: "linear", y: "log"}}

The sharedEvents prop is used internally to coordinate events between components. It should not be set manually.

type: boolean || { x: boolean, y: boolean }

VictoryLine uses the standard singleQuadrantDomainPadding prop. Read about it here

type: string || integer || array[string] || function

VictoryLine uses the standard sortKey prop. Read about it here

See the Data Accessors Guide for more detail on formatting and processing data.

<VictoryLine
  data={range(0, 2 * Math.PI, 0.01).map((t) => ({ t }))}
  sortKey="t"
  x={(d) => Math.sin(3 * d.t + (2 * Math.PI))}
  y={(d) => Math.sin(2 * d.t)}
/>

type: "ascending" || "descending"

The sortOrder prop specifies whether sorted data should be returned in ascending or descending order.

default: sortOrder="ascending"

type: boolean

VictoryLine uses the standard standalone prop. Read about it here

note: When VictoryLine is nested within a component like VictoryChart, this prop will be set to false

default: standalone={true}

<svg width={300} height={300}>
  <circle cx={150} cy={150} r={150} fill="#c43a31"/>
  <VictoryLine
    standalone={false}
    width={300} height={300} padding={0}
    data={sampleData}
  />
</svg>

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

  <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}
  />

type: object

VictoryLine uses the standard theme prop. Read about it here

See the Themes Guide for information about creating custom themes.

default: theme={VictoryTheme.grayscale}

theme={VictoryTheme.material}

type: number

VictoryLine uses the standard width prop. Read about it here

default (provided by default theme): width={450}

width={400}

type: string || integer || array[string] || function

VictoryLine uses the standard x data accessor prop. Read about it here

See the Data Accessors Guide for more detail on formatting and processing data.

x = "employee.name";

type: string || integer || array[string] || function

VictoryLine uses the standard y data accessor prop. Read about it here

See the Data Accessors Guide for more detail on formatting and processing data.

y={(d) => d.value + d.error}

type: string || integer || array[string] || function

It is not common to set a y0 prop with VictoryLine, as baselines for VictoryLine are only relevant for stacked lines. Read more about the y0 prop here