SuperBar Chart for Chart.js

An extended superset of bar charts for Chart.js with variable thickness and error bars.

Install

npm install --save https://github.com/swayable/chartjs-chart-superbar

Usage

Make sure that you require or import the package wherever you are using Chart.js, and then set the chart type to superBar or horizontalSuperBar.

HTML

<div id="container">
  <canvas id="myChart"></canvas>
</div>

JS

var Chart = require('chart.js')
require('chartjs-chart-superbar')

var ctx = document.getElementById('myChart').getContext('2d')
new Chart(ctx, {
  type: 'superBar', // or 'horizontalSuperBar'
  data: {
    // ...
  },
})

Datasets

Expects datasets with the following format:

{
  label: 'My Dataset',
  data: [
    {
      y: 10.5,              // or x for horizontal
      error: 5.3,           // ± value for errors
      thickness: 0.3,       // bar thickness as % of total
      insignificant: false, // statistical significance
    }, // ...
  ]
}

Options

{
  errorBars: {
    show: true,                     // show/hide error bars
    color: 'rgba(255, 0, 0, 0.5)',  // stroke color for error bars
    width: 2,                       // error bar width (pixels)
    insignificantColor: 'blue'      // color to use for insignificant bars
  },
}

For more use cases, see files in examples/.

Bugs & Issues

When reporting bugs or issues, if you could include a link to a simple jsbin or similar demonstrating the issue, that would be really helpful.

Contributing

We ❤️ open source! See CONTRIBUTING for information on how to get started with development.

License

SuperBar is available under the MIT license.