datavisyn/chartjs-plugin-error-bars

Error Bars Chart.js Plugin

DEPRECATED: 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.

DEPRECATION Information

Please note that this project has been archived and is no longer being maintained. There is an active fork https://www.npmjs.com/package/chartjs-chart-error-bars and we will also contribute our future changes to it.

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}
      }, ...

      /* or for graded error bars

      errorBars: {
        'February': [{plus: 15, minus: -34}, {plus: 10, minus: -26}],
        'March': [{plus: 5, minus: -24}, {plus: 2, minus: -16}],
        'May': [{plus: 35, minus: -14}, {plus: 7, minus: -7}],
        'June': [{plus: 45, minus: -4}, {plus: 25, minus: -2}]
      }, ...

      */

corresponding TypeScript interface

interface IErrorBars {
  [label: string]: IErrorBar | IErrorBar[];
}

interface IErrorBar {
  plus: number;
  minus: number;
}

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, or array of colors
         * @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%), or array of such definition
         * @default 10
         */
        width: 10 | '10px' | '60%',
        
        /**
         * lineWidth as number, or as string with pixel (px) ending
         */
        lineWidth: 2 | '2px',

        /**
         * lineWidth as number, or as string with pixel (px) ending, or array of such definition
         * @default 2
         */
        lineWidth: 2 | '2px',

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

  ...
}

corresponding TypeScript interface

interface IChartJsPluginErrorBarsOptions {
  color: string | string[];
  width: (string | number) | (string | number)[];
  lineWidth: (string | number) | (string | number)[];
  absoluteValues: boolean;
}

Building

npm install
npm run build

---

This repository is part of the Target Discovery Platform (TDP). For tutorials, API docs, and more information about the build and deployment process, see the documentation page.

chartjs-plugin-error-bars's Issues

Error bars are not hidden when a dataset is disabled

This behavior is even visible in the test codepen: https://codepen.io/sluger/pen/YjJKYy
See the attached image

error bars not appearing when graph is created with x axis as time series

Hi,

When creating a graph with the options :
scales: { x: { type: 'time', distribution: 'series', time: { unit: 'day' } } }

Any datasets with type lineWithErrorBars or barWithErrorBars (didn't test others), won't be displayed.
Same thing when you update datasets after the graph is created.

Of course if you create a graph with no time series for x, the line and bar with error dataset show normally.

After graph is created with no time series, if you update x axis to become time series and if the error bar dataset is already displayed, it will stay and work normally.

data scaling

https://codepen.io/sgratzl/pen/PBLeJK?editors=0010

I don't understand how the error bars are scaled or defined. I define the value to be 50 and plus: 20 and minus: -30

the result looks like that:

I would expect that the upper bar is at 70 and the lower at 20 assuming these are relative values to the base value. I cannot be percentage values either since it doesn't work out with value=100 + 20% = 120 either.

ctx undefined

I'm using the plugin with chartjs 2.4.0 and it doesn't work. There's an error on line 196 of Plugin.Errorbar.js.

      var errorBarColors = Array.isArray(options.color) ? options.color : [options.color];
      var ctx = chart.ctx;
      ctx.save(); // map error bar to barchart bar via label property

ctx is accessible at the second level, that is chart.chart (basically the chart object has another chart field, and the the context)

The code should be

      var errorBarColors = Array.isArray(options.color) ? options.color : [options.color];
      var ctx = chart.chart.ctx;
      ctx.save(); // map error bar to barchart bar via label property

Edit: I used the master branch and built the lib using npm install & npm run build

provide option to use absolute error bar values instead of relative ones

so

x = 10
minus: -3
plus: +2

can also become

x = 10
minus: 7
plus: 12

Allow for linear/date scales on line charts

Hi,

Would you consider index-based errorBars data, rather than currently only supporting key based (even if you have tree models)?

I have a line chart, with a linear scale, where the labels are generated by using the Date() of the data row. This makes it impossible to use keys for the errorBars data.

I managed to get the plugin working as I needed by changing "dataset.forEach((bar) => {" to "dataset.forEach((bar, ii) => {" on line 191, and then adding this after line 204:
} else if (!hasLabelProperty && cur[ii]) { errorBarData = cur[ii];

Thanks

Error bars don't hide when hiding the actual chart.

Hey Guys!

thanks for the library! it's amazing.
I noticed that when you click on the legend name to hide the chart, the bars still appear in the canvas. how to hide them?

here in your example, try to click on one of the legends to know what i mean. https://codepen.io/sluger/pen/YjJKYy

Thanks in advance!

Multi-lined labels string[][]

ChartJS allows multi-lined labels of type string[][], but you can't have an array as a key. How to add error deviations to a data with multi-lined label as string[] array label?

  data: {
    labels: [['January', 'January line 2'], ['February', 'February line 2'], ['March', 'March line 2']],
    datasets: [{
      ...
      errorBars: {
        'February': {plus: 15, minus: -34}, // the label is not 'February' but ['February', 'February line 2'] ???
        'March': {plus: 5, minus: -24}
      },
...

How to add the {plus, minus} error object to the labels[0] which is of type string[] - [string, string] while you can't have a string[] key?

Examples: newly added datasets (e.g. in horizontal-bar) don't have error bars

When adding e.g. two new datasets and remove the first two, then no error bars are left

Add support for error-bar info in tooltip

It would be nice if the values of the error-bars were visible in the chart's tooltips.

Option to disable Error Bars via Javascript

It would be nice to have an option, which enables/disables the Error Bars via Javascript

Support for cartesian axis?

https://www.chartjs.org/docs/master/axes/cartesian/time

Where instead of using labels: [, ,,,]
uses data: [{x:'', y''},{x:'', y''},{x:'', y''},{x:'', y''}]

Update Codeowner

The code owner of this repository has changed, therefore it is necessary to update the repo.

Support for scatterplot?

Thanks for developing this plugin, exactly what we needed! Is there a way to make this plugin work with scatterplot chart?

Possibly related to #10

change config key to 'error-bars'

see comment

chartjs/awesome#3 (review)

demo no longer works.

The demo link on code-pen no longer works.

Is there support for hiding the bars for zero values?

Are there any display options or scriptable ways to enable and disable error bars for values that are 0? Drawing the error bar when there is not a confidence interval or when the value is zero makes for a distracting chart.

Add support for two y Axes

When trying to add a second axis on the right side of the canvas, the error bars disappear

Error bars appear on top of tooltips

The error bars appear to have a higher z-index than the default tooltips that Chart.js creates on the canvas. This can make the tooltips really hard to read with dense datasets:

Bug in accessing `chart.data.dataset[i]`

The current version of the master branch has a bug when accessing the dataset line 191 of plugin.js. This leads to errors on the console and does not show any error bars.

Please replace chart.data.dataset[i] by chart.data.datasets[i] to fix it. Or remove the whole if-clause from line 191 to line 196 (as done in develop branch).