JSFiddle - React, Tailwind, and code Playground

by sujay

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<script>
     data = {

        "financed_data": [

            [new Date("2011-10-12").getTime(), 165.6446559001871],

            [new Date("2011-10-13").getTime(), 165.6264334296266],

            [new Date("2011-10-14").getTime(), 165.6264334296266],

            [new Date("2011-10-17").getTime(), 165.6264334296266],

            [new Date("2011-10-18").getTime(), 165.6264334296266],

            [new Date("2011-10-19").getTime(), 165.62643342962656],

            [new Date("2011-10-20").getTime(), 165.62643342962662],

            [new Date("2011-10-21").getTime(), 165.6264334296266],

            [new Date("2011-10-24").getTime(), 165.62643342962662],

            [new Date("2011-10-25").getTime(), 165.62643342962656],

            [new Date("2011-10-26").getTime(), 165.62643342962662],

            [new Date("2011-10-27").getTime(), 165.6264334296266],

            [new Date("2011-10-28").getTime(), 165.6264334296266],

            [new Date("2011-10-31").getTime(), 165.62643342962653],

            [new Date("2011-11-01").getTime(), 165.6264334296266],

            [new Date("2011-11-02").getTime(), 165.62643342962653],

            [new Date("2011-11-03").getTime(), 165.6264334296266],

            [new Date("2011-11-04").getTime(), 165.6264334296266],

            [new Date("2011-11-07").getTime(), 165.6264334296266],

            [new Date("2011-11-08").getTime(), 165.62643342962653],

            [new Date("2011-11-09").getTime(), 165.6264334296266],

            [new Date("2011-11-10").getTime(), 165.6264334296266],

            [new Date("2011-11-11").getTime(), 165.6264334296266],

            [new Date("2011-11-14").getTime(), 165.6264334296266],

            [new Date("2011-11-15").getTime(), 165.6264334296266],

            [new Date("2011-11-16").getTime(), 165.6264334296266],

            [new...

JavaScript

$(function() {
    var chart;
   
    var series = [];
    var financed_data = data.financed_data;
    var financed_sc_data = data.financed_sc_data;
    var unfinanced_data = data.unfinanced_data;

    // populating the chart related arrays using the above data

    if (unfinanced_data) {
        series.push({
            name: "Unfinanced",
            data: unfinanced_data
        });

    }

    if (financed_sc_data) {
        series.push({
            name: "Financed/SC",
            data: financed_sc_data
        });


    }
    
    if (financed_data) {
        series.push({
            name: "Financed",
            data: financed_data
        });

    }




    $(document).ready(function() {

        chart = new Highcharts.Chart({

            chart: {

                renderTo: 'container',

                type: 'area'

            },

            title: {

                text: null

            },

            xAxis: {
                type: 'datetime',
                labels: {
                    formatter: function(){
                        return Highcharts.dateFormat('%m/%d/%Y',this.value);                            
                    }
                },
                title: {

                    enabled: false

                }

            },

            yAxis: {

                title: {

                    text: null

                },
                labels: {
                    formatter: function(){
                        return '$' + this.value + 'B';
                    }
                }

            },

            tooltip: {

                enabled: false

            },

            plotOptions: {

                area: {

                    stacking: 'number',

                    marker: {
                        enabled: false
                    }

                }

            },

            series: series

        });

    });


});