Skip to content

sgratzl/chartjs-chart-error-bars

Repository files navigation

Chart.js Error Bars

License: MIT NPM Package Github Actions

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

bar char with error bars

Horizontal Bar Chart

horizontal bar chart with error bars

Line Chart

line chart with error bars

Scatterplot

scatter plot with error bars

Polar Area plot

polar area plot with error bars

Related Plugins

Check out also my other chart.js plugins:

Install

npm install --save chart.js chartjs-chart-error-bars

Usage

see Examples

and Open in CodePen

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:

IErrorBarXDataPoint

Chart type: bar with indexAxis: 'y'

IErrorBarYDataPoint

Chart type: scatter

a combination of the previous two ones

IErrorBarXDataPoint

and

IErrorBarYDataPoint

Chart type: polarArea

IErrorBarRDataPoint

Multiple Error Bars

Multiple error bars are supported.

multiple error bars

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:

IErrorBarOptions

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