JSFiddle - React, Tailwind, and code Playground

by nagoba

HTML

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

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<button id="plot">Plot</button>
<button id="reverse">Reverse</button>

JavaScript

// the button handler

$(function () {
    var chart;
        
    
function addGold(z)
{
    chart.addSeries({
        name: 'Gold', 
        data: [20, 20], 
        pointWidth: 30,
        color:'#D4AF37',
        zIndex:z
            });
    
}
    
function addSilver(z){
           chart.addSeries({
                name: 'Silver',
                data: [10, 10], 
                pointWidth: 20,
                color:'#C0C0C0',
               zIndex:z
            });
    
}
 
function addBronze(z){   
            chart.addSeries({
                name: 'Bronze',
                data: [5, 5], 
                pointWidth: 10,
                color:'#8C7853',
                zIndex:z
            });
} 
   
       
    $("#plot").click(function(){
        while(chart.series.length > 0)
        chart.series[0].remove(true);
        
        addGold(3);
        addSilver(2);
        addBronze(1);
    
    });

    $("#reverse").click(function(){
         while(chart.series.length > 0)
        chart.series[0].remove(true);
        
        addGold(1);
        addSilver(2);
        addBronze(3);
    });
    
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Olympic Medal Tally'
            },
            subtitle: {
                text: 'Source: Olympics'
            },
            xAxis: {
                categories: [
                    'Olympic 2008',
                    'Olympic 2012'
                  
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Medal Count'
                }
            },
            legend: {
                layout: 'vertical',
                backgroundColor: '#FFFFFF',
                align: 'left',
                verticalAlign: 'top',
                x: 400,
                y: 40,
...