JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

<script src="http://lavancier.com/distribution/finance.js"></script>
<canvas id='myCanvas'></canvas>

CSS

#myCanvas {
    border-bottom: 2px solid #555;
    border-top: 2px solid #555;
}

JavaScript

var array = new get_skewed_distribution(1, 0, -0.5, 100).distribution;
var scatter_array = [];

for (var x = 1; x < array.length; x++) {
    scatter_array[x - 1] = [array[x], array[x - 1]];
}

line_object = {
    canvas_name: 'myCanvas',
    chart_type: 'line',
    settings: {
        canvas_width: 600,
        canvas_height: 280,
        dot_radius: 2,
        dot_thickness: 0.2,
        dot_fill_bool: [false, false, false],
        lineAreaEnabled: true,
        axis_padding: 0.02,
        font_settings: {
            size: '10pt',
            weight: '300',
            family: 'Helvetica Neue'
        }
    },
    canvas_array: [array],
    canvas_array_colors: ['rgba(0,0,0,0.7)', 'red', 'blue']
};

draw_chart(line_object);