Question

I have a drill down chart for which first three level is column chart and fourth level is pie chart i want at the each level the tool tip should be changed. I am not able to change it programmatically. Is there any function to change the tooltip.
Here is the code –

var chartLevel = 0; //gloabal variable
function drawYearlyChart(val)
{
  var arr = val.toString().split("\n");
  var chart;
  var colors = Highcharts.getOptions().colors,
      categories = eval(arr[0].toString()),
      name = 'Yearly Report',
      data = eval(arr[1].toString());
  
  function setChart(name, categories, data, color,type) {
    chart.xAxis[0].setCategories(categories);
    chart.series[0].remove();
    chart.setTitle();
    if(chartLevel==1)
    {
      chart.yAxis[0].axisTitle.attr({text: 'Number of question'});
      
      //Here i want some function to change the tooltip of column chart
    }
    chart.addSeries({
      name: name,
      data: data,
      color: color || colors[0],
      type: type || 'column'
    });
    if(chartLevel==3)
    {
      chartLevel = 0;
      chart.yAxis[0].axisTitle.attr({text: 'Number of sessions'});
    }
    else
      chartLevel++;
  }
  
  chart = new Highcharts.Chart({
    chart: {
      renderTo: 'chart',
      type: 'column'
    },
    title: {
      text: 'Your yearly report till now'
    },
    subtitle: {
      text: 'Click the columns to view report for that particular period.'
    },
    xAxis: {
      categories: categories
    },
    yAxis: {
      title: {
        text: 'Number of session'
      },
      allowDecimals: false,
      id: 'yXis'
    },
    plotOptions: {
      column: {
        cursor: 'pointer',
        point: {
          events: {
            click: function() {
              var drilldown = this.drilldown;
              if (drilldown) { // drill down
                setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color,drilldown.type);
              } else { // restore
                setChart(name, categories, data);
              }
            }
          }
        },
        dataLabels: {
          enabled: true,
          color: colors[0],
          style: {
            fontWeight: 'bold'
          },
          formatter: function() {
            return this.y +'';
          }
        },
        tooltip: {
          pointFormat: '<span style="color:{series.color}">{point.name}</span>: <b>{point.y}</b><br/>Click to view {point.name} report',
          valueSuffix: ' Sessions'
        }
      },
      pie: {
        showInLegend: true,
        dataLabels: {
          enabled: true,
          formatter: function(){
            return (this.y+' Questions<br>'+this.percentage+'%');
          }
        },
        tooltip:{
          pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/> Click to return to yearly report',
          valueSuffix: ' quesitons'
        },
        events: {
          click: function(){
            var drilldown = this.drilldown;
            if (drilldown) { // drill down
              setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color,drilldown.type);
            } else { // restore
              setChart(name, categories, data);
            }
          }
        }
      }
    },
    series: [{
      name: name,
      data: data,
      color: '#4572A7'
    }],
    exporting: {
      enabled: false
    }
  });
}

Any suggestion or solution is appreciated.

Answer 1

You can change the content of the tooltip with the tooltip formater function. See docs for details and examples: http://api.highcharts.com/highcharts#tooltip.formatter

This function gets several properties in it’s context (this.myProp), which you can use to create your desired output on any of your chart series.