JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container"></div>
<button id="addButton">Add lines</button>
<button id="removeButton">Remove lines</button>

CSS

#container {
  min-width: 320px;
  max-width: 600px;
  margin: 0 auto;
}

JavaScript

var chart = Highcharts.chart('container', {

  title: {
    text: 'Chart update'
  },
  series: [{
    type: 'bubble',
    colorByPoint: true,
    data: [
    	{
        x: 95,
        y: 95,
        z: 13.8,
        name: 'BE',
        country: 'Belgium'
      },
      {
        x: 86.5,
        y: 102.9,
        z: 14.7,
        name: 'DE',
        country: 'Germany'
      },
      {
        x: 80.8,
        y: 91.5,
        z: 15.8,
        name: 'FI',
        country: 'Finland'
      },
      {
        x: 80.4,
        y: 102.5,
        z: 12,
        name: 'NL',
        country: 'Netherlands'
      },
      {
        x: 80.3,
        y: 86.1,
        z: 11.8,
        name: 'SE',
        country: 'Sweden'
      },
      {
        x: 78.4,
        y: 70.1,
        z: 16.6,
        name: 'ES',
        country: 'Spain'
      },
      {
        x: 74.2,
        y: 68.5,
        z: 14.5,
        name: 'FR',
        country: 'France'
      }
    ],
    showInLegend: false
  }]

});


$('#addButton').click(function() {
  chart.update({
    xAxis:{
    	gridLineWidth: 1
    },
    yAxis:{
    	gridLineWidth: 1
    }
  });
});

$('#removeButton').click(function() {
  chart.update({
    xAxis:{
    	gridLineWidth: 0
    },
    yAxis:{
    	gridLineWidth: 0
    }
  });
});