Skip to content
Chart.js Plugin for showing error bars for various chart types
JavaScript
Branch: master
Clone or download
sgratzl Merge pull request #6 from sgratzl/dependabot/npm_and_yarn/handlebars…
…-4.5.3

Bump handlebars from 4.2.0 to 4.5.3
Latest commit 21eb64a Dec 31, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github add github infos Oct 25, 2019
samples Multibar support (#3) Sep 20, 2019
src
.editorconfig initial commit Sep 16, 2019
.eslintrc initial commit Sep 16, 2019
.gitignore distribute pack, too Sep 28, 2019
.release-it.json distribute pack, too Sep 28, 2019
LICENSE
README.md Multibar support (#3) Sep 20, 2019
babel.config.js initial commit Sep 16, 2019
jest.config.js initial commit Sep 16, 2019
package-lock.json Bump handlebars from 4.2.0 to 4.5.3 Dec 30, 2019
package.json Release 1.2.1 Nov 20, 2019
rollup.config.js rename esm build name Sep 19, 2019

README.md

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, horizontalBar, line, scatter, polarArea) with their error bar equivalent (barWithErrorBars, horizontalBarWithErrorBars, lineWithErrorBars, scatterWithErrorBars, polarAreaWithErrorBars). In addition, it comes with equivalents for scales (linearWithErrorBars, logarithmicWithErrorBars, radialLinearWithErrorBars) that consider the error bars when computing the data limits.

Works only with Chart.js >= 2.8.0

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

Install

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

Usage

see Samples on Github

and CodePen

Styling

Several new styling keys are added to the indiviual 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, line, scatter, polarArea

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;
}

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 another array. The outer for the dataset, the inner for the error bars.

interface IErrorBarStyling {
  /**
   * line width of the center line
   * @default [[1, 3]]
   * @scriptable
   */
  errorBarLineWidth: number[][];
  /**
   * color of the center line
   * @default [['#2c2c2c', '#1f1f1f']]
   * @scriptable
   */
  errorBarColor: string[][];
  /**
   * line width of the whisker lines
   * @default [[1, 3]]
   * @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, 0.25]]
   * @scriptable
   */
  errorBarWhiskerRatio: number[][];
  /**
   * pixel width of the whiskers for non bar chart cases
   * @default [[20, 24]]
   * @scriptable
   */
  errorBarWhiskerSize: number[][];
  /**
   * color of the whisker lines
   * @default [['#2c2c2c', '#1f1f1f']]
   * @scriptable
   */
  errorBarWhiskerColor: 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]
}

Building

npm install
npm run build
You can’t perform that action at this time.