chartjs-chart-error-bars

Chart.js Error Bars

Chart.js module for charting error bars plots. This plugin extends the several char types (bar, horizontalBar, line, scatter, polarArea) with their error bar equivalent (barWithErrorBars, horizontalBarWithErrorBars, lineWithErrorBars, scatterWithErrorBars, polarAreaWithErrorBars).

Works only with Chart.js >= 3.0.0

Bar Chart

Horizontal Bar Chart

Line Chart

Scatterplot

Polar Area plot

Install

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

Usage

see Samples on Github

and

Styling

Several new styling keys are added to the individual chart types

interface IErrorBarStyling {
  /**
   * line width of the center line
   * @default 1
   * @scriptable
   */
  errorBarLineWidth: number;
  /**
   * color of the center line
   * @default '#2c2c2c'
   * @scriptable
   */
  errorBarColor: string;
  /**
   * line width of the whisker lines
   * @default 1
   * @scriptable
   */
  errorBarWhiskerLineWidth: number;
  /**
   * width of the whiskers in relation to the bar width, use `0` to force a fixed with, see below
   * @default 0.2
   * @scriptable
   */
  errorBarWhiskerRatio: number;
  /**
   * pixel width of the whiskers for non bar chart cases
   * @default 20
   * @scriptable
   */
  errorBarWhiskerSize: number;
  /**
   * color of the whisker lines
   * @default '#2c2c2c'
   * @scriptable
   */
  errorBarWhiskerColor: string;
}

Data structure

The data structure depends on the chart type. It uses the fact that chart.js is supporting scatterplot. Thus, it is already prepared for object values.

Chart types: bar and line

interface IErrorBarItem {
  /**
   * the actual value
   */
  y: number;
  /**
   * the minimal absolute error bar value
   */
  yMin: number;
  /**
   * the maximal absolute error bar value
   */
  yMax: number;
}

Chart type: horizontalBar

interface IErrorBarItem {
  /**
   * the actual value
   */
  x: number;
  /**
   * the minimal absolute error bar value
   */
  xMin: number;
  /**
   * the maximal absolute error bar value
   */
  xMax: number;
}

Chart type: scatter

interface IErrorBarItem {
  /**
   * the actual x value
   */
  x: number;
  /**
   * the minimal absolute error bar x value
   */
  xMin: number;
  /**
   * the maximal absolute error bar x value
   */
  xMax: number;
  /**
   * the actual y value
   */
  y: number;
  /**
   * the minimal absolute error bar y value
   */
  yMin: number;
  /**
   * the maximal absolute error bar y value
   */
  yMax: number;
}

Chart type: polarArea

interface IErrorBarItem {
  /**
   * the actual value
   */
  r: number;
  /**
   * the minimal absolute error bar value
   */
  rMin: number;
  /**
   * the maximal absolute error bar value
   */
  rMax: number;
}

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.

interface IErrorBarStyling {
  /**
   * line width of the center line
   * @default {v: [1, 3]}
   * @scriptable
   */
  errorBarLineWidth: number | { v: number[] };
  /**
   * color of the center line
   * @default {v: ['#2c2c2c', '#1f1f1f']}
   * @scriptable
   */
  errorBarColor: string | { v: string[] };
  /**
   * line width of the whisker lines
   * @default {v: [1, 3]}
   * @scriptable
   */
  errorBarWhiskerLineWidth: number | { v: number[] };
  /**
   * width of the whiskers in relation to the bar width, use `0` to force a fixed with, see below
   * @default {v: [0.2, 0.25]}
   * @scriptable
   */
  errorBarWhiskerRatio: number | { v: number[] };
  /**
   * pixel width of the whiskers for non bar chart cases
   * @default {v: [20, 24]}
   * @scriptable
   */
  errorBarWhiskerSize: number | { v: number[] };
  /**
   * color of the whisker lines
   * @default {v: ['#2c2c2c', '#1f1f1f']}
   * @scriptable
   */
  errorBarWhiskerColor: string | { v: string[] };
}

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 from 'chart.js';
import { BarWithErrorBarsController } from 'chartjs-chart-error-bars';

// register controller in chart.js and ensure the defaults are set
BarWithErrorBarsController.register();

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 set version 2
yarn
yarn pnpify --sdk

Building

yarn install
yarn build