Highcharts drilldown

by lostrailler

HTML

<script src="https://code.highcharts.com/highcharts.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',
            zoomType: 'x',
            backgroundColor:'rgba(255, 255, 255, 0.1)'
        },
        title: {
            text: 'Scores par jeux'
        },
        xAxis: {
            categories: ['Apprenti Calligraphe', 'Canards mandarins', 'Le sage', 'Loto', 'Maître calligraphe', 'Maître calligraphe2', 'Mémory', 'Mots croisés', 'Oreille du tigre', 'Yin-yang'],
            labels: {
                rotation: -45,
                align: 'right',
                style: {
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            title: {
                text: 'Scores'
            },
            min: 0,
			max: 100,
			tickInterval: 10,
            type: 'category'
        },
        tooltip: {
            formatter: function() {
				return ''+this.series.name +': '+ this.y +' %';					this.series.name +': '+ this.y +' ('+ Math.round(this.percentage) +'%)';
			}
        },
        legend: {
            enabled: true
        },
        plotOptions: {
			column: {
				stacking: 'normal'
			}
		},
        series: [   {
       	name: 'Meilleurs scores',
       	data: [100,100,100,100,93,100,93,100,100,100],
        type: 'column'
   },   {
       	name: 'Scores moyens',
       	data: [83,83,79,91,60,61,68,33,71,75],
        type: 'spline'
   }]});