JSFiddle - React, Tailwind, and code Playground

by abhiklpm

HTML

<canvas id="myCanvas2" style="background-color:rgba(50,50,50,0.05)"></canvas>
<p class='mouseposition' style='font-family: Helvetica, Arial; font-size: 8pt'></p>

<script src="API/basicHistogram.js"></script>
<script src="http://www.lavancier.com/marketanalysis/scripts/graphingAPI/basicLineChart.js"></script>
<script src="http://www.lavancier.com/marketanalysis/scripts/graphingAPI/clearGraph.js"></script>
<script src="API/brockDist.js"></script>

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, width, height, spacing, canvasName) {
    arrMinMax(array);
    var canvas = document.getElementById(canvasName);
    canvas.width = width;
    canvas.height = height;
    var arrayFixed = [];
    for (x = 0; x < array.length; x++) {
        arrayFixed[x] = (height / arrMax) * array[x] * paddingTop;
    }
    
    var context = canvas.getContext('2d');

    context.beginPath();
    for (x = 0; x < arrayFixed.length; x++) {
        bottomPos = height - arrayFixed[x];
        leftPos = (width / arrayFixed.length) * .995;
        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 < width && relativeY > 0 && relativeY < height) {
                $(".mouseposition").text(Math.floor(event.pageX / (width / array.length)) + ", " + array[Math.floor(event.pageX / (width / array.length))]);
            } else {
                $(".mouseposition").text(" ");
            }
            $(".mouseposition").css({
                position: 'absolute',
                left: (event.pageX + 10),
                top: (event.pageY - 30)
            });
            $("#" + canvasName).css({
                width: width,
                height: height
            });
        });
        context.font = titleSize + ' ' + titleFamily;
        context.fillStyle = titleColor;
        context.fillText(title, width * titleOffset, 25);
        context.font = axisSize + ' ' + titleFamily;
       ...