JSFiddle - React, Tailwind, and code Playground

highcharts bug with display:none

by Nhi Nguyen

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<input type="checkbox" class="myCheck" id="myCheck">CLICK ME</input>
<div class="info">CLICK ME</div>
<div class="chart">
  <div id="container"></div>
</div>
<div class="hide">HIDE ME</div>

CSS

.info {
		  position: absolute;
		  left: 50px;
		  top: 50px;
		  color: #bbbbbb;
		  font: 700 24px 'calibri';
		  cursor: pointer;
		}
		
		.chart {
		  display: none;
		  position: absolute;
		  left: 50px;
		  top: 50px;
		  width: 400px;
		  height: 300px;
		  margin: 0px;
		  padding: 0px;
		  border: 2px solid #bb0000;
		}
		
		.chart #container {
		  width: 100%;
		  height: 100%;
		  background-color: #bbbb00;
		}

JavaScript

Highcharts.chart('container', {
  xAxis: {
    categories: [10, 20, 30, 40, 50, ],
  },
  plotOptions: {
    series: {
      animation: false
    },
  },
  series: [{
    type: 'column',
    data: [1, 2, 3, 4, 5, ],
  }, {
    type: 'column',
    data: [5, 4, 3, 2, 1, ],
  }, ],
});

$('.info').click(function() {
  $('.info').hide();
  $('.chart').show();
  $('.hide').show();
  $('#container').highcharts().reflow();
});
$('.hide').click(function() {
  $('.hide').hide();
  $('.chart').hide();
  $('.info').show();
  //$('#container').highcharts().reflow();
});
$('.myCheck').click(function() {
  /* $('.hide').hide(); */
  /* $('.chart').hide() */;
  if (document.getElementById("myCheck").checked == true){
    $('.chart').show();
    /* $('#container').highcharts().reflow() */;
  } else {
    $('.chart').hide();
  }
 /*  $('.info').show(); */
  //$('#container').highcharts().reflow();
});