JSFiddle - React, Tailwind, and code Playground

by canvasjs

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer1" style="width:100%; height:300px"></div>
<div id="chartContainer2" style="width:100%; height:300px"></div>
<div id="chartContainer3" style="width:100%; height:300px"></div>

JavaScript

var dataPoints1 = [
    { x: 10, y: 10 },{ x: 20, y: 15 },{ x: 30, y: 25 },{ x: 40, y: 30 },{ x: 50, y: 28 } ];
var dataPoints2 = [
    { x: 10, y: 30 },{ x: 20, y: 35 },{ x: 30, y: 45 },{ x: 40, y: 20 },{ x: 50, y: 8 } ];
var dataPoints3 = [
    { x: 10, y: 3 },{ x: 20, y: 12 },{ x: 30, y: 14 },{ x: 40, y: 2 },{ x: 50, y: 28 } ];
	
renderMyChart(chartContainer1, dataPoints1, "line");
renderMyChart(chartContainer2, dataPoints2, "column");
renderMyChart(chartContainer3, dataPoints3, "column");

function renderMyChart(chartContainer1, myData, type) {
    var chart = new CanvasJS.Chart(chartContainer1, {
        data: [
            {
                type: type,
                dataPoints: myData
            }
        ]
    });
    chart.render();
}