Chartjs bar min, max and avarage value

Question

Hi I have a chart with chartjs, which inserts between min, max, average values, with a bar type chart. So far, everything is fine, the values are entered, what I want to do is that the bars of the graph are positioned starting from their min on the y axis up to the maximum on the y axis, I do not want the bar to start from the value 0.

dataset = {
  labels: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'],
  datasets: [{
      label: 'min',
      borderWidth: 4,
      borderColor: "#ef4931",
      backgroundColor: "#ef4931",
      borderJoinStyle: 'miter',
      pointHitRadius: 10,
      data: data[1],
      fill: false,
    },
    {
      label: 'avg',
      borderWidth: 4,
      borderColor: "#ef4931",
      backgroundColor: "#ef4931",
      borderJoinStyle: 'miter',
      pointHitRadius: 10,
      data: data[0],
      fill: "-1",
    },
    {
      label: 'max',
      borderWidth: 4,
      borderColor: "#ef4931",
      backgroundColor: "#ef4931",
      borderJoinStyle: 'miter',
      pointHitRadius: 10,
      data: data[2],
      fill: "-1",
    }
  ]
};

options = {
  legend: {
    display: false,
  },
  title: {
    display: true,
    position: 'bottom',
    fontSize: 14
  },
  tooltips: {
    mode: 'index',
    intersect: false,
    titleFontStyle: "bold",
    titleFontColor: "rgba(255, 255, 255, 1)",
    bodyFontStyle: "normal",
    bodyFontColor: "rgba(255, 255, 255, 1)",
    backgroundColor: "rgba(102, 102, 102, 1)",
    borderWidth: 1,
    bodySpacing: 5,
    xPadding: 15,
    yPadding: 15,
    displayColors: false,
    callbacks: {
      title: function(item, data) {
        var title = "";
        title += item[0].xLabel;
        return title;
      }
    }
  },
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    xAxes: [{
      stacked: true,
      barThickness: 10,
    }],
    yAxes: [{
      stacked: true,
      display: true,
      scaleLabel: {
        display: true,
        fontSize: 14,
        fontStyle: "bold",
      },
      ticks: {
        callback: function(value, index, values) {
          return parseInt(value) + " bpm";
        },
      }
    }]
  },
  animation: {
    duration: 1000,
    easing: "easeInOutQuad"
  }
};

myChart.config.data = dataset;
myChart.options = options;
myChart.config.type = "bar";
myChart.update(); 

Answer 1

in your y axes config you can add the prop suggestedMin or min between the stacked and display prop. With this the scale will start at that number, here you can put in the value of the lowest bar.

SuggestedMin will go lower if there is a bar with a lower value, if you use min if will use that as a final so if you have a bar with a lower value it wont get shown.

Answer 2

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],
  ...

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