JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<div class="container">
						<div>
							<h2>CHART 1</h2>
							<canvas id="myChart1" width="600" height="250"></canvas>
						</div>
						<div>
							<h2>CHART 2</h2>
							<canvas id="myChart2" width="600" height="250"></canvas>
						</div>

CSS

canvas {
				-moz-user-select: none;
				-webkit-user-select: none;
				-ms-user-select: none;
		}
 @media screen and (min-width: 800px){
   .container div:first-child{
  max-width: 50%;
  float:left;
}
.container div:nth-child(2){
  max-width: 50%;
  float:left;
}
 }

JavaScript

var timeFormat = 'DD/MM/YY';

            var myChart1 = new Chart(document.getElementById("myChart1"), {
                type: 'line',
                data: {
                    labels: ["01/01/15", "01/01/16", "01/01/17"],
                    datasets: [{
					label: "Country 1",
					borderColor: 'rgba(1, 1, 86, 1)',
					backgroundColor: 'rgba(1, 1, 86, 1)',
					data: [1253493, 1265603, 1275291],
          fill: false,
				}, {
					label: "Country 2",
					borderColor: 'rgba(145, 1, 1, 1)',
					backgroundColor: 'rgba(145, 1, 1, 1)',
					data: [948230, 958921, 966063],
					fill: false,
				}, {
					label: "Country 3",
					borderColor: 'rgba(200, 64, 22, 1)',
					backgroundColor: 'rgba(200, 64, 22, 1)',
					data: [452866, 479893, 498718],
					fill: false,
				}, {
					label: "Country 4",
					borderColor: 'rgba(2, 20, 129, 1)',
					backgroundColor: 'rgba(2, 20, 129, 1)',
					data: [405747, 418095, 424950],
					fill: false,
				}, {
					label: "Country 5",
					borderColor: 'rgba(213, 19, 23, 1)',
					backgroundColor: 'rgba(213, 19, 23, 1)',
					data: [305743, 321083, 328786],
					fill: false,
				}, {
					label: "Country 6",
					borderColor: 'rgba(86, 1, 1, 1)',
					backgroundColor: 'rgba(86, 1, 1, 1)',
					data: [96420, 96609, 96722],
					fill: false,
				}]
                },
                options: {
					responsive:true,
					title: {
						display:true,
						text:"Chart 1",
						fontStyle: "normal",
						fontColor: "#333"
					},
					hover: {
						mode: 'index'
					},
                    scales: {
                        yAxes: [
                            {
                            ticks: {
								min: 40000,
								max: 1300000,
								userCallback: function(value, index, values) {
								// Convert the number to a false string and splite the string every 3 charaters from the end
								value = value.toString();
								value = value.split(/(?=(?:...)*$)/);

								// Convert the array to a false string and format...