JSFiddle - React, Tailwind, and code Playground

by sbochan

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="CostsChart" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<table id="CostsByCareAndRegion" style="display: none;">
    <thead>
        <tr>
            <th>Metro Region</th>
            <th>0Skilled Nursing Facility</th>
            <th>1Assisted Living Facility</th>
            <th>2Home Health Care</th>
        </tr>
    </thead>
    <tr>
        <th>000State Average</th>
        <td>62050.0000</td>
        <td>34785.0000</td>
        <td>36562.0000</td>
    </tr>
    <tr>
        <th>010Anniston-Oxford</th>
        <td>67799.0000</td>
        <td>51507.0000</td>
        <td>34320.0000</td>
    </tr>
    <tr>
        <th>020Auburn-Opelika</th>
        <td>60123.0000</td>
        <td>40800.0000</td>
        <td>37134.0000</td>
    </tr>
    <tr>
        <th>030Birmingham-Hoover</th>
        <td>61776.0000</td>
        <td>31926.0000</td>
        <td>36608.0000</td>
    </tr>
    <tr>
        <th>040Decatur</th>
        <td>66065.0000</td>
        <td>38856.0000</td>
        <td>33176.0000</td>
    </tr>
    <tr>
        <th>050Dothan</th>
        <td>67160.0000</td>
        <td>28512.0000</td>
        <td>31460.0000</td>
    </tr>
    <tr>
        <th>060Florence-Muscle Shoals</th>
        <td>63875.0000</td>
        <td>32820.0000</td>
        <td>32032.0000</td>
    </tr>
    <tr>
        <th>070Huntsville</th>
        <td>70810.0000</td>
        <td>44922.0000</td>
        <td>36608.0000</td>
    </tr>
    <tr>
        <th>080Mobile</th>
        <td>60225.0000</td>
        <td>36000.0000</td>
        <td>34183.0000</td>
    </tr>
    <tr>
        <th>090Montgomery</th>
        <td>66795.0000</td>
        <td>37500.0000</td>
        <td>36608.0000</td>
    </tr>
    <tr>
        <th>100Tuscaloosa</th>
        <td>56575.0000</td>
        <td>37140.0000</td>
        <td>36608.0000</td>
    </tr>
   ...

JavaScript

$(function () {
    var metroChart;

    $(document).ready(function () {
        metroChart = Highcharts.visualize(document.getElementById("CostsByCareAndRegion"), optionsCost);
    });

    var colors = Highcharts.getOptions().colors;
    $.each(colors, function (i, color) {
        colors[i] = {
            linearGradient: {
                x1: 0,
                y1: 0,
                x2: 1,
                y2: 0
            },
            stops: [
                [0, color],
                [0.1, 'white'],
                [1, color]
            ]
        };
    });

    var optionsCost = {
        chart: {
            renderTo: 'CostsChart',
            defaultSeriesType: 'column'
        },
        title: {
            text: ''
        },
        xAxis: {
            labels: {
                align: 'left',
                rotation: 90,
                formatter: function () {
                    return this.value.substring(3);
                }
            }

        },
        yAxis: {
            title: {
                text: 'Annual Cost'
            }

        },

        plotOptions: {
            series: {
                cursor: 'pointer'
            }
        },

        legend: {
            layout: 'horizontal',
            labelFormatter: function () {
                return this.name.substring(1)
            }
        },
        tooltip: {
            formatter: function () {
                return this.x.substring(3) + '<br/>' + this.series.name.substring(1) + ': ' + formatAsMoney(this.y);
            }
        }
    };

    Highcharts.visualize = function (table, options) {

        // the categories
        options.xAxis.categories = [];
        $('tbody th', table).each(function (i) {
            options.xAxis.categories.push(this.innerHTML);
        });

        // the data series
        options.series = [];
        $('tr', table).each(function (i) {
            var tr = this;
            $('th, td', tr).each(function (j) {
              ...