stack category with 2 lineal scales

[pmbert]

[LeeLenaleee]

https://www.chartjs.org/docs/master/samples/scales/stacked.html

https://stackoverflow.com/questions/70014512/how-to-align-multiple-x-axes-in-chart-js/70018767#70018767

[pmbert]

I was not yet ready with my question:

I need to stack category and linear scales as described in https://www.chartjs.org/docs/latest/samples/scales/stacked.html, but with 1 category scale and 2 linear scales. But it doesn't seem to work.

In the below example, the yellow line shouldn't overlap the category part. Is there any solution for this problem?

[LeeLenaleee]

You need to add it to the same stack as the other scales

[pmbert]

How must I do that? I tried this. What am I doing wrong:

with that code.

const config = {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Stacked scales',
      },
    },
    scales: {
      y: {
        type: 'linear',
        position: 'left',
        stack: 'demo',
        stackWeight: 2,
        grid: {
          borderColor: Utils.CHART_COLORS.red
        }
      },
     y3: {
        type: 'linear',
        position: 'right',
        stack: 'demo',
        stackWeight: 2,
        grid: {
          borderColor: Utils.CHART_COLORS.yellow
        }
      },
      y2: {
        type: 'category',
        labels: ['ON', 'OFF'],
        offset: true,
        position: 'left',
        stack: 'demo',
        stackWeight: 1,
        grid: {
          borderColor: Utils.CHART_COLORS.blue
        }
      }
    }
  },
};

const DATA_COUNT = 7;
const NUMBER_CFG = {count: DATA_COUNT, min: 0, max: 100};

const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [
    {
      label: 'Dataset 1',
      data: [10, 30, 50, 20, 25, 44, -10],
      borderColor: Utils.CHART_COLORS.red,
      backgroundColor: Utils.CHART_COLORS.red,
    },
    {
      label: 'Dataset 3',
      data: [100, 300, 500, 200, 250, 440, -100],
      borderColor: Utils.CHART_COLORS.yellow,
      backgroundColor: Utils.CHART_COLORS.yellow,
     yAxisID: 'y3',
     borderDash: [10, 10]
    },
    {
      label: 'Dataset 2',
      data: ['ON', 'ON', 'OFF', 'ON', 'OFF', 'OFF', 'ON'],
      borderColor: Utils.CHART_COLORS.blue,
      backgroundColor: Utils.CHART_COLORS.blue,
      stepped: true,
      yAxisID: 'y2',
    }
  ]
};

[kurkle]

You'll need two scales on the right size too. You should be able to hide the ticks/grid if you don't want it to be visible.

[pmbert]

OK, now I've understood the trick: I need the category scale on both sides. Additionally, I have to sort the scales in right order by renaming them.

Thank you very much for the fast help. I find that's absolutely extraordinary

[kurkle]

Additionally, I have to sort the scales in right order by renaming them.

You can use the weight option to do the sorting (renaming might not work the same in every platform).
https://www.chartjs.org/docs/latest/axes/#common-options-to-all-axes

[pmbert]

Thank you for that hint.
It works. Setting the weight of the left category scale to 2 moves it down.
I didn't quite understand the documentation in that point. Also missing is the information in which order it is sorted.

[sjaanus]

You can use weight property to order the scales. https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#common-options-to-all-axes

[alexbodn]

thank you for mentioning this method of ordering the scales.
as far as i experimented with the given multiple scales example at https://www.chartjs.org/docs/latest/samples/scales/stacked.html,
the alphabetic / textual order of the scale key (yAxisID) takes precedence over the weight value order.