Chartjs-Chartjs display data in one bar line with 3 different data sets in 3 different colors

by

1👍

your problem is the next, you are using a wrong config you must something like this:

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js"></script>

<canvas id="MyChart" width="400" height="200"></canvas>
<script>
new Chart(document.getElementById("MyChart"), {
  type: 'bar',
  data: {
    labels: [2017],
    datasets: [{
      label: "Chocolate",
      type: "bar",
      stack: "Base",
      backgroundColor: "#eece01",
      data: [30],
    }, {
      label: "Vanilla",
      type: "bar",
      stack: "Base",
      backgroundColor: "#87d84d",
      data: [-15],
    }, {
      label: "Strawberry",
      type: "bar",
      stack: "Base",
      backgroundColor: "#f8981f",      
      data: [20],
    }, {
      label: "candy",
      type: "bar",
      stack: "Base",
      backgroundColor: "#00b300",
      backgroundColorHover: "#3e95cd",
      data: [-10]
    }]
  },
  options: {
    plugins: {
      title: {
        display: true,
        text: 'Chart.js Bar Chart - Stacked'
      },
    },
    responsive: true,
    interaction: {
      intersect: false,
    },
    scales: {
      x: {
        stacked: true,
      },
      y: {
        stacked: true
      }
    }
  }
});
</script>

Now you just need to fix the styles and sizes of the graphic

0👍

If someone finds this, the solution is this:

  const config = {
      type: 'bar',
      data: data,
      options: {
        plugins: {
          title: {
            display: true,
            text: 'Chart.js Bar Chart - Stacked'
          },
        },
        responsive: true,
        scales: {
          x: {
            stacked: true,
          },
          y: {
            stacked: true
          }
        }
      }
};

Leave a comment