JSFiddle - React, Tailwind, and code Playground

by PanicJ

HTML

<div id="container" style="height: 400px"></div>
<script src="http://code.highcharts.com/highcharts.js"></script>
<button id="button">Change data set</button>

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            marginRight: 80 // like left
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: [{
            lineWidth: 1,
            max: 1000,
            min: 0,
            title: {
                text: 'Primary Axis'
            }
        }, {
            lineWidth: 1,
            opposite: true,
            title: {
                text: 'Secondary Axis'
            }
        }],

        series: [{
            data: [29.9, 11.5, 36.4, 19.2, 4.0, 46.0, 48.2, 15.2, 16.4, 4.1, 5.6, 44.4]
        }]
    });
    $('#button').click(function () {
        var chart = $('#container').highcharts();
        if ($(this).hasClass('big')) {
            $(this).removeClass('big');
            chart.series[0].setData([29.9, 11.5, 36.4, 19.2, 4.0, 46.0, 48.2, 15.2, 16.4, 4.1, 5.6, 44.4]);
        } else {
            $(this).addClass('big');
            chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 248.5, 316.4, 694.1, 795.6, 954.4, 1029.9, 1171.5, 1506.4]);
        }
        });
    });