show additional custom data in tooltip for bar chart - Javascript highcharts

Javascript examples for highcharts:Bar Chart

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

Description

show additional custom data in tooltip for bar 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://code.jquery.com/jquery-git.js"></script> 
      <script type="text/javascript">
    $(window).on('load', function() {
$(function () {//  w  w w .  j  av a  2 s  .  com
    try {
        var chartOptions = {
            chart: { type: 'column' },
            title: { text: 'Stats' },
            subtitle: { text: '/day' },
            credits: { enabled: false },
            yAxis: {
                min: 0,
                title: {text: 'Francs (CHF)'}
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            }
        };
        chartOptions.xAxis = {
            categories: ['23.01.2014', '24.01.2014', '25.01.2014'],
            nbItems: {"23.01.2014":5,'24.01.2014':3,'25.01.2014':4}
        };
        chartOptions.series = [
            {
                name: 'Estimated',
                data: [123,456,426]
            }, {
                name: 'Real',
                data: [531,120,55]
            }, {
                name: 'Total',
                data: [123,555,435]
            }
        ];
        chartOptions.test = 'yann';
        chartOptions.tooltip = {
             formatter: function() {
                var s = '<b>'+ this.x + ' (' + chartOptions.xAxis.nbItems[this.x] + ')</b>';
                $.each(this.points, function(i, point) {
                    s += '<br/>'+ point.series.name +': '+
                        point.y +'m';
                });
                return s;
            },
            shared: true,
            useHTML: false
        };
        $('#stats-chart').highcharts(chartOptions);
    } catch (ex) {
        $('body').append(ex.message);
    }
});
    });

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

Related Tutorials