Chart.js Error Bars Plugin

Chart.js plugin for adding error bars to Line-, Barcharts or hierarchical Barcharts. This plugin also works with the Hierarchical Scale Plugin.

Try the demo on Codepen.

Install

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

Usage

Datasets must define an errorBars object that contains the error bar property key (same as in the used scale) and values plus and minus. Plus values are always positive, and minus vice versa.

Categorical scale usage:

  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      ...
      errorBars: {
        'February': {plus: 15, minus: -34},
        'March': {plus: 5, minus: -24},
        'May': {plus: 35, minus: -14},
        'June': {plus: 45, minus: -4}
      }, ...

Hierarchical scale plugin usage:

  data: {
    labels: [
      'A',
      {
        label: 'C1',
        children: ['C1.1', 'C1.2', 'C1.3', 'C1.4']
      }
    ],
    datasets: [{
      ...
      errorBars: {
        'A': {plus: 25, minus: -10},
        'C1.2': {plus: 14, minus: -15},
        'C1': {plus: 34, minus: -5}
      }, ...
  }

Find more Samples on Github.

Options

  options: {
    ...

    plugins: {
      chartJsPluginErrorBars: {
        /**
         * stroke color
         * @default: derived from borderColor
         */
        color: '#666',

        /**
         * bar width in pixel as number or string or bar width in percent based on the barchart bars width (max 100%)
         * @default 10
         */
        width: 10 | '10px' | '60%',
        
        /**
         * lineWidth as number, or as string with pixel (px) ending
         */
        lineWidth: 2 | '2px',

        /**
         * whether to interpet the plus/minus values, relative to the value itself (default) or absolute
         * @default false
         */
        absoluteValues: false
      }
    }

  ...
}

Building

npm install
npm run build

---

Developed by  datavisyn.