Skip to main content

Line

Line charts are used for visualizing trends in data over a continuous interval.

Basic

See the full API here. Typically composed with VictoryChart to create full charts.

Live View
Loading...
Live Editor

Line Charts - Horizontal

Line charts can be rendered with a flipped axis by setting the horizontal prop to true. This prop can be applied to either VictoryChart or VictoryLine.

Live View
Loading...
Live Editor

Line Charts - Interpolation

Line charts can use interpolation to smooth the line between data points. See the full list of interpolation options in the common props section.

Live View
Loading...
Live Editor

Line Charts - Sampling

Line charts can be rendered with a specific number of samples across a range of values by setting the samples prop.

Live View
Loading...
Live Editor

Line Charts - Null Data

Line charts can handle null data points by setting the data prop to an array of objects with x and y values. Null data points will be skipped.

Live View
Loading...
Live Editor

Line Charts - Discontinuous Scale

Line charts can be rendered with a discontinuous scale by using the scaleDiscontinuous plugin from @d3fc/d3fc-discontinuous-scale.

Live View
Loading...
Live Editor

Line Charts - Combined

Line charts can be combined into the same chart. Note that the order of the components will determine the rendering order.

Live View
Loading...
Live Editor

Line Charts - Stacked

Line charts can be stacked using the VictoryStack component. This will automatically adjust the baseline for each data point and apply a colorScale.

Live View
Loading...
Live Editor

Line Charts - Labels

Add labels to charts by setting the labels prop to the name of a property in the dataset, or a function that returns the label value. You can customize the display of the labels by using the labelComponent prop.

Live View
Loading...
Live Editor

Line Charts - Tooltips

VictoryLine only renders a single element to represent an entire dataset, so replacing its labelComponent with VictoryTooltip won't work as expected. Use VictoryVoronoiContainer to associate mouse position with the nearest data points.

Live View
Loading...
Live Editor

Line Charts - Styles

Chart styling can be customized by using the theme or overriding the style prop on the component.

Live View
Loading...
Live Editor

Line Charts - Events

Events can be handled by passing an array of event objects to the events prop on the VictoryLine component. VictoryLine uses the special all key for the target prop to attach events to all data points. See the events guide for more information.

Live View
Loading...
Live Editor

Polar Line Charts

Line charts can be rendered in polar coordinates by setting the polar prop to true and using VictoryPolarAxis components.

Live View
Loading...
Live Editor

Polar Line Charts - Cardioid

Line charts can be rendered in polar coordinates with a cardioid shape by setting the polar prop to true and using VictoryPolarAxis components.

Live View
Loading...
Live Editor

Standalone Rendering

Bar charts can be rendered outside a VictoryChart.

Live View
Loading...
Live Editor

They can also be embeded in other SVG components by using the standalone prop.

Live View
Loading...
Live Editor