JSFiddle - React, Tailwind, and code Playground

by ttquang1063750

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<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: 'a', y: 1},
        {x: 'b', y: 1}, // duplicate x
        {x: 'b', y: -3}, // duplicate x
        {x: 'c', y: 2}
      ]
    },
    {
      label: 'Out',
      data: [
        {x: 'a', y: 1},
        {x: 'b', y: 2},
        {x: 'c', y: 2}
      ]
    }
  ]
};

new Chart(document.getElementById('bar'), {
  type: 'bar',
  data,
  options: {
    scales: {
      x: {
        stacked: true
      },
      y: {
        stacked: true
      },
    },
  },
  plugins: [
    {
      id: 'test-my-chart',
      beforeInit(chart) {
         consoloe.log(chart)
      }
    }
  ]
});