highchartshistogramdrilldown

Highcharts histogram drilldown: set options for drilldown + first and last column cut-off


I have a game with 3 difficulties and I show their averages in a first graph. Now I want to use drilldown to show a spread of the scores for each difficulty in a histogram. I managed to get this working but I have two problems. First of all I use update to change the setting for the drilldown graphs, but then these settings also change for the first graph and thus I was wondering what the better way would be to do this. My other problem is that in my histogram the first and last column are cut in half and only half is shown, but I cant seem to find a way to solve this. I tried min- and maxPadding but this did not work.

chart of the tree difficulties Histogram of one difficulty

https://jsfiddle.net/vlovlo/sng4jwv8/36/ Here is my code

Highcharts.chart('skippedPatients', {
    chart: {
        events: {
            drilldown: function (e) {
                this.update({
                    title: {text: "Skipped patient: " + e.point.name},
                    xAxis:{
                        title:{text: "Nr of skipped patients"},
                        tickmarkPlacement: 'on',
                    },
                    yAxis:{title:{text: "Nr of players"}},
                    plotOptions:{series:{pointPlacement: 'on'}},

                });

                if (!e.seriesOptions) {
                    var chart = this,
                        drilldowns = {
                            'Histogram: Easy': {
                                name: 'Easy',
                                type: 'histogram',
                                baseSeries: 'avgSkippedEasy'
                            },
                                'Easy': {
                                id: 'avgSkippedEasy',
                                visible: false,
                                type: 'column',
                                data: skippedPatientsList
                            }
                        },
                        series = [drilldowns['Histogram: ' + e.point.name], drilldowns[e.point.name]];

                    chart.addSingleSeriesAsDrilldown(e.point, series[0]);
                    chart.addSingleSeriesAsDrilldown(e.point, series[1]);
                    chart.applyDrilldown();
                }

            }
        }
    },
    title: {
        text: 'Skipped patients'
    },
    xAxis: {
        type: 'category',       
    },

    legend: {
        enabled: false
    },

    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true
            },
        },
        histogram: {
            binWidth: 1
        }
    },

    series: [{
        name: 'Averages per difficulty',
        colorByPoint: true,
        type: 'column',
        data: [{
            name: 'Easy',
            y: 5,
            drilldown: true
        }, {
            name: 'Moderate',
            y: 2,
            drilldown: true
        }, {
            name: 'Hard',
            y: 4,
            drilldown: true
        }]
    }],

    drilldown: {
        series: []
    }
});

Solution

  • You should define your initial options as a variable and attach them again in the drillup callback due to you did a chart update with changed the initial options.

    Demo: https://jsfiddle.net/BlackLabel/5d1atnh7/