JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div>
  <canvas id="myChart"></canvas>
</div>

JavaScript

const data = [
{x: 'Almaty', 'net': 100, cogs: 50, gm: 50}, 
{x: 'Astana', 'net': 120, cogs: 55, gm: 75},
{x: 'Kostanay', 'net': 80, cogs: 35, gm: 45}
];
const config = {
  type: 'bar',
  data: {
    datasets: [{
      label: 'Bad',
      data: data,
      parsing: {
        yAxisKey: 'net'
      }
    }, {
      label: 'Neutral',
      data: data,
      parsing: {
        yAxisKey: 'cogs'
      }
    }, {
      label: 'Good',
      data: data,
      parsing: {
        yAxisKey: 'gm'
      }
    }]
  },
};

const myChart = new Chart(
  document.getElementById('myChart'),
  config
);