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.
<VictoryChart theme={VictoryTheme.clean} > <VictoryLine data={[ { x: 1, y: 2 }, { x: 2, y: 3 }, { x: 3, y: 5 }, { x: 4, y: 4 }, { x: 5, y: 7 }, ]} /> </VictoryChart>
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
.
<VictoryChart theme={VictoryTheme.clean} horizontal > <VictoryLine data={[ { x: 1, y: 2 }, { x: 2, y: 3 }, { x: 3, y: 5 }, { x: 4, y: 4 }, { x: 5, y: 7 }, ]} /> </VictoryChart>
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.
const data = [ { x: 0, y: 0 }, { x: 1, y: 2 }, { x: 2, y: 1 }, { x: 3, y: 4 }, { x: 4, y: 3 }, { x: 5, y: 5 }, ]; const cartesianInterpolations = [ "basis", "bundle", "cardinal", "catmullRom", "linear", "monotoneX", "monotoneY", "natural", "step", "stepAfter", "stepBefore", ]; const InterpolationSelect = ({ currentValue, values, onChange, }) => ( <select onChange={onChange} value={currentValue} className="w-[200px] mx-auto bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" > {values.map((value) => ( <option value={value} key={value}> {value} </option> ))} </select> ); function App() { const [state, setState] = React.useState({ interpolation: "natural", }); return ( <div className="pt-4"> <InterpolationSelect currentValue={ state.interpolation } values={ state.polar ? polarInterpolations : cartesianInterpolations } onChange={(event) => setState({ interpolation: event.target.value, }) } /> <VictoryChart height={390} theme={VictoryTheme.clean} > <VictoryLine interpolation={ state.interpolation } data={data} /> <VictoryScatter data={data} size={5} /> </VictoryChart> </div> ); } render(<App />);
Line Charts - Sampling
Line charts can be rendered with a specific number of samples across a range of values by setting the samples
prop.
<VictoryChart theme={VictoryTheme.clean} > <VictoryGroup> <VictoryLine samples={25} y={(d) => Math.sin(5 * Math.PI * d.x) } /> <VictoryLine samples={100} y={(d) => Math.cos(5 * Math.PI * d.x) } /> </VictoryGroup> </VictoryChart>
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.
<VictoryChart theme={VictoryTheme.clean} > <VictoryLine data={[ { x: 1, y: 1 }, { x: 2, y: 3 }, { x: 3, y: 5 }, { x: 4, y: 2 }, { x: 5, y: null }, { x: 6, y: null }, { x: 7, y: 6 }, { x: 8, y: 7 }, { x: 9, y: 8 }, { x: 10, y: 12 }, ]} /> </VictoryChart>
Line Charts - Discontinuous Scale
Line charts can be rendered with a discontinuous scale by using the scaleDiscontinuous
plugin from @d3fc/d3fc-discontinuous-scale
.
function App() { const data = [ { x: new Date(2021, 5, 1), y: 8 }, { x: new Date(2021, 5, 2), y: 10 }, { x: new Date(2021, 5, 3), y: 7 }, { x: new Date(2021, 5, 4), y: 4 }, { x: new Date(2021, 5, 7), y: 6 }, { x: new Date(2021, 5, 8), y: 3 }, { x: new Date(2021, 5, 9), y: 7 }, { x: new Date(2021, 5, 10), y: 9 }, { x: new Date(2021, 5, 11), y: 6 }, ]; // scaleDiscontinuous and discontinuitySkipWeekends are both // plugins imported from @d3fc/d3fc-discontinuous-scale const discontinuousScale = scaleDiscontinuous( d3Scale.scaleTime(), ).discontinuityProvider( discontinuitySkipWeekends(), ); return ( <VictoryChart scale={{ x: discontinuousScale }} theme={VictoryTheme.clean} > <VictoryLine data={data} /> </VictoryChart> ); } render(<App />);
Line Charts - Combined
Line charts can be combined into the same chart. Note that the order of the components will determine the rendering order.
<VictoryChart theme={VictoryTheme.clean} > <VictoryLine data={[ { x: 1, y: 2 }, { x: 2, y: 3 }, { x: 3, y: 5 }, { x: 4, y: 4 }, { x: 5, y: 7 }, ]} style={{ data: { stroke: "#8b46ff", }, }} /> <VictoryLine data={[ { x: 1, y: 4 }, { x: 2, y: 2 }, { x: 3, y: 7 }, { x: 4, y: 5 }, { x: 5, y: 3 }, ]} style={{ data: { stroke: "#2d7ff9", }, }} /> </VictoryChart>
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
.
<VictoryChart theme={VictoryTheme.clean} > <VictoryStack colorScale="qualitative"> <VictoryLine data={[ { x: 1, y: 2 }, { x: 2, y: 3 }, { x: 3, y: 5 }, { x: 4, y: 4 }, { x: 5, y: 7 }, ]} /> <VictoryLine data={[ { x: 1, y: 4 }, { x: 2, y: 2 }, { x: 3, y: 7 }, { x: 4, y: 5 }, { x: 5, y: 3 }, ]} /> </VictoryStack> </VictoryChart>
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.
<VictoryChart theme={VictoryTheme.clean} > <VictoryLine data={sampleData} labels={({ datum }) => datum.y} /> </VictoryChart>
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.
<VictoryChart theme={VictoryTheme.clean} containerComponent={ <VictoryVoronoiContainer voronoiDimension="x" labels={({ datum }) => `y: ${datum.y}` } labelComponent={ <VictoryTooltip /> } /> } > <VictoryLine data={[ { x: 1, y: 2 }, { x: 2, y: 3 }, { x: 3, y: 5 }, { x: 4, y: 4 }, { x: 5, y: 7 }, ]} /> </VictoryChart>
Line Charts - Animation
Charts can be animated by setting the animate
prop. See the animations guide for more information.
function App() { const [data, setData] = React.useState(getData()); React.useState(() => { const setStateInterval = window.setInterval(() => { setData(getData()); }, 4000); return () => { window.clearInterval( setStateInterval, ); }; }, []); return ( <VictoryChart theme={VictoryTheme.clean} > <VictoryLine data={data} interpolation="basis" animate={{ duration: 1000, }} /> </VictoryChart> ); } function getData() { return _.range(1, 30).map((i) => ({ x: i, y: _.random(1, 50), })); } render(<App />);
Line Charts - Styles
Chart styling can be customized by using the theme or overriding the style prop on the component.
<VictoryChart theme={VictoryTheme.clean} > <VictoryLine data={sampleData} labels={({ datum }) => datum.y} style={{ data: { stroke: "#c43a31", strokeWidth: ({ data }) => data.length, }, labels: { fontSize: 15, fill: ({ datum }) => datum.x === 3 ? "#000000" : "#c43a31", }, }} /> </VictoryChart>
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.
function App() { const toggleFillColor = (stroke) => { if (stroke === "black") { return null; } else { return { style: { stroke: "black", strokeWidth: 5, }, }; } }; return ( <VictoryChart theme={VictoryTheme.clean} > <VictoryLine data={sampleData} labels={({ datum }) => datum.y} events={[ { target: "data", eventHandlers: { onClick: () => { return [ { eventKey: "all", mutation: (props) => toggleFillColor( props.style ?.stroke, ), }, ]; }, }, }, ]} /> </VictoryChart> ); } render(<App />);
Polar Line Charts
Line charts can be rendered in polar coordinates by setting the polar
prop to true
and using VictoryPolarAxis
components.
<VictoryChart polar domain={{ y: [0, 7] }} theme={VictoryTheme.clean} > <VictoryPolarAxis dependentAxis style={{ axis: { stroke: "none" } }} tickFormat={() => null} /> <VictoryPolarAxis /> <VictoryLine data={sampleData} /> </VictoryChart>
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.
function App() { return ( <VictoryChart polar theme={VictoryTheme.clean} domain={{ y: [0, 10] }} > <VictoryPolarAxis dependentAxis style={{ axis: { stroke: "none" }, }} tickFormat={() => ""} /> <VictoryPolarAxis tickValues={[ 0, Math.PI / 2, Math.PI, (3 * Math.PI) / 2, ]} tickFormat={[ "2π", "π/2", "π", "3π/2", ]} labelPlacement="vertical" /> {[5, 4, 3, 2, 1].map((val, i) => { return ( <VictoryLine key={i} samples={100} style={{ data: { stroke: VictoryTheme.clean .palette .qualitative[i], }, }} y={(d) => val * (1 - Math.cos(d.x)) } /> ); })} </VictoryChart> ); } render(<App />);
Standalone Rendering
Bar charts can be rendered outside a VictoryChart.
<VictoryLine theme={VictoryTheme.clean} data={sampleData} />
They can also be embeded in other SVG components by using the standalone
prop.
<div style={{ padding: "20px" }}> <svg width={300} height={300} style={{ display: "block", margin: "0 auto", }} > <circle cx={150} cy={150} r={150} fill="#9ded91" /> <VictoryLine standalone={false} theme={VictoryTheme.clean} width={300} height={300} padding={{ left: 10, right: 10 }} data={sampleData} /> </svg> </div>