display multiple tooltips by click in multiple series with shared true for line chart - Javascript highcharts

Javascript examples for highcharts:Chart Tooltip

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

Description

display multiple tooltips by click in multiple series with shared true for line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.js"></script> 
      <style id="compiled-css" type="text/css">

.highcharts-tooltip > span {
   padding: 5px;
   background-color: rgba(255,255,255,0.75);
   background-color: white\9; /* < IE11 */
   border: 1px solid #3DACD9;
   box-shadow: 2px 2px 2px #888888;//from w  w  w .j  av  a  2s  . c  o m
   z-index: 9999 !important;
}
      </style> 
      <script type="text/javascript">
$(function () {
    cloneToolTip = null;
    checkx = [];
    clone = [];
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function (event) {
                            //check if point was already clicked
                            var x = checkx.indexOf(event.point.x);
                            if (x >= 0) {
                                $(clone[x]).remove();
                                clone.splice(x, 1);
                                checkx.splice(x, 1);
                            } else {
                                var cloneDiv = this.series.chart.tooltip.label.div.cloneNode(true);
                                chart.container.appendChild(cloneDiv);
                                checkx.push(event.point.x);
                                clone.push(cloneDiv);
                            }
                        }
                    }
                }
            }
        },
        tooltip: {
            shared: true,
            useHTML: true,
            borderWidth: 0,
            backgroundColor: 'none',
            shadow: false
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {
            data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]
        }]
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px"></div>  
   </body>
</html>

Related Tutorials