Chart JS Layered Vertical Bar Chart

user_14153148 0
Viewed 143

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

react-chartjs react-chartjs-2 chart.js
1 Answers

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",
      },
    ],
  }}
/>;
user_86829830
Related