Edit this page

VictoryLine

VictoryLine renders a dataset as a single line. VictoryLine can be composed with VictoryChart to create line charts.

            

Props

animate

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

categories

VictoryLine uses the standard categories prop. Read about it here

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

containerComponent

VictoryLine uses the standard containerComponent prop. Read about it here

containerComponent={<VictoryVoronoiContainer dimension="x"/>}

data

VictoryLine uses the standard data prop. Read about it here

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

            

dataComponent

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

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

default: <Curve/>

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

domain

VictoryLine uses the standard domain prop. Read about it here

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

domainPadding

VictoryLine uses the standard domainPadding prop. Read about it here

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

eventKey

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"

events

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 refering to data by index, as it renders only one element for an entire dataset

            

groupComponent

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

            

height

VictoryLine uses the standard height prop. Read about it here

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

height={400}

interpolation

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"

Explore all the interpolation options.

default: "linear"

            

labelComponent

VictoryLine uses the standard labelComponent prop. Read about it here

default: <VictoryLabel renderInPortal/>

            

labels

VictoryLine uses the standard labels prop. Read about it here

            

name

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

name="series-1"

origin

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

padding

VictoryLine uses the standard padding prop. Read about it here

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

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

polar

VictoryLine uses the standard polar prop. Read about it here

            

range

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

samples

VictoryLine uses the standard samples prop. Read about it here

default: samples={50}

            

scale

VictoryLine uses the standard scale prop. Read about it here

default: scale="linear"

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

sharedEvents

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

sortKey

VictoryLine uses the standard sortKey prop. Read about it here

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

            

standalone

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}

            

style

VictoryLine uses the standard style prop. Read about it here

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

            

theme

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}

width

VictoryLine uses the standard width prop. Read about it here

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

width={400}

x

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"

y

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}

y0

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