bar with negative stack: show different tooltip for left and right - Javascript highcharts

Javascript examples for highcharts:Chart Tooltip

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

Description

bar with negative stack: show different tooltip for left and right

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://code.jquery.com/jquery-git.js"></script> 
      <script type="text/javascript">
    $(window).on('load', function() {
$(document).ready(function() {
  $('#disease-bar').highcharts({
    colors: ['#dd4c39', '#00a9e9', '#c61a7e', '#bd8030', '#949293', '#075290', '#7db6ed', '#009451', '#c84433'],
    chart: {//from w ww . j  a  v  a2  s. com
      type: 'bar',
      backgroundColor: null
    },
    title: {
      text: 'Top Five Communicable & Non-communicable Diseases'
    },
    xAxis: [{
      categories: ['TB Suspects', 'Scabies', 'Diarrhoea / Dysentery > 5 yrs', 'Diarrhoea / Dysentery > 5 yrs', 'Acute (Upper) Respiratory Infections'],
      crosshair: true,
      labels: {
        step: 1
      }
    }, {
      opposite: true,
      categories: ['Otitis Media', 'Road Traffic Accidents', 'Peptic Ulcer Diseases', 'Fever due to other causes', 'Diabetes Mellitus'],
      labels: {
        step: 1
      }
    }],
    yAxis: {
      title: {
        text: null
      },
      labels: {
        formatter: function() {
          var s = Math.abs(this.value);
          if (s.toFixed(0) >= 1000000) {
            return s.toFixed(0) / 1000000 + 'M';
          } else {
            return s.toFixed(0) / 1000 + 'K';
          }
        }
      }
    },
    plotOptions: {
      series: {
        cursor: 'pointer',
        stacking: 'normal'
      }
    },
    tooltip: {
      formatter: function() {
        return '<b>' + this.point.category + '</b><br/>' + 'Diseases: <b>' + Math.abs(this.point.y) + '</b>';
      }
    },
    credits: {
      enabled: false
    },
    series: [{
      name: 'Communicable',
      data: [-3000, -10500, -10000, -10000, -90000]
    }, {
      name: 'Non-Communicable',
      xAxis: 1,
      data: [10000, 15000, 15000, 20000, 30000]
    }]
  });
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="disease-bar"></div>  
   </body>
</html>

Related Tutorials