JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

<script src="http://lavancier.com/marketanalysis/scripts/clearGraph.js"></script>
<canvas id="myCanvas" style="background-color:rgba(30,30,30,0.1)"></canvas>

JavaScript

function LineChart(array, canvas, width, height, color, offset, fontColor) {
    var canvas = document.getElementById(canvas);
    var context = canvas.getContext('2d');
    canvas.width = width;
    canvas.height = height;
    context.clearRect(0, 0, width, height);
    context.beginPath();
    for (x = 0; x < array.length; x++) {
        context.lineTo(offset + (((1 - offset) * (x + 1)) / array.length) * width, (height - array[x]));
    }
    context.lineWidth = 1;
    context.strokeStyle = color;
    context.fillStyle = color;
    context.fill();
    context.stroke();
    context.font = '8pt Helvetica';
    context.fillStyle = fontColor;
    context.fillText(Math.round(CumReturnMax * 100) / 100, 0, 10);
    context.fillText(Math.round(CumReturnMin * 100) / 100, 0, height - 10);
}

arr = [0.01, 0.021, -0.016, 0.01, -0.006, -0.014, -0.012, -0.02, 0.021, -0.003, 0.005, 0.014, 0.005, 0.001, -0.013, 0.009, -0.018, 0.011, -0.011, 0.003, 0.01, 0, 0.008, -0.001, -0.009, 0.01, 0.005, -0.018, -0.003, 0.003, -0.003, -0.011, 0.021, -0.019, -0.006, -0.012, -0.008, -0.001, -0.015, 0, -0.004, 0, 0.009, -0.018, 0.002, -0.013, -0.007, -0.012, -0.017, 0.016, -0.007, -0.002, -0.011, 0.005, 0.012, -0.017, -0.012, -0.015, 0.004, -0.009, 0, 0.013, 0, -0.01, -0.001, -0.004, 0.009, -0.005, -0.005, 0.015, -0.019, 0.01, 0.007, -0.009, -0.022, -0.004, 0.007, 0, 0.015, 0.003, -0.025, -0.01, 0, 0.002, 0.001, 0.009, 0.005, -0.007, 0.009, 0.002, -0.013, 0.005, 0.004, -0.012, 0.002, 0.003, -0.001, 0.019, -0.015, -0.018, 0.017, 0.003, 0.01, 0.005, 0.006, 0.002, 0.006, 0.024, -0.003, 0.005, -0.007, 0.003, -0.02, 0.007, 0.021, -0.005, -0.002, 0.008, -0.005, 0, -0.004, 0.004, -0.002, -0.011, 0.013, -0.003, 0.006, 0.007, 0.006, -0.007, -0.008, 0.002, -0.007, 0.008, 0.002, 0.008, 0.003, 0.01, -0.008, -0.001, 0.013, -0.012, -0.001, 0.007, 0.011, -0.011, 0.004, 0.009, -0.001, -0.009, 0.014, -0.011, 0.003, 0.004, 0.001, 0.008, -0.007, -0.014, 0.006, 0.007, -0.015, 0.01, -0.011, 0.003, 0.012, 0,...