JSFiddle - React, Tailwind, and code Playground

by Giacomini Federico

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var data =  {
    label: "My First dataset",
    fillColor: "rgba(0,204,204,0.5)",
    strokeColor: "rgba(0,204,204,1)",
    pointfillColor: "rgba(220,220,220,1)",
    pointStrokeColor: "#00f",
    data: [65, 59, 90, 81, 56, 55, 40]
};


var drawDataSet = function (dataset) {
    context.lineWidth = 1;
    context.save();
    context.beginPath();
    var angle = (Math.PI) / (dataset.data.length / 2);
    for (var i = 0; i < dataset.data.length; i++) {
        var height = ((canvas.height / 2 * dataset.data[i]) / 100);
        context.lineTo(Math.cos(angle * i) * height, -Math.sin(angle * i) * height);
    }
    var height = ((canvas.height / 2 * dataset.data[0]) / 100);
    context.lineTo(height, 0);
    context.closePath();
    context.strokeStyle = dataset.strokeColor;
    context.stroke();
    context.fillStyle = dataset.fillColor;
    context.fill();
    context.fillStyle = dataset.pointfillColor;
    context.fillStyle = dataset.pointStrokeColor;
    for (var i = 0; i < dataset.data.length; i++) {
        var height = ((canvas.height / 2 * dataset.data[i]) / 100);
        drawPoint(Math.cos(angle * i) * height, -Math.sin(angle * i) * height, 3);
    }
    context.restore();
}

drawPoint = function (x,y,w) {
    context.beginPath();
    context.arc(x, y, w, 0, 2 * Math.PI, true);
    context.stroke();
    context.fill();
    context.closePath();
}

context.translate(this.canvas.width / 2, this.canvas.height / 2);
context.rotate(-Math.PI / 2);
drawDataSet(data);