Chartjs-Chart JS Layered Vertical Bar Chart

by

0👍

✅

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

Leave a comment