[Chartjs]-How to Create Chart.JS Bar Graph with Min, Max & Average

3๐Ÿ‘

โœ…

You can combine "floating bars" and "stacked bar chart". See https://codepen.io/fantasyzer/pen/KKaqgoM for an example. Note that the data of each bar is given as an array [Ybegin,Yend]. If you set stackable to false for the y scale the values are to be given as absolute:

  datasets: [
  {
    data: [
      [10,12],
      [20,25],
      [15,25],
      [25,28],
  ...

Floating stacked bar chart example on codepen.io

Ref:
https://www.chartjs.org/docs/latest/samples/bar/floating.html, https://www.chartjs.org/docs/latest/samples/bar/stacked.html

1๐Ÿ‘

I completely failed to get this working for bar charts (works for line, scatter, radar). Then I found new chartjs 2.9 feature here Min Max bar values

Using this on bar and horizontalBar successfully.

Leave a comment