Add clickable link to tooltip - Javascript highcharts

Javascript examples for highcharts:Chart Tooltip

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

Description

Add clickable link to tooltip

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> 
      <script type="text/javascript">
var toolTip = [//from w w  w.  j  a v  a2 s.  c  o m
  ['INC0851685', 'INC0851694', 'INC0851700', 'INC0851730', 'INC0851844', 'INC0851848'],
  ['INC0851994'],
  ['INC0852913'],
  ['INC0853188', 'INC0853189', 'INC0853194', 'INC0853203', 'INC0853209', 'INC0853320'],
  ['INC0853801', 'INC0853836', 'INC0853867', 'INC0854072'],
  ['INC0854336', 'INC0854338', 'INC0854354', 'INC0854390'],
  ['INC0855197', 'INC0855325', 'INC0855526'],
  ['INC0855705', 'INC0855728'],
  ['INC0856094', 'INC0856105', 'INC0856372'],
  ['INC0852913'],
  ['INC0852913'],
  ['INC0852913']
];
var urls = [
  ['www.1-1.com', 'www.1-2.com', 'www.1-3.com', 'www.1-4.com', 'www.1-5.com', 'www.1-6.com'],
  ['www.1.com'],
  ['www.1.com'],
  ['www.1.com', 'www.1.com', 'www.1.com', 'www.1.com', 'www.1.com', 'www.1.com'],
  ['www.1.com', 'www.1.com', 'www.1.com', 'www.1.com'],
  ['www.1.com', 'www.1.com', 'www.1.com', 'www.1.com'],
  ['www.1.com', 'www.1.com', 'www.1.com'],
  ['www.1.com', 'www.1.com'],
  ['www.1.com', 'www.1.com', 'www.1.com'],
  ['www.1.com'],
  ['www.1.com'],
  ['www.1.com']
];
var data = [
  [100],
  [100],
  [300],
  [200],
  [100],
  [100],
  [100],
  [100],
  [100],
  [100],
  [100],
  [100]
];
$(function() {
  cloneToolTip = null;
  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() {
              if (cloneToolTip) {
                chart.container.firstChild.removeChild(cloneToolTip);
              }
              cloneToolTip = this.series.chart.tooltip.label.element.cloneNode(true);
              chart.container.firstChild.appendChild(cloneToolTip);
            }
          }
        }
      }
    },
    tooltip: {
      useHTML: true,
      style: {
        pointerEvents: 'auto'
      }
    },
    series: [{
      tooltip: {
        pointFormatter: function() {
          var string = '';
          var indexs = this.series.data.indexOf(this);
          Highcharts.each(toolTip[this.series.data.indexOf(this)], function(p, j) {
            string += '<a href="' + urls[indexs][j] + '">' + p + '</a><br>'
          });
          return string + "<br />";
        }
      },
      type: 'spline',
      data: data
    }]
  });
});

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

Related Tutorials