JSFiddle - React, Tailwind, and code Playground

by katsukino

HTML

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",{
	zoomEnabled:true,
  zoomType:"xy",
  title:{
		text: "Rendering chart against Multiple Y axis"
	},
  axisY:{
  	minimum:0,
    maximum:100,
    lineThickness:1,
  },
	axisY2: [
		{
			title: "Axis Y 1 Title",
			lineColor: "#369EAD",
		}, 
		{
			title: "Axis Y 2 Title",
			lineColor: "#C24642",
		}
	],

	data: [
		{
		type: "line",
    dataPoints :[
    	{ x: 10, y: 90, label:"Apple" },
			{ x: 20, y: 85, label:"Mango" },
			{ x: 30, y: 88, label:"Orange" },
			{ x: 40, y: 95, label:"Banana" },
      { x: 50, y: 82, label:"Banana" },
      { x: 60, y: 78, label:"Banana" },
      { x: 70, y: 99, label:"Banana" },
    ]
    },
    {
		type: "line",
		axisYType: "secondary",
		axisYIndex: 0,
		dataPoints: [
			{ x: 10, y: 6, label:"Apple" },
			{ x: 20, y: 2, label:"Mango" },
			{ x: 30, y: 5, label:"Orange" },
			{ x: 40, y: 3, label:"Banana" },
			{ x: 50, y: 1, label:"Pineapple" },
			{ x: 60, y: 5, label:"Pears" },
			{ x: 70, y: 5, label:"Grapes" },
			{ x: 80, y: 2, label:"Lychee" },
			{ x: 90, y: 2, label:"Jackfruit" }
		]
		},
		{
		type: "line",
		axisYType: "secondary",
		axisYIndex: 1,
		dataPoints: [
			{ x: 10, y: 100, label:"Apple" },
			{ x: 20, y: 70, label:"Mango" },
			{ x: 30, y: 102, label:"Orange" },
			{ x: 40, y: 80, label:"Banana" },
			{ x: 50, y: 48, label:"Pineapple" },
			{ x: 60, y: 95, label:"Pears" },
			{ x: 70, y: 102, label:"Grapes" },
			{ x: 80, y: 98, label:"Lychee" },
			{ x: 90, y: 156, label:"Jackfruit" }
		]
		},
	]
});

chart.render();
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
</body>
</html>