JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

<script src="http://lavancier.com/brockCharts/API/basicLineChart_Compressed.js"></script>
<canvas id="myCanvas" style='background-color: rgba(20,20,20,0.01); cursor: crosshair'></canvas>
<p class='mouseposition' style='font-family: Helvetica, Arial; font-size: 8pt'></p>

JavaScript

array = [0,1,1,2,3,5,8,12,16,19,20,19,16,12,8,5,3,2,1,1,0];
function drawHistogram(array, fillColor, title, titleColor, titleSize, titleFamily, titleOffset, axisSize, paddingTop, paddingBottom, widthVar, heightVar, spacing, canvasName) {
    var canvas = document.getElementById(canvasName);
    var context = canvas.getContext('2d');
    arrMinMax(array);
    canvas.width = widthVar;
    canvas.height = heightVar;
    var arrayFixed = [];
    for (x = 0; x < array.length; x++) {
        arrayFixed[x] = (heightVar / arrMax) * array[x] * paddingTop;
    }

    context.beginPath();
    for (x = 0; x < arrayFixed.length; x++) {
        bottomPos = heightVar - arrayFixed[x];
        leftPos = (widthVar / arrayFixed.length) ;
        context.rect(leftPos * x, bottomPos - paddingBottom, leftPos - spacing, arrayFixed[x]);
    }
    context.fillStyle = fillColor;
    context.fill();
    $(document).ready(function () {
        $(document).mousemove(function (event) {
            var x = $("#" + canvasName).offset();
            var relativeX = Math.round(event.pageX - x.left);
            var relativeY = Math.round(event.pageY - x.top);
            if (relativeX > 0 && relativeX < widthVar && relativeY > 0 && relativeY < heightVar) {
                $(".mouseposition").text(Math.floor(event.pageX / (widthVar / array.length)) + ", " + array[Math.floor(event.pageX / (widthVar / array.length))]);
            } else {
                $(".mouseposition").text(" ");
            }
            $(".mouseposition").css({
                position: 'absolute',
                left: (event.pageX + 10),
                top: (event.pageY - 30)
            });
        });
        context.font = titleSize + ' ' + titleFamily;
        context.fillStyle = titleColor;
        context.fillText(title, widthVar * titleOffset, 25);
        context.font = axisSize + ' ' + titleFamily;
        context.fillText(arrMax, 10, (1 - paddingTop) * heightVar);
        context.fillText(arrMin, 10, -...