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). 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

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 CodePen

Styling

Several new styling keys are added to the indiviual chart types

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

Data structure

The data structure depends on the chart type. It uses the fact that chart.js is supporting scatterplot thus 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 error bar value
   */
  yMax: number;
}

chart types: horizontalBar

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

chart types: scatter

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

Building

npm install
npm run build