Add advanced tooltip - Javascript highcharts

Javascript examples for highcharts:Chart Tooltip

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

Description

Add advanced tooltip

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts - advanced tooltip functionality needed</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">
$(function() {//from   w w w .j a  v  a  2s.  c om
    var seriesTotal = [
        {x: 0, y: 0, customTooltip: 0, customOther: "1 Value!"},
        {x: 1, y: 0, customTooltip: 0, customOther: "2 Value!"},
        {x: 2, y: 0, customTooltip: 0, customOther: "3 Value!"},
        {x: 3, y: 1, customTooltip: 1, customOther: "4 Value!"},
        {x: 4, y: 1, customTooltip: 1, customOther: "5 Value!"},
        {x: 5, y: 1, customTooltip: 2, customOther: "6 Value!"},
        {x: 6, y: 1, customTooltip: 3, customOther: "7 Value!"}
    ];
    var seriesInService = [
        {x: 0, y: 0, customTooltip: 0, customOther: "A Value!"},
        {x: 1, y: 0, customTooltip: 0, customOther: "B Value!"},
        {x: 2, y: 0, customTooltip: 0, customOther: "C Value!"},
        {x: 3, y: 0, customTooltip: 0, customOther: "D Value!"},
        {x: 4, y: 0, customTooltip: 0, customOther: "E Value!"},
        {x: 5, y: 1, customTooltip: 1, customOther: "F Value!"},
        {x: 6, y: 2, customTooltip: 2, customOther: "G Value!"}
    ];
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        tooltip: {
            formatter: function() {
                var txt = "Original Value: " + this.y;
                txt += "<br />New Value: " + this.point.customTooltip;
                txt += "<br />Other Custom Value: " + this.point.customOther;
                return txt;
            }
        },
        series: [
            {data: seriesTotal},
            {data: seriesInService}
        ]
    });
});

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

Related Tutorials