Chart JS Layered Vertical Bar Chart

Question

I am using react-chartjs-2 in my project. Let's take the first column in the example I gave. The value of blue is 50, and the value of green is 20. In this case, my expectation is that green should be 20 below blue, and blue should be 50. But chartjs calculates 50 + 20 and goes up to 70. Is there a config for this in chartjs?

        <Bar
            options={{
                plugins: {
                    legend: {
                        display: false,
                    },
                },
                responsive: true,
                scales: {
                    x: {
                        stacked: true,
                        grid: {
                            display: false,
                        },
                        ticks: {
                            font: { size: 12 },
                        },
                    },
                    y: {
                        stacked: true,
                        grid: {
                            borderDash: [2, 2],
                            color: '#e8e8e8',
                        },
                        ticks: {
                            font: { size: 12 },
                            count: 3,
                        },
                    },
                },
            }}
            data={{
                labels: week.map(day => day.format('MMM D')),
                datasets: [
                    {
                        label: 'Test 3',
                        data: [50, 50, 50, 50, 50],
                        backgroundColor: 'blue',
                        stack: 'Stack 0',
                    },
                    {
                        label: 'Test 4',
                        data: [20, 24, 60, 90, 50],
                        backgroundColor: 'green',
                        stack: 'Stack 0',
                    },
                ],
            }}
        />

screenshot

score 0 · Accepted Answer · answered Jun 02 '22 at 10:38

With your current config you tell chart.js to stack the x and y axis.

With stakcing the x axis it moves all the bars to a single column instead of next to eachother and with a stacked y axis it moves all bars above eachother.

So to achieve the behaviour you want you need to set stacked to false in your y axis config (or just remove it entirely):

<Bar
  options={{
    plugins: {
      legend: {
        display: false,
      },
    },
    responsive: true,
    scales: {
      x: {
        stacked: true,
        grid: {
          display: false,
        },
        ticks: {
          font: { size: 12 },
        },
      },
      y: {
        grid: {
          borderDash: [2, 2],
          color: "#e8e8e8",
        },
        ticks: {
          font: { size: 12 },
          count: 3,
        },
      },
    },
  }}
  data={{
    labels: week.map((day) => day.format("MMM D")),
    datasets: [
      {
        label: "Test 3",
        data: [50, 50, 50, 50, 50],
        backgroundColor: "blue",
        stack: "Stack 0",
      },
      {
        label: "Test 4",
        data: [20, 24, 60, 90, 50],
        backgroundColor: "green",
        stack: "Stack 0",
      },
    ],
  }}
/>;

Thank you, it works for me. But, since Test 3 is defined earlier than Test 4 in the dataset, I guess there is a priority order or something like z-index. It doesn't show up at all when test 4 has a smaller value. How can I overcome this? For example, as in the 0nd indexes (50 vs 20) — Serhat, Jun 02 '22 at 13:18
You can put Test4 first in the datasets array or add the property `order: 0` to the test4 dataset and `order: 1` to test3. https://www.chartjs.org/docs/3.7.1/charts/mixed.html#drawing-order — LeeLenalee, Jun 02 '22 at 13:20

Chart JS Layered Vertical Bar Chart

1 Answers1