Highcharts - How to remove drilldown link on empty items?

Question

I'm using Highcharts Stacked column and I need to remove drilldown link when some item is empty.

Preconditions:

• Use value 0 or null when some item is empty because it's necessary to sort the chart columns.
• Some columns may have drilldown and others not, depends on the data.

Please refer to the jsfiddle example: http://jsfiddle.net/tsenffor/

How to reproduce:

• Below the chart, uncheck the the "CCC" label.
• Note that "Name 4 column" has no value, but the drilldown link is enabled. See the image below.

If possible hide the empty column, but I still need this value set 0 or null in the code because the columns sorting.

Find the related columns sorting issue here.

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Highchart test'
            },
            stackLabels: {
              enabled: true,
              style: {
              	fontWeight: 'bold'
            	}
           }
        },
        legend: {
            enabled: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'AAA',
            data: [{
                name: 'Name 1',
                y: 5,
                drilldown: 'Name1AAA'
            }, {
                name: 'Name 4',
                y: 0
            }, {
                name: 'Name 3',
                y: 2
            }, {
                name: 'Name 2',
                y: 2
            }]
        }, {
            name: 'BBB',
            data: [{
                name: 'Name 1',
                y: 10,
                drilldown: 'Name1BBB'
            }, {
                name: 'Name 4',
                y: 0
            }, {
                name: 'Name 3',
                y: 0
            }, {
                name: 'Name 2',
                y: 5
            }]
        }, {
            name: 'CCC',
            data: [{
                name: 'Name 1',
                y: 4,
                drilldown: 'Name1CCC'
            }, {
                name: 'Name 4',
                y: 12,
                drilldown: 'Name4CCC'
            }, {
                name: 'Name 3',
                y: 8
            }, {
                name: 'Name 2',
                y: 1
            }]
        }],
        
        drilldown: {
            series: [{
                name: 'Name 1 - AAA',
                id: 'Name1AAA',
                data: [
                    ['Name 1/1', 2],
                    ['Name 1/2', 2],
                    ['Name 1/3', 1],
                ]
            }, {
                name: 'Name 1 - BBB',
                id: 'Name1BBB',
                data: [
                    ['Name 1/1', 7],
                    ['Name 1/2', 2],
                    ['Name 1/3', 1],
                ]
            }, {
                name: 'Name 1 - CCC',
                id: 'Name1CCC',
                data: [
                    ['Name 1/1', 2],
                    ['Name 1/2', 3],
                    ['Name 1/3', 4],
                ]
            }, {
                name: 'Name 4 - CCC',
                id: 'Name4CCC',
                data: [
                    ['Name 4/1', 4],
                    ['Name 4/2', 5],
                    ['Name 4/3', 3],
                ]
            }]
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.js"></script>

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

Is there a way to do this?

Thanks!

Answer 1

We can use drilldown option to control the drilldown.

 drilldown: {
//for axis label
        activeAxisLabelStyle: {
            textDecoration: 'none',
            fontStyle: 'italic'
        },
//for datalabel
        activeDataLabelStyle: {
            textDecoration: 'none',
            fontStyle: 'italic'
        }
}

Reference:http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/drilldown/labels/

Answer 2

To remove links of x-axis labels use this:

Highcharts.Tick.prototype.drillable = function () {};

Look this:

http://jsfiddle.net/tsenffor/3/