Highcharts drill down to detailed graph

Question

I would like to create a drill-down highchart.

You can find the jsfiddle link which is not working but the sample data is in it.

data: [{
                    name: '6',
                    y: 14
                }, {
                    name: '7',
                    y: 19
                }, ...
                }]
            },
            {
                name: 'B1',
                data: [{
                    name: '6',
                    y: 14
                }, {
                    name: '7',
                    y: 19
                }, ...
            },
            {
                name: 'C1',
                data: [{
                    name: '6',
                    y: 14
                }, {
                    name: '7',
                    y: 19
                }, ...
            }

        ]

The vice versa is running here :

datanormal = [{
                name: '6',
                data: [{
                    name: 'A1',
                    y: 14,
                    drilldown: 'Details1'
                }, {
                    name: 'B1',
                    y: 19,
                    drilldown: 'Details1'
                }, {
                    name: 'C1',
                    y: 21,
                    drilldown: 'Details1'
                }]
            }, 
            {
                name: '7',
                data: [{
                    name: 'A1',
                    y: 5,
                    drilldown: 'Details1'
                } ...]
            }];
            datadrill = 
            [{
                    id: 'Details1',
                    name: 'Details1',
                    data: [
                        ['D1', 4],
                        ['D2', 2],
                        ['D3', 1],
                        ['D4', 4]
                    ]
            }];

I need the opposite, from the basic to complex.

This is the main column chart image

This is the detailed drill-down chart image

Answer 1

If you look fot the working example there is another object for the datadrill:

datadrill = 
            [{
                    id: 'Details1',
                    name: 'Details1',
                    data: [
                        ['D1', 4],
                        ['D2', 2],
                        ['D3', 1],
                        ['D4', 4]
                    ]
            }]

You need to do the same on your code.

Answer 2

Could you check this? Is that what you want?

This is jsfiddle link => https://jsfiddle.net/burakkp/ytkqzfos/2/

$(document).ready(function() {
var datadrill;
        datadrill = [{
                name: 'A1',
                data: [{
                    name: '6',
                    y: 14
                }, {
                    name: '7',
                    y: 19
                }, {
                    name: '8',
                    y: 21
                }, {
                    name: '9',
                    y: 34
                }, {
                    name: '10',
                    y: 5
                }, {
                    name: '11',
                    y: 9
                }]
            },
            {
                name: 'B1',
                data: [{
                    name: '6',
                    y: 14
                }, {
                    name: '7',
                    y: 19
                }, {
                    name: '8',
                    y: 21
                }, {
                    name: '9',
                    y: 34
                }, {
                    name: '10',
                    y: 5
                }, {
                    name: '11',
                    y: 9
                }]
            },
            {
                name: 'C1',
                data: [{
                    name: '6',
                    y: 14
                }, {
                    name: '7',
                    y: 19
                }, {
                    name: '8',
                    y: 21
                }, {
                    name: '9',
                    y: 34
                }, {
                    name: '10',
                    y: 5
                }, {
                    name: '11',
                    y: 9
                }]
            }];




        Highcharts.chart('container', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Highcharts multi-series drilldown'
            },
            subtitle: {
                text: 'The <em>allowPointDrilldown</em> option makes point clicks drill to the whole category'
            },
            xAxis: {
                type: 'category'
            },

            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            series: datadrill

        });

    }); 

Answer 3

Would you like to achieve something like this? Please test the drilldown only for the first point (A1).

Demo: https://jsfiddle.net/BlackLabel/wn65fkxj/

I did some changes in your data, like:

  datadrill = [{
      id: 'Details1',
      name: 'A1',
      data: [{
        name: '6',
        y: 14
      }, {
        name: '7',
        y: 19
      }, {
        name: '8',
        y: 21
      }, {
        name: '9',
        y: 34
      }, {
        name: '10',
        y: 5
      }, {
        name: '11',
        y: 9
      }]
    },
    {
      id: 'Details2',
      name: 'B1',
      data: [{
        name: '6',
        y: 14
      }, {
        name: '7',
        y: 19
      }, {
        name: '8',
        y: 21
      }, {
        name: '9',
        y: 34
      }, {
        name: '10',
        y: 5
      }, {
        name: '11',
        y: 9
      }]
    },
    {
      id: 'Details3',
      name: 'C1',
      data: [{
        name: '6',
        y: 14
      }, {
        name: '7',
        y: 19
      }, {
        name: '8',
        y: 21
      }, {
        name: '9',
        y: 34
      }, {
        name: '10',
        y: 5
      }, {
        name: '11',
        y: 9
      }]
    }
  ];

Also, I added null points to trigger different drilldown to each.

API: https://api.highcharts.com/highcharts/drilldown.allowPointDrilldown