Error Bar
Error Bars are used to represent the variability or uncertainty in a set of data and are often used with bar, line, and scatter plots. Error bars can be used to show standard deviation, standard error, confidence intervals, or any other statistical measure.
Basics
See the full API here. Typically composed with VictoryChart to create full charts.
<VictoryChart domainPadding={15} theme={VictoryTheme.clean} > <VictoryErrorBar data={[ { x: 15, y: 35, errorX: 1, errorY: 3, }, { x: 20, y: 42, errorX: 3, errorY: 2, }, { x: 25, y: 30, errorX: 5, errorY: 5, }, { x: 30, y: 35, errorX: 5, errorY: 3, }, { x: 35, y: 22, errorX: 8, errorY: 2, }, ]} /> </VictoryChart>
Error Bars - Horizontal
Error Bars can be rendered horizontally by setting the horizontal prop to true. This prop can be applied to either VictoryChart or VictoryBoxPlot.
<VictoryChart horizontal domainPadding={15} theme={VictoryTheme.clean} > <VictoryErrorBar data={[ { x: 15, y: 35, errorX: 1, errorY: 3, }, { x: 20, y: 42, errorX: 3, errorY: 2, }, { x: 25, y: 30, errorX: 5, errorY: 5, }, { x: 30, y: 35, errorX: 5, errorY: 3, }, { x: 35, y: 22, errorX: 8, errorY: 2, }, ]} /> </VictoryChart>
Error Bars - Error Formats
Error bars can be customized by providing functions to the errorX and errorY props. These functions should return the error value for each data point.
<VictoryChart domainPadding={15} theme={VictoryTheme.clean} > <VictoryErrorBar data={[ { x: 15, y: 350, error: 0.2 }, { x: 20, y: 420, error: 0.05 }, { x: 25, y: 300, error: 0.1 }, { x: 30, y: 350, error: 0.2 }, { x: 35, y: 220, error: 0.15 }, ]} errorX={(datum) => datum.error * datum.x } errorY={(datum) => datum.error * datum.y } /> </VictoryChart>
Error Bars - Labels
Error Bars can be labeled by setting the labels prop to a function that returns a string.
<VictoryChart domainPadding={15} theme={VictoryTheme.clean} > <VictoryErrorBar labels={({ datum }) => datum.y} data={[ { x: 15, y: 350, error: 0.2 }, { x: 20, y: 420, error: 0.05 }, { x: 25, y: 300, error: 0.1 }, { x: 30, y: 350, error: 0.2 }, { x: 35, y: 220, error: 0.15 }, ]} errorX={(datum) => datum.error * datum.x } errorY={(datum) => datum.error * datum.y } /> </VictoryChart>
Error Bars - Tooltips
Tooltips can be added by using a VictoryTooltip component as the labelComponent.
<VictoryChart domainPadding={15} theme={VictoryTheme.clean} > <VictoryErrorBar labels={({ datum }) => datum.y} data={[ { x: 15, y: 350, error: 0.2 }, { x: 20, y: 420, error: 0.05 }, { x: 25, y: 300, error: 0.1 }, { x: 30, y: 350, error: 0.2 }, { x: 35, y: 220, error: 0.15 }, ]} errorX={(datum) => datum.error * datum.x } errorY={(datum) => datum.error * datum.y } labelComponent={<VictoryTooltip />} /> </VictoryChart>
Error Bars - Combination
Error Bars can be combined with other Victory components to create more complex visualizations.
const data = [ { x: 10, y1: 250, y2: 300, ey1: 0.1, ey2: 0.1, }, { x: 15, y1: 350, y2: 500, ey1: 0.1, ey2: 0.08, }, { x: 20, y1: 420, y2: 640, ey1: 0.05, ey2: 0.1, }, { x: 25, y1: 300, y2: 450, ey1: 0.1, ey2: 0.1, }, { x: 30, y1: 350, y2: 500, ey1: 0.1, ey2: 0.1, }, { x: 35, y1: 220, y2: 350, ey1: 0.15, ey2: 0.05, }, { x: 40, y1: 250, y2: 290, ey1: 0.1, ey2: 0.1, }, ]; const segments = ["y1", "y2"]; const colors = { y1: VictoryTheme.clean.palette.qualitative[1], y2: VictoryTheme.clean.palette.qualitative[4], }; function App() { return ( <VictoryChart theme={VictoryTheme.clean} > {segments.map((y) => ( <VictoryGroup> <VictoryLine data={data} y={y} style={{ data: { stroke: colors[y], }, }} interpolation="natural" /> <VictoryScatter data={data} y={y} style={{ data: { fill: colors[y], }, }} /> <VictoryErrorBar data={data} y={y} errorY={(datum) => datum[y] * datum[`e${y}`] } style={{ data: { stroke: colors[y], }, }} /> </VictoryGroup> ))} </VictoryChart> ); } render(<App />);
Error Bars - Styles
Chart styling can be customized by using the theme or overriding the style prop on the component.
<VictoryChart domainPadding={15} theme={VictoryTheme.clean} > <VictoryErrorBar labels={({ datum }) => datum.y} data={[ { x: 15, y: 350, error: 0.2 }, { x: 20, y: 420, error: 0.05 }, { x: 25, y: 300, error: 0.1 }, { x: 30, y: 350, error: 0.2 }, { x: 35, y: 220, error: 0.15 }, ]} errorX={(datum) => datum.error * datum.x } errorY={(datum) => datum.error * datum.y } style={{ data: { stroke: "#c43a31", strokeWidth: 5, }, labels: { fontSize: 15, fill: "#c43a31", }, }} /> </VictoryChart>
Error Bars - Events
Events can be handled by passing an array of event objects to the events prop on the component. Each event object should specify a target and an eventHandlers object. See the events guide for more information.
<VictoryChart domainPadding={15} theme={VictoryTheme.clean} > <VictoryErrorBar labels={({ datum }) => datum.y} data={[ { x: 15, y: 350, error: 0.2 }, { x: 20, y: 420, error: 0.05 }, { x: 25, y: 300, error: 0.1 }, { x: 30, y: 350, error: 0.2 }, { x: 35, y: 220, error: 0.15 }, ]} errorX={(datum) => datum.error * datum.x } errorY={(datum) => datum.error * datum.y } events={[ { target: "data", eventHandlers: { onClick: () => { return [ { target: "data", mutation: (props) => { const stroke = props.style && props.style.stroke; return stroke === "#c43a31" ? null : { style: { stroke: "#c43a31", strokeWidth: 7, }, }; }, }, ]; }, }, }, ]} /> </VictoryChart>
Standalone Rendering
Error Bars can be rendered outside a VictoryChart.
<VictoryErrorBar theme={VictoryTheme.clean} data={[ { x: 15, y: 350, error: 0.2 }, { x: 20, y: 420, error: 0.05 }, { x: 25, y: 300, error: 0.1 }, { x: 30, y: 350, error: 0.2 }, { x: 35, y: 220, error: 0.15 }, ]} errorX={(datum) => datum.error * datum.x } errorY={(datum) => datum.error * datum.y } />
They can also be embeded in other SVG components by using the standalone prop.
<svg width={300} height={300} style={{ display: "block", margin: "0 auto", }} > <circle cx={150} cy={150} r={150} fill="#9ded91" /> <VictoryErrorBar standalone={false} theme={VictoryTheme.clean} width={300} height={300} padding={{ left: 10, right: 10 }} data={[ { x: 15, y: 350, error: 0.2 }, { x: 20, y: 420, error: 0.05 }, { x: 25, y: 300, error: 0.1 }, { x: 30, y: 350, error: 0.2 }, { x: 35, y: 220, error: 0.15 }, ]} errorX={(datum) => datum.error * datum.x } errorY={(datum) => datum.error * datum.y } /> </svg>