shared tooltips for certain series in line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

shared tooltips for certain series in 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-1.9.1.js"></script> 
      <script type="text/javascript">
$(function () {/*from   ww  w  .  jav  a2s .c  o  m*/
    $('#container').highcharts({
        tooltip:{
            formatter:function(){
                var txt = '',
                    x = this.x,
                    series = this.point.series.chart.series;
                if(this.series.options.shared) {
                    $.each(series,function(i,s){
                        if(s.options.shared) {
                            $.each(s.data,function(j, d){
                                if(d.x === x) {
                                    txt += '<span style="color:'+s.color+';font-weight:bold;">'+s.name+'</span> value: ' + d.y + '<br/>';
                                }
                            });
                        }
                    });
                } else {
                    txt = 'not shared value: ' + this.y;
                }
                return txt;
            }
        },
        series: [{
            shared:true,
            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]
        }, {
            shared:true,
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }]
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials