JSFiddle - React, Tailwind, and code Playground

by rough cheap

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, 40, 30, 70, 60]
    },
    {
      "label": "Total C",
      "xAxisID": "2",
      "backgroundColor": "rgba(255,153,0,1)",
      "borderColor": "rgba(255,153,0,.4)",
      "data": [9, 9, 8, 7, 6]
    }
  ]
};

var options = {
  scales: {
    yAxes: [{
      id: 'A',
      position: 'left',
      display: true,
      gridLines: {
        color: "rgba(53,81,103,.4)"
      }
    }, ],
    xAxes: [{
      barPercentage: 0.4,
      display: true,
      id: "1",
      position: 'bottom',

      ticks: {
        fontColor: 'rgb(0, 0, 0)'
      },
      fontSize: 500,
    }, {
      stacked: false,
      barPercentage: 1,
      display: true,
      type: 'linear',
      id: '2',
      position: 'top',
      ticks: {
        fontColor: 'rgb(0, 0, 0)'
      },
      fontSize: 500,
    }],
  }
};


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