JSFiddle - React, Tailwind, and code Playground

by FungLee

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="canvas"></canvas>

JavaScript

let ctx = document.querySelector('#canvas').getContext('2d');
  console.log(ctx);
  let chart = new Chart(ctx, {
    responsive: true,
    type: 'bar',
    data: {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [{
          label: 'Sales',
          type: 'line',
          data: [51, 65, 40, 49, 60, 37, 40],
          fill: false,
          borderColor: '#EC932F',
          backgroundColor: 'transparent',
          pointBorderColor: '#EC932F',
          pointBackgroundColor: 'transparent',
          pointHoverBackgroundColor: '#EC932F',
          pointHoverBorderColor: '#EC932F',
          yAxisID: 'y-axis-2',
          // borderDash: [5, 5],
          pointBorderWidth: 0,
          lineTension: 0,
        },
        {
          type: 'bar',
          label: 'Visitor',
          data: [200, 185, 590, 621, 250, 400, 95],

          backgroundColor: '#71B37C',
          borderColor: '#71B37C',
          hoverBackgroundColor: '#71B37C',
          hoverBorderColor: '#71B37C',
          yAxisID: 'y-axis-1',
        }
      ]
    },
    options: {
      responsive: true,
      tooltips: {
        mode: 'label'
      },
      elements: {
        line: {
          fill: false
        }
      },
      elements: {
        point: {
          radius: 0
        }
      },
      scales: {
        xAxes: [{
          display: true,
          gridLines: {
            display: false
          },

        }],
        yAxes: [{
            type: 'linear',
            display: true,
            position: 'left',
            id: 'y-axis-1',
            gridLines: {
              display: false
            },
            labels: {
              show: true
            }
          },
          {
            type: 'linear',
            display: true,
            position: 'right',
            id: 'y-axis-2',
            gridLines: {
              display: false
            },
            labels: {
              show: true
            }
   ...