Adding a custom tooltip to a bubble chart - Javascript highcharts

Javascript examples for highcharts:Bubble Chart

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

Description

Adding a custom tooltip to a bubble 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://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {//from w ww  .j a  va 2s .c om
    $('#container').highcharts({
       chart: {
           type: 'bubble',
           zoomType: 'xy'
       },
        plotOptions : {
            bubble : {
                tooltip : {
                    headerFormat: '<b>{series.name}</b><br>',
                    pointFormat : '{point.x} fatalities, {point.y} injured, {point.z}  total'
                }
            }
        },
       title: {
          text: 'Highcharts Bubbles'
       },
       series: [{
           data: [[97,36,79],[94,74,60],[68,76,58],[64,87,56],[68,27,73],[74,99,42],[7,93,87],[51,69,40],[38,23,33],[57,86,31]]
       }, {
           data: [[25,10,87],[2,75,59],[11,54,8],[86,55,93],[5,3,58],[90,63,44],[91,33,17],[97,3,56],[15,67,48],[54,25,81]]
       }, {
           data: [[47,47,21],[20,12,4],[6,76,91],[38,30,60],[57,98,64],[61,17,80],[83,60,13],[67,78,75],[64,12,10],[30,77,82]]
       }]
   });
});

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

Related Tutorials