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>