JSFiddle - React, Tailwind, and code Playground

by Kirubel Girma

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.js"></script>
<div style="width:75%;">
  <canvas id="chart"></canvas>
</div>

JavaScript

var canvas = document.getElementById('chart');
new Chart(canvas, {
  type: 'bar',
  data: {
    labels: ['1', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [{
      label: 'A',
      xAxisID: 'A',
      data: [10, 20, 50, 60, 69]
    }, {
      label: 'B',
      xAxisID: 'A',
      data: [2, 3, 5, 2, 3]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        id: 'A',
        position: 'top',
        type: 'category',
      },
      {
        id: 'B',
        position: 'bottom',
        type: 'category',
      }]
    }
  }
});