JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

<script src="http://lavancier.com/brockCharts/API/dist.js"></script>
<canvas id='myCanvas' style='background-color: #FEFEFE'></canvas>

CSS

canvas {
    position: absolute;
    top: -5px;
    left: -5px;
}

JavaScript

function drawStockChart(object) {
    function findMinMax(array) {
        var total_min = array[0][0];
        var total_max = array[0][0];
        var max_length = array[0].length;
        for (var x = 0; x < array.length; x++) {
            for (var y = 0; y < array[x].length; y++) {
                if (total_min > array[x][y]) {
                    total_min = array[x][y];
                }
                if (total_max < array[x][y]) {
                    total_max = array[x][y];
                }
            }
            if (max_length < array[x].length) {
                max_length = array[x].length;
            }
        }
        var total_range = total_max - total_min;
        return [total_min, total_max, total_range, max_length];
    }

    function renderChart(array) {
        function initializeCanvas() {
            canvas = document.getElementById(object.settings.canvasName);
            context = canvas.getContext('2d');
            canvas.width = object.settings.dimensions.width;
            canvas.height = object.settings.dimensions.height;
            // works with var
        }

        function renderLine() {
            var colors = object.settings.line.lineColors;
            for (var x = 0; x < array.length; x++) {
                context.beginPath();
                if (object.settings.areaChart.areaEnabled === true) {
                    context.lineTo(-100, (canvas.height) - ((0 - stock_specs[0]) / stock_specs[2]) * canvas.height * (1 - object.settings.padding.paddingTop), canvas.height);
                } // this is only if the area chart is enabled
                for (y = 0; y < array[x].length; y++) {
                    var arrayShift = stock_specs[3] - array[x].length; // to align all charts against the right side. possibly have option to disable?
                    context.lineTo(((y + arrayShift) / (stock_specs[
                    3] - 1)) * canvas.width, (canvas.height) - ((array[x][y] - stock_specs[0]) / stock_specs[2]) *...