JSFiddle - React, Tailwind, and code Playground

by Jason Rogers

HTML

<script src="//code.highcharts.com/highcharts.js"></script>
    <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">

    <div id="container" style="height: 150px; width: 400px"></div>
    <div id="slider" style='margin: 10px;'></div>
    <div class="btn-group">
      <button class='btn btn-small btn-primary' id='normal'>Normal</button>
      <button class='btn btn-small btn-primary' id='skewed'>Skewed</button>
      <button class='btn btn-small btn-primary' id='bi-modal'>Bi-Modal</button>
      <button class='btn btn-small btn-primary' id='gamma'>Gamma</button>
      <button class='btn btn-small btn-primary' id='reverse-gamma'>Reverse Gamma</button>
    </div>

JavaScript

$(document).ready(function() {
    var normal = [0, 10, 25, 30, 25, 10, 0];
    var skewed = [0, 5, 25, 35, 30, 10, 0];
    var biModal = [0, 30, 18, 4, 18, 30, 0];
    var gamma = [0, 20, 30, 25, 15, 10, 0];
    var reverseGamma = [0, 10, 15, 25, 30, 20, 0];

    $(function() {
        var values = skewed;
        var slider = $('#slider').
            css('width', '390px').
            css('margin', '10px').
            data('changeColor', function() {
                $('#slider').find('a').css('background', chart.series[currentIndex].color);
            }).
            data('setCharacteristic', function(array, title) {
                values = array;
                currentIndex = 2;
                for (var i = 0; i < values.length; i++) {
                    chart.series[i].data[0].update(values[i]);
                }
                chart.setTitle({
                    text: title
                });
                updateSliderWithCurrentData();
            });
        var currentIndex = 2; // set it to the middle value of the array
        var originalValue = values[currentIndex];
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            legend: {
                enabled: false
            },
            yAxis: {
                gridLineColor: '#fff',
                title: {
                    text: ''
                },
                labels: {
                    enabled: false
                }
            },
            xAxis: {
                categories: ['Buckets'],
                labels: {
                    enabled: false
                }
            },
            title: {
                text: 'Skewed'
            },
            plotOptions: {
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                     ...