JSFiddle - React, Tailwind, and code Playground

by Akihiko Kusanagi

HTML

<script src="https://www.chartjs.org/dist/master/Chart.min.js"></script>
<div style="background-color: #ccc; overflow:hidden;">
<div style="width: 45%; background-color: #fff; margin: 5px; float: left;"><canvas id="chart1"></canvas></div>
<div style="width: 45%; background-color: #fff; margin: 5px; float: left;"><canvas id="chart2"></canvas></div>
<div style="width: 45%; background-color: #fff; margin: 5px; float: left;"><canvas id="chart3"></canvas></div>
<div style="width: 45%; background-color: #fff; margin: 5px; float: left;"><canvas id="chart4"></canvas></div>
<div style="width: 45%; background-color: #fff; margin: 5px; float: left;"><canvas id="chart5"></canvas></div>
</div>

JavaScript

new Chart(document.getElementById('chart1').getContext('2d'), {
  type: 'line',
  data: {
    labels: [['Label 1','Label 1'],['Label 2','Label 2'],['Label 3','Label 3'],['Label 4','Label 4'],['Label 5','Label 5']],
    datasets: [{
      data: [0, 2, 1]
    }]
  },
  options: {
    aspectRatio: 1.2,
    legend: {
      display: false
    },
    scales: {
     xAxes: [{
        position: 'bottom',
        scaleLabel: {
          display: true,
          labelString: 'X Axis'
        }
     }],
     yAxes: [{
        position: 'left',
        scaleLabel: {
          display: true,
          labelString: 'Y Axis'
        }
     }]
   }
  }
});
new Chart(document.getElementById('chart2').getContext('2d'), {
  type: 'line',
  data: {
    labels: [['Label 1','Label 1'],['Label 2','Label 2'],['Label 3','Label 3'],['Label 4','Label 4'],['Label 5','Label 5']],
    datasets: [{
      data: [0, 2, 1]
    }]
  },
  options: {
    aspectRatio: 1.2,
    legend: {
      display: false
    },
    scales: {
     xAxes: [{
        position: 'top',
        scaleLabel: {
          display: true,
          labelString: 'X Axis'
        }
     }],
     yAxes: [{
        position: 'right',
        scaleLabel: {
          display: true,
          labelString: 'Y Axis'
        }
     }]
   }
  }
});
new Chart(document.getElementById('chart3').getContext('2d'), {
  type: 'radar',
  data: {
    labels: [['Label 1','Label 1'],['Label 2','Label 2'],['Label 3','Label 3'],['Label 4','Label 4']],
    datasets: [{
      data: [1, 1, 1, 1]
    }]
  },
  options: {
    aspectRatio: 1.2,
    legend: {
      display: false
    },
    scale: {
      ticks: {
        beginAtZero: true
      }
    }
  }
});
new Chart(document.getElementById('chart4').getContext('2d'), {
  type: 'radar',
  data: {
    labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug'],
    datasets: [{
      data: [1, 1, 1, 1, 1, 1, 1, 1],
    }]
  },
  options: {
    aspectRatio: 1.2,
    title: {
      display: true,
     ...