score:4

Accepted answer

there are two ways of doing those changes - a static and dynamic way. static way - define data labels and tooltip options for drilldown series.

dynamic way - apply the options on drilldown/drillup events.

events: {
    drilldown: function(options) {
      this.yaxis[0].update({
        labels: {
          format: '{value}'
        }
      }, false, false);

      options.seriesoptions.datalabels = {
        format: '{point.y:.1f}'
      };

      options.seriesoptions.tooltip = {
        pointformat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>'
        };
    },
    drillup: function () {
        this.yaxis[0].update({
        labels: {
          format: '{value}%'
        }
      }, false, false);
    }
  }

example: http://jsfiddle.net/d4fmaeea/

two warnings:

  1. in your json files, you have points which has value equals to "" which is not a valid type (must be number/null) and it may cause some issues, e.g. column with value 0 will have the same height as the column with value 10.

  2. $.getjson() is an asynchronous function. you use getjson to assign list to options.series but that part may be executed after the chart was created so you would end up with the chart with no top-level series, only the drilldown ones.

async part of code:

$.getjson('/uploads/fraction.json', function (list) {
    options.series = list;

});
$.getjson('/uploads/drilldown.json', function (list2) {
    options.drilldown.series = list2;
    var chart = new highcharts.chart(options);
});

Related Query

More Query from same tag