JSFiddle - React, Tailwind, and code Playground

by maksim_beliaev

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
<canvas id="canvas"></canvas>

JavaScript

function create_line_chart(ctx, x_axis, version_1, y_axis_1, version_2, y_axis_2) {
	new Chart(ctx, {
		type: 'line',
		data: {
			labels: x_axis,
			type: 'line',
			defaultFontFamily: 'Montserrat',
			datasets: [{
				label: version_1,
				data: y_axis_1,
				backgroundColor: 'transparent',
				borderColor: 'rgba(220,53,69,0.75)',
				borderWidth: 3,
				pointStyle: 'circle',
				pointRadius: 5,
				pointBorderColor: 'transparent',
				pointBackgroundColor: 'rgba(220,53,69,0.75)',
			}, {
				label: version_2,
				data: y_axis_2,
				backgroundColor: 'transparent',
				borderColor: 'rgba(40,167,69,0.75)',
				borderWidth: 3,
				pointStyle: 'circle',
				pointRadius: 5,
				pointBorderColor: 'transparent',
				pointBackgroundColor: 'rgba(40,167,69,0.75)',
			}]
		},
		options: {
			responsive: true,

			tooltips: {
				mode: 'index',
				titleFontSize: 12,
				titleFontColor: '#000',
				bodyFontColor: '#000',
				backgroundColor: '#fff',
				titleFontFamily: 'Montserrat',
				bodyFontFamily: 'Montserrat',
				cornerRadius: 3,
				intersect: false,
			},
			legend: {
				display: false,
				labels: {
					usePointStyle: true,
					fontFamily: 'Montserrat',
				},
			},
			scales: {
				x: {
                    display: true,
                    title: {
                        display: true,
                        text: "Time",
                    },
                },
                y: {
                    display: true,
                    title: {
                        display: true,
                        text: "Value",
                    },
                },
			},
			title: {
				display: false,
				text: 'Normal Legend'
			}
		}
	});
}

var ctx = document.getElementById( "canvas" );
            ctx.height = 150;
            create_line_chart(ctx,  [2010, 2011, 2012, 2013, 2014, 2015, 2016],
                194,
                [0, 30, 10, 120, 50, 63, 10],
                221,
                [0, 50, 40, 80, 40, 79, 120],
            );