JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

<script src="http://lavancier.com/brockCharts/API/HistogramPro.js"></script>
<canvas id="myHistogram" style='background-color: rgba(255,255,255,0.90)'></canvas>

JavaScript

tests = [100, 80, 36, 64, 72, 84, 64, 72, 72, 40, 48, 76, 56, 40, 48, 76, 72, 72, 52, 48, 56, 0, 96, 48, 76, 60, 92, 60, 28, 36, 44, 28, 60, 48, 0, 0, 0, 44, 80, 44, 60, 40, 56, 68, 72, 60, 60, 36, 44, 0, 0, 64, 81, 44, 88, 84, 92, 92, 52, 72, 56, 36, 84, 84, 72, 48, 64, 16, 88, 76, 76, 100, 64, 32, 32, 76, 80, 96, 44, 0, 72, 56, 24, 16, 72, 16, 36, 32, 60, 80, 0, 28, 36, 44, 80, 0, 88, 72, 64, 56, 40, 88, 52, 80, 36, 44, 36, 48, 64, 60, 24, 60, 76, 60, 40, 68, 48, 84, 48, 60, 52, 36, 24, 92, 24, 64, 48, 24, 80, 44, 52, 40, 52, 76, 56, 48, 88, 28, 40, 48, 52, 52, 40, 48, 80, 76, 44, 44, 72, 80, 44, 20, 52, 0, 44, 60, 68, 84, 44, 60, 52, 44, 44, 56, 36, 76, 32, 88, 88, 72, 48, 96, 0, 21, 44, 40, 52, 32, 56, 84, 88, 88, 92, 24, 84, 80, 44, 92, 36, 64, 28, 72, 72, 68, 44, 68, 68, 28, 21, 48, 92, 0, 44, 88, 0, 52, 36, 28, 48, 40, 68, 56, 56, 76, 60, 0, 56, 44, 40, 0, 0, 52, 52, 44, 44, 0, 32, 88, 44, 44, 32, 68, 100, 40, 60, 56, 72, 64, 56, 100, 32, 72, 44, 0, 40, 80, 48, 68, 40, 24, 72, 84, 44, 0, 60, 44, 80, 92, 64, 68, 52, 44, 80, 48, 52, 36, 76, 72, 68, 60, 64, 24, 60, 40, 72, 44, 68, 60, 60, 72, 32, 64, 64, 60, 52, 64, 80, 52, 40, 60, 60, 64, 68, 44, 40, 37, 64, 84, 72, 44, 44, 72, 68, 52, 52, 72, 44, 40, 40, 80, 72, 76, 64, 80, 88, 28, 100, 44, 44, 76, 84, 48, 96, 64, 56, 40, 0, 72, 48, 64, 72, 28, 32, 40, 68, 84, 40, 52, 60, 0, 64, 8, 76, 64, 92, 84, 28, 36, 32, 56, 76, 56, 76, 36, 44, 0, 0, 68, 52, 0, 100, 76, 60, 32, 96, 52, 76, 96, 76, 48, 40, 76, 32, 48, 68, 56, 48, 48, 20, 48];

settings = {
    array: tests,
    width: window.innerWidth,
    height: window.innerWidth / 2,
    paddingBottom: 0.10,
    paddingTop: 0.12,
    binningInterval: 10,
    binSpacing: 0.9,
    lineProperties: {
        fillColor: "#6D7B8E",
    },
    textProperties: {
        titleProperties: {
            title: "ECN 212 Test 1",
            fontSize: "12pt",
            fontFamily: "Helvetica",
            fontColor: "Black",
            titlePadding: 0.05
        },
       ...