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="resizer" style="min-width: 350px; min-height: 200px; width: 500px">
    <div id="inner-resizer">
        <div id="container" style="height: 300px">
        </div>
    </div>
</div>

<button id="addpoint">Add point</button>

CSS

#resizer {
    border: 1px solid silver;   
}
#inner-resizer { /* make room for the resize handle */
    padding: 10px;
}

JavaScript

var container = $('#container')[0];
$('#resizer').resizable({
    // On resize, set the chart size to that of the 
    // resizer minus padding. If your chart has a lot of data or other
    // content, the redrawing might be slow. In that case, we recommend 
    // that you use the 'stop' event instead of 'resize'.
    resize: function() {
        chart.setSize(
            this.offsetWidth - 20, 
            this.offsetHeight - 20,
            false
        );
    }
});


var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        type: 'pie',
        marginTop: 50,
        borderWidth: 1
    },
    
    credits: {
        enabled: false
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    
    legend: {
        layout: 'vertical',
        align: 'right',
        y: 40,
        verticalAlign: 'top'
    },

    series: [{
        data: $.map([29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], function (val, i) { return { y: val, name: 'Slice '+ i }; }),
        showInLegend: true
    }]

});

$('#addpoint').click(function () {
    chart.series[0].addPoint(Math.random() * 200);
});