JSFiddle - React, Tailwind, and code Playground

by cincodenada

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<select>
    <option value="default">Original</option>
    <option value="adj">Adjusted Columns</option>
    <option value="adj_2">Adjusted Columns (Less hacky)</option>
    <option value="sidebyside_2">Side-by-side Columns (tweaked)</option>
    <option value="sidebyside">Side-by-side Columns</option>
    <option value="area">Area Chart</option>
</select>
<div id="index_charts" style="height: 250px; height: 470px"></div>

JavaScript

var chartdata = {
    "ranks": {
        "categories": ["02-02", "02-09", "02-16", "02-23", "Recent"],
        "top10": [7, 6, 8, 7, 7, 6, 8, 7, 7],
        "top3": [4, 3, 5, 5, 4, 3, 5, 5, 4],
        "top1": [3, 3, 4, 4, 3, 3, 4, 4, 3],
        "avg": [5.3, 6.95, 5.34, 5.85,5.3, 6.95, 5.34, 5.85, {
            "dataLabels": {
                "enabled": true
            },
            "y": 5.11
        }]
    }
};

$(document).ready(function () {
    $('select').change(function () {
        switch ($(this).val()) {
            case 'default':
                changeChart({});
                break;
            case 'sidebyside':
                changeChart({
                    plotOptions: {
                        column: {
                            stacking: null,
                        },
                        series: {
                            dataLabels: {
                                color: 'black'
                            }
                        }
                    }
                })
                break;
            case 'adj_2':
                newdata = {};
                changes = {
                    plotOptions: {
                        column: {
                            stacking: null,
                            grouping: false,
                            groupPadding: 0,
                        },
                        series: {
                            dataLabels: {
                                color: 'black'
                            }
                        }
                    },
                    series: [],
                };
                for (i = 0; i < 3; i++) {
                    changes.series[i] = $.extend({}, chartsettings.series[i]);
                }
                for (i in vals) {
                    val = vals[i];
                    newdata[i] = chartdata.ranks['top' + val].slice(0);
                }
                for (i = 0; i < vals.length; i++) {
                    for (z in...