JSFiddle - React, Tailwind, and code Playground

by araque

HTML

<script src="http://code.highcharts.com/highcharts.src.js"></script>
<div id="container" style="height: 300px"></div>

JavaScript

$(function () {
    
    var chart = null;
    
    var recreateChart = function(chart) {
        setTimeout(function() { 
            chart.destroy(); 
            chart = null;
            createChart(chart);   
		}, 1);
    };
    
    var createChart = function(chart) {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            plotOptions: {
                series: {
                    allowPointSelect: true,
                    point: {
                        events: {
                            select: function() {
                                this.graphic.attr('fill', this.series.color);
                                recreateChart(chart);
                            }
                        }
                    }
                }
            },
            series: [{
                name: 'Test 1',
                data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
            }, {
                name: 'Test 2',
                data: [129.9, 171.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 195.6, 154.4]
            }]
        });
    };
    
    createChart(chart);
    
});