Highcharts angular.js custom tooltip

Question

I am working on following example https://jsfiddle.net/neelkamal0666/6737c2q5/

Highcharts.chart('container', {
        chart: {
          type: 'column'
        },
        colors: ["rgb(241,198,64)", "#0091ea"],
        title: {
          text: '&nbsp;',
          useHTML : true
        },
        xAxis: {
          categories: ['Sowing', 'Activity', 'Application', 'Harvest']
        },
        yAxis: {
          min: 0,
          title :'',
          stackLabels: {
            enabled: false,
            style: {
              fontWeight: 'bold',
              color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
          }
        },
        legend: {
          align: 'right',
          x: -30,
          verticalAlign: 'top',
          y: 25,
          floating: true,
          backgroundColor: 'white',
          borderColor: '#CCC',
          borderWidth: 1,
          shadow: false
        },
        credits: {
          enabled: false
        },
        tooltip: {
          shared: false,
          backgroundColor: 'black',
          borderColor: 'black',
          borderRadius: 10,
          color: 'white',
          useHTML :true,
          borderWidth: 3,
          headerFormat: '<b style="color: #fff;">{point.x}</b><br/>',
          pointFormat: '<b style="color: #fff;">{series.name}: {point.y}</b><br/><b style="color: #fff;">Total(%): {point.stackTotal}</b><br />',
          /*formatter: function () {
            var s = '<b>' + this.x + '</b>';
            angular.forEach(this.points, function () {
              s += '<br/>' + this.series.name + ': ' +
                this.y + 'm';
            });

            return s;
          } */
        },
        plotOptions: {
          column: {
            stacking: 'normal',
            dataLabels: {
              enabled: false,
              color:  'white',
              style: {
                textShadow: ''
              }
            }
          },
          series: {
            pointWidth: 50, //width of the column bars irrespective of the chart size
            additional : ["Sowing Area", "Activity", "Application", "Harvest"]
          }
        },
        series: [{
          name: 'Pending(%)',
          data: [60, 40, 20, 80],

        }, {
          name: 'Completed(%)',
          data: [40, 60, 80, 20],

        }]

      });

On tooltips I want to display different values e.g if user clicks on sowing it will show

Pending : 60
Total : 100
Sowing Area : 4500 H
Plots Audited : 1200 H

And when user clicks on activities, it will show

  Pending : 40,
  Completed : 60,
  Total : 100,
  Total Activities : 200
  Closed Activities : 125

When user clicks on Application, it will show

Pending :20,
Completed :80
Total :100,
Per acre usage : 200

And When user clicks on Harvest, it will show

Pending :80,
Completed :20
Total :100,
Volume Forcast : 100MT

I read the documentation of Highchart and went through lot of examples but still unable to figure out how can I achieve this.

Can someone help?

Kacper Madej · Accepted Answer · 2016-04-15 10:14:48Z

2

To change tooltip display you could add more info per data point and later access it and set it in tooltip's formatter.

Example: https://jsfiddle.net/woo70ers/

It might be easier to have all extra info in another array - easier too loop, whatever the additional into is.

Simple example: http://jsfiddle.net/am5ynoLg/

    tooltip: {
      formatter: function() {
        var ret = 'x: ' + this.x + ', y: ' + this.y;
        Highcharts.each(this.point.extraForTooltip, function(info) {
          ret += '<br/>' + info[0] + ': ' + info[1];
        });
        return ret;
      }
    },
    series: [{
      data: [
        [0, 1, [['opt1',123],['opt2','nice']] ],
        [1, 2, [['opt2','bueno'],['opt3','ESP_#42']] ]
      ],
      keys: ['x', 'y', 'extraForTooltip']
    }]

answered Apr 15, 2016 at 10:14

Kacper Madej

7,89627 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Neel Kamal Over a year ago

Thanks a lot Kacper. This is exactly what I was looking for.

Collectives™ on Stack Overflow

Highcharts angular.js custom tooltip

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related