Style tooltip with div and span - Javascript highcharts

Javascript examples for highcharts:Chart Tooltip

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

Description

Style tooltip with div and span

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> 
      <style id="compiled-css" type="text/css">

.highcharts-container {overflow: visible !important; }
.myToolTip { position: absolute; z-index: 1000; border: 2px solid #353535; border-radius: 5px; background-color: #ffffff; padding: 5px; font-size: 9pt; }
.wrapper {overflow: hidden;} /* the fix! */


      </style> 
      <script type="text/javascript">
    $(window).load(function(){//from www.  j a  v  a  2 s . co  m
var chart = new Highcharts.Chart({
    chart: {
        renderTo: "container",
        defaultSeriesType: 'bar'
    },
    legend: {
        enabled: false
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    tooltip : {
        backgroundColor: "rgba(255,255,255,0)",
        borderWidth: 0,
        useHTML: true,
        shadow: false,
         formatter: function () {
             var tip = '<div class="myToolTip"><b>' + this.x + '</b>';
             tip += '<br /><span style="color : ' + this.point.series.color + "\" >" + this.point.series.name + '</span>: ';
             tip += Math.abs(this.y);
             tip += '</div>';
             return tip;
         }
     },
    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]
    }]
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div class="wrapper"> 
         <div id="container" style="height: 300; width:100%"></div> 
      </div>
       View in IE 10 on Windows 8. The large amount of white space disappears when wrapping chart in a div with overflow: hidden. Yay.  
   </body>
</html>

Related Tutorials