Chart.js creating a stacked barchart with stacked in one bar rather than across multiple

i want to create a stacked bar graph is chart.js where each bar is a dataset. and the data is stacked.

however, whenever im doing this is the new version of chart.js its spreading the data over multiple bars.

i want something like this. enter image description here

this is the data i got, i want to be able to have first bar, with O1, then o2,

second bar with a1, then d1? not sure if thats even possible enter image description here

This is what i have created in ssrs and trying to change over to chart.js

I do know if i lower the version it can do it, however, im trying to see if the new version of chart.js can do it. Has anyone done it and want to share the code or help?

this is the code i have right now,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>barchart</title>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/chart.js"
    ></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> -->
  </head>
  <body>
    <div style="height: 500px">
      <canvas id="ctx" width="700"></canvas>
    </div>
  </body>

  <script>
    var chart = new Chart(ctx, {
      type: "bar",
      data: {
        labels: ["Engineering Flow Diagrams", "Process Flow Driagram"], // responsible for how many bars are gonna show on the chart
        // create 12 datasets, since we have 12 items
        // data[0] = labels[0] (data for first bar - 'Standing costs') | data[1] = labels[1] (data for second bar - 'Running costs')
        // put 0, if there is no data for the particular bar
        datasets: [
          {
            label: "Washing and cleaning",
            data: [5, 8],
            backgroundColor: "#22aa99",
          },
          {
            label: "Traffic tickets",
            data: [5, 2],
            backgroundColor: "#994499",
          },
          {
            label: "Tolls",
            data: [0, 1],
            backgroundColor: "#316395",
          },
          {
            label: "Parking",
            data: [5, 2],
            backgroundColor: "#b82e2e",
          },
        ],
      },
      options: {
        responsive: true,
        plugins: {
          legend: {
            display: false,
            position: "right", // place legend on the right side of chart
          },
        },
        scales: {
          yAxis: {
            stacked: true,
          },
        },
      },
    });
  </script>
</html>

i will appreciate it alot.

Chart.js creating a stacked barchart with stacked in one bar rather than across multiple

0 Answers