JSFiddle - React, Tailwind, and code Playground

by srikanth dontaraju

HTML

<div id="chartContainer" style="height: 360px; width: 100%;margin-top:30px;"></div>
<p class="description">An HTML5 Step Area Chart built using CanvasJS.<br/>

CSS

.description {
    margin-top: 50px;
    text-align:left;
    font-family: calibri;
    font-size: 16px;
    color: gray;
}
a:link, a:visited, a:active {
    color: #4F81BC;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
    zoomEnabled:true,
    title: {
        text: "Step Area Chart Demo"
    },
    data: [{
        type: "stepArea",
        dataPoints: randomData(0, 100, 30)
    }]
});

chart.render();


function randomData(startX, startY, length) {
    var dataPoints = [];
    var y = startY;
    
    for (var i = 0; i < length; i += 1) {
        y += (Math.random() * 40 - 20) << 0;
        dataPoints.push({
            x: i + startX,
            //label: "label " + (i - limit / 2),
            y: y
        });
    }
    return dataPoints;
}