chartjs-plugin-error-bars

Error Bars Chart.js Plugin

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
chartjs-plugin-error-bars
1803.0.02 years ago6 years agoMinified + gzip package size for chartjs-plugin-error-bars in KB

Readme

DEPRECATED: Chart.js Error Bars Plugin
!Target Discovery Platformtdp-imagetdp-url !NPM Packagenpm-imagenpm-url !CircleCIcircleci-imagecircleci-url
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.
selection_037 selection_038 selection_039

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
.