JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

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

JavaScript

numReturns = 5000;
array = [];

var myVar = setInterval(function () {
    settings = {
        array: array,
        width: window.innerWidth,
        height: window.innerWidth * 0.7,
        paddingBottom: 0.1,
        paddingTop: 0.2,
        binningInterval: 0.0005,
        binSpacing: 0.9,
        lineProperties: {
            lineWidth: 1,
            fillColor: "#6D7B8E",
            areaChart: false,
            lineColor: "#6D7B8E"
        },
        textProperties: {
            titleProperties: {
                title: "Simulated Stock Returns",
                fontSize: "12pt",
                fontFamily: "Helvetica",
                fontColor: "Black",
                titlePadding: 0.08
            },
            axisProperties: {
                axis: true,
                axisSize: "8pt",
                axisColor: "Gray",
                axisPadding: 0.01
            }
        },
        gridLines: false,
        logScale: false,
        mousePosition: false,
        canvasName: "myHistogram"
    };
    for (x = 0; x < numReturns; x++) {
        GenerateRandomDist(1.07, 0.0004);
        array[x] = Math.round((1 - DailyReturn) * (1 / settings.binningInterval)) * settings.binningInterval;
    }
    drawHistogram();
}, 50);