CODEWITHSUNDEEP
javascriptjquerychartschart.js
jordanpowell88
jordanpowell88

Reputation: 837

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

Upvotes: 2

Views: 5090

Answers (2)

Pete
Pete

Reputation: 1271

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

Upvotes: 5

Rob Raymond
Rob Raymond

Reputation: 31236

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.

Upvotes: 1

Related Questions