JSFiddle - React, Tailwind, and code Playground

by Kirubel Girma

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<canvas id="myChart" width="500" height="300"></canvas>

JavaScript

var data = {
  labels: ["Label1", "Label2", "Label3", "Label4", "Label5"],
  datasets: [{
      "label": "Total V",
      "yAxisID": "A",
      "backgroundColor": "rgba(53,81,103,1)",
      "borderColor": "rgba(53,81,103,.4)",
      "data": [100, 90, 80, 70, 60]
    },
    {
      "label": "Total C",
      "xAxisID": "c",
      "data": ['aee', 'err', '8', '7', '6']
    },
    {
      "label": "Total D",
      "xAxisID": "d",
      "data": ['aee', 'err', '8', '7', '6']
    }
  ]
};

var options = {
  scales: {
    yAxes: [{
      id: 'A',
      position: 'left',
    }],
    xAxes: [{
      id: 'c',
      position: 'bottom',
    },{
      id: 'd',
      position: 'bottom',
    }]
  }
};


var ctx = document.getElementById("myChart");
new Chart(ctx, {
  type: "horizontalBar",
  data: data,
  options: options
});