How to Create Chart.JS Bar Graph with Min, Max & Average


I have an app that is generating some bart charts from a service. My client added an additional chart to display a range (min, max and average). I was wondering if their is a way to accomplish this using chart.js. I looked through their docs and wasn't able to find any examples or documentation on how to accomplish this. Anyone else run into this or have a different library they prefer? A Graph That Looks Something Like This


Answers:


Chart.js supports stackable bar charts using the following option:

scales: {
    xAxes: [{
        stacked: true,
    }],
    yAxes: [{
        stacked: true
    }]
}

Use the fill: false option for the dataset with minimum values and fill: "-1" for the datasets with average and maximum values. Then choose two different backgroundColors for average and maximum.

I made an example on codepen: https://codepen.io/fantasyzer/pen/MdpMMv

You can also change the config type to line and it will still work.

Sample Chart