Awesome
Chart.js Error Bars
Chart.js module for charting error bars plots. This plugin extends the several char types (bar
, line
, scatter
, polarArea
)
with their error bar equivalent (barWithErrorBars
, lineWithErrorBars
, scatterWithErrorBars
, polarAreaWithErrorBars
).
Bar Chart
Horizontal Bar Chart
Line Chart
Scatterplot
Polar Area plot
Related Plugins
Check out also my other chart.js plugins:
- chartjs-chart-boxplot for rendering boxplots and violin plots
- chartjs-chart-geo for rendering map, bubble maps, and choropleth charts
- chartjs-chart-graph for rendering graphs, trees, and networks
- chartjs-chart-pcp for rendering parallel coordinate plots
- chartjs-chart-venn for rendering venn and euler diagrams
- chartjs-chart-wordcloud for rendering word clouds
- chartjs-plugin-hierarchical for rendering hierarchical categorical axes which can be expanded and collapsed
Install
npm install --save chart.js chartjs-chart-error-bars
Usage
see Examples
Styling
Several new styling keys are added to the individual chart types
Data structure
The data structure depends on the chart type. It uses the fact that chart.js is supporting scatterplots. Thus, it is already prepared for object values.
Chart types: bar
and line
see TypeScript Interface:
Chart type: bar
with indexAxis: 'y'
Chart type: scatter
a combination of the previous two ones
and
Chart type: polarArea
Multiple Error Bars
Multiple error bars are supported.
Styling
The styling options support different array version.
Note: as with other chart.js style options, using an array will be one value per dataset. Thus, to specify the values for different error bars, one needs to wrap it in an object with a v
key having the value itself. The outer for the dataset, the inner for the error bars.
see TypeScript interface:
Data structure
Just use array of numbers for the corresponding data structures attributes (xMin
, xMax
, yMin
, yMax
). The error bars will be rendered in reversed order. Thus, by convention the most inner error bar is in the first place.
e.g.
{
y: 4,
yMin: [2, 1],
yMax: [5, 6]
}
ESM and Tree Shaking
The ESM build of the library supports tree shaking thus having no side effects. As a consequence the chart.js library won't be automatically manipulated nor new controllers automatically registered. One has to manually import and register them.
Variant A:
import Chart, { LinearScale, CategoryScale } from 'chart.js';
import { BarWithErrorBarsController, BarWithErrorBar } from 'chartjs-chart-error-bars';
// register controller in chart.js and ensure the defaults are set
Chart.register(BarWithErrorBarsController, BarWithErrorBar, LinearScale, CategoryScale);
const chart = new Chart(document.getElementById('canvas').getContext('2d'), {
type: BarWithErrorBarsController.id,
data: {
labels: ['A', 'B'],
datasets: [
{
data: [
{
y: 4,
yMin: 1,
yMax: 6,
},
{
y: 2,
yMin: 1,
yMax: 4,
},
],
},
],
},
});
Variant B:
import { BarWithErrorBarsChart } from 'chartjs-chart-error-bars';
const chart = new BarWithErrorBarsChart(document.getElementById('canvas').getContext('2d'), {
data: {
//...
},
});
Development Environment
npm i -g yarn
yarn install
yarn sdks vscode
Building
yarn install
yarn build