JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="circle" width = "100px" height= "100px"></canvas>
JavaScript
function Piechart(options) {
var canvas = document.getElementById(options.canvas);
canvas.title = "";
var width = canvas.width;
var height = canvas.height;
var context = canvas.getContext("2d");
function drawPieSlice(centerX, centerY, radius, startAngle, endAngle, color) {
context.fillStyle = color;
context.strokeStyle = color;
console.log(color);
context.beginPath();
context.moveTo(centerX, centerY);
context.arc(centerX, centerY, radius, startAngle, endAngle);
context.stroke();
context.fill();
context.closePath();
//
}
var total_value = 0;
var color_index = 0;
for (var categ in options.data) {
var val = options.data[categ];
total_value += val['value'];
}
var start_angle = 0;
for (categ in options.data) {
val = options.data[categ];
canvas.title += val['label'] + '\r\n';
var slice_angle = 2 * Math.PI * val['value'] / total_value;
drawPieSlice(
width / 2,
height / 2,
Math.min(width / 2, height / 2),
start_angle,
start_angle + slice_angle,
val['color']
);
start_angle += slice_angle;
color_index++;
}
if (options.doughnutHoleSize) {
drawPieSlice(
width / 2,
height / 2,
options.doughnutHoleSize * Math.min(width / 2, height / 2),
0,
2 * Math.PI,
"#CCC"
...