JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<div class="canvas-wrapper">
  <canvas id="chart" ></canvas>
</div>

CSS

.canvas-wrapper {
  height: 200px;
}

JavaScript

var ctx = document.getElementById("chart");

var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [
    {
      label: "My First dataset",
      data: [65, 59, 80, 81, 56, 55, 40],
      type: 'line'
    },
    {
      label: "My Second dataset",
      data: [10, 30, 20, 50, 40, 70, 60],
      type: 'bar',
      yAxisID: 'y-axis-1'
    }
  ]
};

var options = {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    yAxes: [
      {
        position: "left",
        id: "y-axis-0"
      },
      {
        position: "right",
        id: "y-axis-1"
      }
    ]
  }
};

var myLineChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});