JSFiddle - React, Tailwind, and code Playground

by mkremer90

HTML

<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://keith-wood.name/js/jquery.svg.js"></script>
<script src="http://keith-wood.name/js/jquery.svganim.js"></script>

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

<button onClick='testAnimation();'>Go</button>

<div id="container2" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

<button onClick='testAnimation2();'>Go</button>

JavaScript

var chart, chart2;

function testAnimation(){
    chart.series[0].update({
        "Asia": {x: 0}, "Europe": {x: 1}, "Africa": {x: 2}, "America": {x: 3}, "Oceania": {x: 4}
    },function(){
        chart.series[0].update({
            "Asia": {y: 107,x: 2}, "Europe": {y: 31,x: 3}, "Africa": {y: 635,x: 0}, "America": {y: 203,x: 1}, "Oceania": {y: 2,x: 4}
        },function(){
            chart.series[0].update({
                "Asia": {y: 60,x: 2}, "Europe": {y: 145,x: 1}, "Africa": {y: 20,x: 3}, "America": {y: 11,x: 4}, "Oceania": {y: 526,x: 0}
            });          
        });
    });  
}

function testAnimation2(){
    /* I've commented out the next two animations for the column chart until we get the label movement down. */
    chart2.series[0].update({
        "Asia": {x: 0}, "Europe": {x: 1}, "Africa": {x: 2}, "America": {x: 3}, "Oceania": {x: 4}
    }/*,function(){
        chart2.series[0].update({
            "Asia": {y: 107,x: 2}, "Europe": {y: 31,x: 3}, "Africa": {y: 635,x: 0}, "America": {y: 203,x: 1}, "Oceania": {y: 2,x: 4}
        },function(){
            chart2.series[0].update({
                "Asia": {y: 60,x: 2}, "Europe": {y: 145,x: 1}, "Africa": {y: 20,x: 3}, "America": {y: 11,x: 4}, "Oceania": {y: 526,x: 0}
            });          
        });
    }*/);
}

$(document).ready(function() {
    
    /* This is the animation hack for animating category position & labels */
    
    Highcharts.Series.prototype.update = function(changes, callback){
        var series = this, c = this.chart, animDuration=400, type = this.chart.options.chart.type;
        if (type == "bar" || type == "column"){
            if (typeof c.options.chart.animation === typeof {}){
                if (typeof c.options.chart.animation.duration !== "undefined") animDuration = c.options.chart.animation.duration;
            }
            if (typeof c.labelPositions === "undefined"){
                c.labelPositions = [];
                if (type == "bar"){
               ...