JSFiddle - React, Tailwind, and code Playground

by ttquang1063750

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.js"></script>
<div style="width: 80vw; height: 80vh; margin: auto">
    <canvas id="bar"></canvas>
</div>

JavaScript

const data = {
  datasets: [
    {
      label: 'In',
      data: [
        {x: 'col1', y: 1},
        {x: 'col2', y: 1}, // duplicate x
        {x: 'col2', y: -3}, // duplicate x
        {x: 'col3', y: 2}
      ]
    },
    {
      label: 'Out',
      data: [
        {x: 'col1', y: 1},
        {x: 'col2', y: 2},
        {x: 'col3', y: 2}
      ]
    }
  ]
};

new Chart(document.getElementById('bar'), {
  type: 'bar',
  data,
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Can not stacked at col2'
      }
    },
    scales: {
      x: {
        stacked: true
      },
      y: {
        stacked: true
      },
    },
  }
});