0

Example of Stacked Y-Axes

I can't figure out a way in Chart.js to get the Y-Axes to stack like I have in the example picture.

When I keep the scales object simple like this:

scales: {
  y: {
    stacked: true,
    title: {
      display: true,
      text: "Temperature (°C)",
    }
  },
  x: {
    type: "time",
    time: {
      tooltipFormat: "LTS",
      unit: "hour",
    },
    title: {
      display: true,
      text: "Datetime",
    },
  }
},

I obviously get a single Y-Axis, but instead of scaling to the maximum of any of the datasets, it seems to add each dataset up (ex: Say max Temp from any set is 40 °C, if I have 6 datasets the Y Scale goes from 0 - 250)

Additive Y-Axis example

It does stack all of the lines nicely though so I'm really hoping there is a decent solution as the Y-Axis right now is not helpful to a viewer. Thanks for any help!

Bagoette
  • 33
  • 1
  • 3
  • Not sure that I understand, but have you tried starting graphs 2-6 with negative values? For example, graph 2 Y axis is [-40 up to 200], graph 3 y axis [-80 up to 160 ] ... etc. Never used chart.js, but you would be extracting the complication out of the hands of the framework and dealing with them yourself. – Nate T May 16 '21 at 23:29
  • Does that make sense? If no, I am likely misunderstanding the issue... – Nate T May 16 '21 at 23:30
  • Looks like `stacked = true` is stacking the z axis and stretching y? – Nate T May 16 '21 at 23:34
  • I mean each dataset is coming from a database, so no I haven't tried changing the actual data values to be negative. But "stacked = true" does what I expect it to do in terms of the actual lines being drawn (it stacks them so they don't overlap, much easier to see each set). – Bagoette May 17 '21 at 01:36

1 Answers1

0

With help from the Chart.js Slack channel, the easiest and actually great looking solution was just to separate each dataset into their own chart with only the top most chart showing a legend, and only the bottom chart showing an X-Axis. All middle charts have the X-Axis and legend turned off.

Bagoette
  • 33
  • 1
  • 3