Hicharts Mix drilldown

by lostrailler

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>

<div id="container" style="width:100%;height:400px;">
</div>

JavaScript

var chart = new Highcharts.Chart({
		chart: {
        renderTo: 'container',
        type: 'column',
        events: {
          drilldown: function(e) {
            var chart = this;
              drilldowns = chart.userOptions.drilldown.series;
              series = [];
            e.preventDefault();
            Highcharts.each(drilldowns, function(p, i) {
              if (p.id.includes(e.point.drilldown)) {
                chart.addSingleSeriesAsDrilldown(e.point, p);
              }
            });
            chart.applyDrilldown();
          }
        }
    },
    title: {
        text: 'Scores par paliers'
    },
    xAxis: {
        type: 'category',
        labels: {
            rotation: -45,
            align: 'right',
            style: {
            	fontFamily: 'Verdana, sans-serif'
    		}
    	},
    	min: 0
    },
    yAxis: {
    	title: {
    		text: 'Score'
    	},
    	max: 100,
    	tickInterval: 10,
    	min: 0
    },
    legend: {
    	enabled: true
    },
    plotOptions: {
    	series: {
    		borderWidth: 0,
    		dataLabels: {
    			enabled: true
    		}
    	}
    },
    exporting: {
    	enabled: true
    },
    tooltip: {
    	formatter: function() {
    		if (this.point.drilldown) {
    			var s = this.key +' : <b>'+ this.y +' %</b>';
    		} else {
    			var s = this.key +' : <b>'+ this.y + '</b>';
    		}
    		return s;
    	}
    },
    series: [{
    		name: 'Marches',
        colorByPoint: true,
        data: [
            {
                name: 'Step 1',
                y: 89,
                drilldown: 'step1'
            },
            {
                name: 'Step 2',
                y: 17,
                drilldown: 'step2'
            }]
    }],
    drilldown: {
        drillUpButton: {
			relativeTo: 'spacingBox',
			position: {
				y: 0,
				x: -50
			}
		},
      series: [
        {
          id: 'step1',
          name: 'Step 1',
          type: 'column',
          data: [['Game 1', 100],['Game 2', 100],['Game...