JSFiddle - React, Tailwind, and code Playground

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="btn">Trigger</button>

JavaScript

$(function() {
  var chart;
  $(document).ready(function() {
    chart = new Highcharts.Chart({
      chart: {
        renderTo: 'container',
        type: 'area',
        marginTop: 200
      },
      title: {
        text: 'Chart title'
      },
      xAxis: {
        labels: {
          formatter: function() {
            return this.value; // clean, unformatted number for year
          }
        }
      },
      yAxis: {
        title: {
          text: 'Nuclear weapon states'
        },
        labels: {
          formatter: function() {
            return this.value / 1000 + 'k';
          }
        }
      },
      plotOptions: {
        area: {
          pointStart: 1940,
          marker: {
            enabled: false,
            symbol: 'circle',
            radius: 2,
            states: {
              hover: {
                enabled: true
              }
            }
          }
        }
      },
      series: [{
        name: 'F',
        data: [6, 11, 32, 110, 235, 369, 640, 1005, 1436]
      }, {
        name: 'C',
        data: [5, 25, 50, 120, 150, 200, 426, 660, 869, 1060]
      }]
    });
  });

  var btn = $('#btn');
  btn.click(function() {
    chart.update({
      chart: {
        marginTop: 30
      }
    });
  });
});