Only show one series at a time for line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Line Chart

Description

Only show one series at a time for line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-git.js" chart></script> 
      <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script> 
      <script type="text/javascript">
    $(window).on('load', function() {
$(document).ready(function () {
    var chart = new Highcharts.Chart({
        chart: {/*from www. ja v a 2 s  .  c  om*/
            renderTo: 'container'
        },
        plotOptions: {
            series: {
                events: {
                    show: function () {
                        var chart = this.chart,
                            series = chart.series,
                            i = series.length,
                            otherSeries;
                        while (i--) {
                            otherSeries = series[i];
                            if (otherSeries != this && otherSeries.visible) {
                                otherSeries.hide();
                            }
                        }
                    },
                    legendItemClick: function() {
                        if(this.visible){
                             return false;
                        }
                    }
                }
            }
        },
        series: [{
            data: [7, 6, 9, 14, 18, 21, 25, 26, 23, 18, 13]
        }, {
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6],
            visible: false
        }, {
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9],
            visible: false
        }, {
            data: [-1, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6],
            visible: false
        }]
    });
});
    });

      </script> 
   </head> 
   <body> 
      <div id="container" style="width: 600px; height: 350px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials