JSFiddle - React, Tailwind, and code Playground

by Narendra Lakhtariya

HTML

<script src="http://www.chartjs.org/assets/Chart.js"></script>
<body>
    <h3>Working Chart</h3>
    <canvas id="canvas" height="450" width="600"></canvas>
</body>

JavaScript

var lineChartData = {
        labels : ["January","February","March","April","May","June","July"],
        "datasets" : [
            {
                "label": "My First dataset",
                "fillColor" : "rgba(220,220,220,0.2)",
                "strokeColor" : "rgba(220,220,220,1)",
                pointColor : "rgba(220,220,220,1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(220,220,220,1)",
                data : [65, 59, 80, 81, 56, 55, 40]
            },
            {
                label: "My Second dataset",
                fillColor : "rgba(151,187,205,0.2)",
                strokeColor : "rgba(151,187,205,1)",
                pointColor : "rgba(151,187,205,1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(151,187,205,1)",
                data :                  [28, 48, 40, 19, 86, 27, 90]
            }
        ]
    };

var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);