JSFiddle - React, Tailwind, and code Playground

by codingcompany

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);
renderMyChart(chartContainer2, dataPoints2);
renderMyChart(chartContainer3, dataPoints3);

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