Highcharts, add 'go back' (drill up) button when drill

Question

How to implement that '< Go back' button from this http://jsfiddle.net/highcharts/Vf3yT/ (click on pie) to this http://jsfiddle.net/neFYY/ (new 3.0 Highcharts) ?

Highcharts.setOptions({
    lang: {
        drillUpText: '◁ Back to {series.name}'
    }
});

score 3 · Accepted Answer · answered Jun 06 '13 at 13:41

Let's make it clear:

this example: http://jsfiddle.net/neFYY/2/ IS NOT plugin, it's just simple Highcharts chart, with some click binds to make it behave like drilldown.
this example: http://jsfiddle.net/highcharts/Vf3yT/ IS plugin, which requires some specific structure to make it work (see: drilldown object)

So if you want to use plugin with first chart, you need to pass proper structure for that plugin, which is:

drilldown: {
    activeAxisLabelStyle: {
        cursor: 'pointer',
        color: '#039',
        fontWeight: 'bold',
        textDecoration: 'underline'            
    },
    activeDataLabelStyle: {
        cursor: 'pointer',
        color: '#039',
        fontWeight: 'bold',
        textDecoration: 'underline'            
    },
    animation: {
        duration: 500
    },
    series: [{
        id: 'fruits',
        name: 'Fruits',
        data: [
            ['Apples', 4],
            ['Pears', 6],
            ['Oranges', 2],
            ['Grapes', 8]
        ]
    }, {
        id: 'cars',
        name: 'Cars',
        data: [{
            name: 'Toyota', 
            y: 4,
            drilldown: 'toyota'
        },
        ['Volkswagen', 3],
        ['Opel', 5]
        ]
    }, {
        id: 'toyota',
        name: 'Toyota',
        data: [
            ['RAV4', 3],
            ['Corolla', 1],
            ['Carina', 4],
            ['Land Cruiser', 5]
        ]
    }]
},

And series:

series: [{
    name: 'Overview',
    colorByPoint: true,
    data: [{
        name: 'Fruits',
        y: 10,
        drilldown: 'fruits'
    }, {
        name: 'Cars',
        y: 12,
        drilldown: 'cars'
    }, {
        name: 'Countries',
        y: 8
    }]
}]

Can you please explain what plugin you are speaking about in the second example? — M H, Aug 07 '15 at 14:36
Sure, I mean drilldown.js plugin for Highcharts, see [API](http://api.highcharts.com/highcharts#drilldown) (on top). — Paweł Fus, Aug 10 '15 at 08:46

score 1 · Answer 2 · answered Jun 05 '13 at 15:02

1

I'm not sure where the problem is, to add button you can use plugin http://jsfiddle.net/Vf3yT/62

Top chart from fisrt example is the same as second fiddle.

answered Jun 05 '13 at 15:02

Sebastian Bochan

37,348
3
49
75

because when i add drilldown module to this chart it disappears http://jsfiddle.net/neFYY/1/ – breq Jun 05 '13 at 15:10
But this first chart is the same, only difference is datalabel (percent) so http://jsfiddle.net/Vf3yT/63/ and yours are the same. – Sebastian Bochan Jun 05 '13 at 15:14
any ideas? When i remove drilldown module in http://jsfiddle.net/neFYY/1/ charts are shown but i need to get that '< Go back' button – breq Jun 05 '13 at 21:27

Highcharts, add 'go back' (drill up) button when drill

2 Answers2

Linked