Highcharts with 3 level

data.js

$(function () {

    // create the chart
    $('#container').highcharts({
        chart: { type: 'column' }, // type charts
        title: { text: '3 Level Charts' }, // title of charts
        xAxis: { type: 'category' }, // x Axis

        legend: { enabled: false }, // rule of legend

        // rule style of plot 
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: { enabled: true }
            }
        },

        // Level 1
        series: [{
            name: 'Region', // title
            colorByPoint: true, // style
            // data of level 1
            data: [{
                name: 'Kota',
                y: 6,
                drilldown: 'city' // bind with level 2
            }]
        }],
      
        // drilldown (Level 2)
        drilldown: {
            // prepare data level 2
            series: [{
                id: 'city', // same as level 1
                name: 'Toko',
                data: [
                    {
                        name: 'Sukabumi', // title
                        y: 7, // n data
                        drilldown: 'smi' // bind with level 3
                    },
                    {
                        name: 'Jakarta', // title
                        y: 4, // n data
                        drilldown: 'jkt' // bind with level 3
                    },
                        ['Bandung', 2],
                        ['Surabaya', 1],
                        ['Aceh', 2],
                        ['Kalimanta', 1]
                ]
                },
                    // level 3
                    {
                        id: 'smi', // same as level 2
                        name: 'Transaksi', // series title
                        data: [
                            {
                                name: 'Surade',
                                y: 2
                            },
                            {
                                name: 'Jampang',
                                y: 3
                            },
                            {
                                name: 'Pelabuhan Ratu',
                                y: 2
                            }
                        ]
                    },
                    {
                        id: 'jkt', // same as level 2
                        name: 'Transaksi', // series title
                        data: [
                            {
                                name: 'Jakarta Barat',
                                y: 1
                            },
                            {
                                name: 'Jakarta Selatan',
                                y: 3
                            }
                        ]
                    }
            ]
        }
    })
});

index.html

<!-- load lib  -->
<script src="http://github.highcharts.com/master/highcharts.js"></script>
<script src="http://github.highcharts.com/master/modules/drilldown.js"></script>

<!-- define container of chart -->
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>