JSFiddle - React, Tailwind, and code Playground

by sbochan

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>

JavaScript

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
              zoomType:'x'
            },
            title: {
                text: 'Monthly Average Temperature'
            },
          xAxis:{
            min:0,
            max:11,
              events:{
                afterSetExtremes:function(){
                  
                  if(this.dataMin == this.min && this.dataMax == this.max)
                    alert('not zoomed');
                  else
                    alert('zoomed');
                    
                }
            }
          },
            series: [{
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }]
        });
    });
    
});