JSFiddle - React, Tailwind, and code Playground

by camarrone

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
   <div style="width: 900px; height: 500px">
        <canvas id="chart1"></canvas>
    </div>

JavaScript

let chart1 = new Chart(document.getElementById("chart1"), {
			type: 'line',
			data: {
				labels: ["2018-04-21T16:00:00", "2018-04-21T18:00:00", "2018-04-21T20:00:00", "2018-04-23T12:00:00", "2018-04-23T13:00:00"],
				datasets: [
                    {
                        type:  'line',
                        fill: false,
                        label: 'Label_1',
                        borderColor:"hsl(181.40751321285697,45.9256727159548%,27.54659126333186%)",
                        data: [7,3,11,2,3]
                    },
                    {
                        type:  'line',
                        fill: false,
                        label: 'Label_2',
                        borderColor:"hsl(181.91996173600447,39.046658571489985%,65.63412032509264%)",
                        data: [0, 1,6,1,2]
                    },
                ],
			},
			options: {
				animation: {
					duration: 0
				},
				title: {
					display: false,
					text: ''
				},
				legend: {
					labels: {
						useLineStyle: true
                    },
                    position: 'bottom',
                },
			}
        });