Neolithic Prancing Minotaurs

    chartjs-chart-error-bars
    TypeScript icon, indicating that this package has built-in type declarations

    3.6.0 • Public • Published

    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, lineWithErrorBars, scatterWithErrorBars, polarAreaWithErrorBars).

    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

    Related Plugins

    Check out also my other chart.js plugins:

    Install

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

    Usage

    see Samples on Github

    and Open in CodePen

    Styling

    Several new styling keys are added to the individual chart types

    Data structure

    The data structure depends on the chart type. It uses the fact that chart.js is supporting scatterplots. Thus, it is already prepared for object values.

    Chart types: bar and line

    see TypeScript Interface:

    IErrorBarXDataPoint

    Chart type: bar with indexAxis: 'y'

    IErrorBarYDataPoint

    Chart type: scatter

    a combination of the previous two ones

    IErrorBarXDataPoint

    and

    IErrorBarYDataPoint

    Chart type: polarArea

    IErrorBarRDataPoint

    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 an object with a v key having the value itself. The outer for the dataset, the inner for the error bars.

    see TypeScript interface:

    IErrorBarOptions

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

    ESM and Tree Shaking

    The ESM build of the library supports tree shaking thus having no side effects. As a consequence the chart.js library won't be automatically manipulated nor new controllers automatically registered. One has to manually import and register them.

    Variant A:

    import Chart from 'chart.js';
    import { BarWithErrorBarsController, RectangleWithErrorBar } from 'chartjs-chart-error-bars';
    
    // register controller in chart.js and ensure the defaults are set
    Chart.register(BarWithErrorBarsController, RectangleWithErrorBar);
    
    const chart = new Chart(document.getElementById('canvas').getContext('2d'), {
      type: BarWithErrorBarsController.id,
      data: {
        labels: ['A', 'B'],
        datasets: [
          {
            data: [
              {
                y: 4,
                yMin: 1,
                yMax: 6,
              },
              {
                y: 2,
                yMin: 1,
                yMax: 4,
              },
            ],
          },
        ],
      },
    });

    Variant B:

    import { BarWithErrorBarsChart } from 'chartjs-chart-error-bars';
    
    const chart = new BarWithErrorBarsChart(document.getElementById('canvas').getContext('2d'), {
      data: {
        //...
      },
    });

    Development Environment

    npm i -g yarn
    yarn install
    yarn sdks vscode

    Building

    yarn install
    yarn build

    Install

    npm i chartjs-chart-error-bars

    DownloadsWeekly Downloads

    146

    Version

    3.6.0

    License

    MIT

    Unpacked Size

    230 kB

    Total Files

    34

    Last publish

    Collaborators

    • sgratzl