JSFiddle - React, Tailwind, and code Playground

by travelandchat

HTML

<canvas id="myCanvas" style="width: 100%; height: 40px;"></canvas>

JavaScript

'use strict';
            var data = {
                "1": 10,
                "2": 14,
                "3": 2,
                "4": 12,
                "5": 20,
                "6": 34,
                "7": 6,
                "8": 22,
                "9": 29,
                "10": 11
            };
            $(function () {
                 $('#myCanvas').histogramBg({
                            padding: 10,
                            gridScale: 5,
                            data: data,
                            //colors: ["#a55ca5", "#67b6c7", "#bccd7a", "#eb9743"]
                            colors: ['#5A9542']});
            });
            
            (function ($) {

    $.fn.histogramBg = function (options) {

        const canvasElement = this[0]; //get element from jQuery object
        const context2D = canvasElement.getContext("2d");

        let maxValue = 0;
        for (let key in options.data) {
            maxValue = Math.max(maxValue, options.data[key]);
        }
        let canvasActualHeight = canvasElement.height - options.padding * 2;
        let canvasActualWidth = canvasElement.width - options.padding * 2;

        let barIndex = 0;
        let numberOfBars = Object.keys(options.data).length;
        let barSize = (canvasActualWidth) / numberOfBars;

        for (let key in options.data) {
            let val = options.data[key];
            let barHeight = Math.round(canvasActualHeight * val / maxValue);

            let upperLeftCornerX = options.padding + barIndex * barSize;
            let upperLeftCornerY = canvasElement.height - barHeight - options.padding;
            context2D.fillStyle = options.colors[barIndex % options.colors.length];
            context2D.fillRect(upperLeftCornerX, upperLeftCornerY, barSize, barHeight);
            barIndex++;
        }

        return this;

    };

}(jQuery));