vue-charts Components
ErrorBar
Show uncertainty ranges on bars and scatter points
<ErrorBar> draws whiskers that show the uncertainty of each value, such as a confidence interval or a measurement error. Put it inside a <Bar> or <Scatter>; it reads its error values from the same rows.
Scatter with error bars
<Scatter :data="data" fill="#f97316">
<ErrorBar data-key="errorX" direction="x" />
<ErrorBar data-key="errorY" direction="y" />
</Scatter>
Error values
The field named by data-key holds the error of each row:
- One number draws the same distance below and above the value:
errorY: 30coversvalue - 30tovalue + 30. - A pair
[below, above]draws different distances:errorY: [10, 45]coversvalue - 10tovalue + 45. - A missing or
0error draws no whisker for that row.
The axis domain grows to include the whiskers, so they are not cut off.
Bar with error bars
<BarChart :data="data" :height="300">
<XAxis data-key="month" />
<YAxis />
<Bar data-key="sales" fill="#f97316">
<ErrorBar data-key="salesError" :width="6" stroke="#14b8a6" />
</Bar>
</BarChart>
In a bar chart, the default direction follows the chart layout: vertical whiskers in a normal chart, horizontal whiskers in a layout="vertical" chart.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data-key | string | number | (row) => unknown | required | Field with the error: one number, or [below, above] |
direction | 'x' | 'y' | from the layout | Whisker direction. x works only on a number X axis, such as in a ScatterChart |
width | number | 5 | Width of the whisker caps in px |
stroke | string | var(--v-charts-axis, black) | Line color |
stroke-width | number | string | 1.5 | Line width |
ErrorBar works only inside Bar and Scatter. Other series do not support it.
Styling
Each whisker group has the class v-charts-error-bar, inside a v-charts-error-bars group.
Related
- Scatter Chart
- Bar Chart
- Axis domain and ticks: control the axis range