JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="c"></canvas>
JavaScript
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
init();
drawGrid();
drawGraph(values);
function drawGraph(values) {
var len = values.length;
var startX = hPadding;
var startY = canvasHeight - vPadding;
var barWidth = Math.floor((canvasWidth - hPadding * 2 - (len - 1) * spacing) / len);
for (var i = 0; i < len; i++) {
var barHeight = Math.floor(values[i] * barHeightFactor);
var x = startX + (barWidth + spacing) * i;
var y = startY - barHeight;
ctx.fillStyle = colors[i];
ctx.fillRect(x, y, barWidth, barHeight);
ctx.textAlign = "center";
ctx.fillStyle = "#000000";
ctx.fillText(Math.floor(values[i]), Math.floor(x + barWidth / 2), y - 10);
}
}
function drawGrid() {
ctx.strokeRect(1, 1, canvasWidth - 2, canvasHeight - 2);
var x1, y1, x2, y2;
for (var i = 0; i < 5; i++) {
x1 = hPadding - 5;
y = canvasHeight - vPadding - barHeightFactor * 20 * i;
//y = 300 - 50 - 3.6 * 20 * i;
x2 = canvasWidth - hPadding + 5;
ctx.moveTo(x1, y);
ctx.lineTo(x2, y);
ctx.stroke();
ctx.textBaseline = "middle";
ctx.textAlign = "right";
ctx.fillText(Math.round(barHeightFactor * 10 * i), x1 - 5, y);
}
ctx.strokeRect(hPadding, vPadding, canvasWidth - hPadding * 2, canvasHeight - vPadding * 2);
}
function generateRandomValues(num) {
var vals = [];
for (var i = 0; i < num; i++) {
vals[i] = Math.random() * 100;
}
return vals;
}
function init() {
colors = ["#16193B", "#35478C", "#4E7AC7", "#7FB2F0", "#ADD5F7"];
// blue sky https://kuler.adobe.com/Blue-Sky-color-theme-1084168
spacing = 5;
hPadding = 40;
vPadding = 50;
labelPadding = 20;
canvasHeight = canvas.height = 300;
canvasWidth = canvas.width = 300;
//values = generateRandomValues(5);
values = [5, 10, 15, 20, 25];
barHeightFactor = (canvasHeight - vPadding *...