CODEWITHSUNDEEP
highcharts
cSlater
cSlater

Reputation: 123

Highcharts drilldown to pie chart - Clicking on axis label with multiple series causes pie charts to overlap

I have a stacked column chart that drills down to a pie chart. The drilldown works fine if the data point is clicked. However, the xAxis labels are also clickable which displays the all pie charts for those points in the series. Unfortunately they overlap.

Is there some way to disable drilldown on the xAxis labels?

Here is a JSFiddle: http://jsfiddle.net/uEQL2/

$(function () {    

// Create the chart
$('#container').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: 'Basic drilldown'
    },
    xAxis: {
        type: 'category'
    },

    plotOptions: {
        column : {
            stacking : 'normal'
        }
    },

    series: [{
        name: 'On Time',
        data: [{
            name: 'Location 1',
            y: 5,
            drilldown: 'l1-ot'
        }, {
            name: 'Location 2',
            y: 2,
            drilldown: 'l2-ot'
        }, {
            name: 'Location 3',
            y: 4,
            drilldown: 'l3-ot'
        }]
    },{
        name: 'Late',
        data: [{
            name: 'Location 1',
            y: 5,
            drilldown: 'l1-l'
        }, {
            name: 'Location 2',
            y: 8,
            drilldown: 'l2-l'
        }, {
            name: 'Location 3',
            y: 6,
            drilldown: 'l3-l'
        }]
    }],
    drilldown: {
        series: [{
            type: 'pie',
            id: 'l1-ot',
            data: [
                {name: 'Widget A', y: 2},
                {name: 'Widget B', y: 3},
            ]
        }, {
            type: 'pie',
            id: 'l1-l',
            data: [
                {name: 'Widget A', y: 1},
                {name: 'Widget B', y: 4},
            ]
        }, {
            type: 'pie',
            id: 'l2-ot',
            data: [
                {name: 'Widget A', y: 1},
                {name: 'Widget B', y: 1},
            ]
        },  {
            type: 'pie',
            id: 'l2-l',
            data: [
                {name: 'Widget A', y: 2},
                {name: 'Widget B', y: 6},
            ]
        },{
            type: 'pie',
            id: 'l3-ot',
            data: [
                {name: 'Widget A', y: 1},
                {name: 'Widget B', y: 3},
            ]
        },  {
            type: 'pie',
            id: 'l3-l',
            data: [
                {name: 'Widget A', y: 3},
                {name: 'Widget B', y: 3},
            ]
        }

                ]
    }
})

});

Upvotes: 1

Views: 1262

Answers (1)

Rahul Gupta
Rahul Gupta

Reputation: 10141

This is how you can make x-axis labels unlickable on drilldown. Take a look at this demo: JSFIDDLE

code:

$(function () {    
    (function (H) {

        //For X-axis labels
        H.wrap(H.Point.prototype, 'init', function (proceed, series, options, x) {
            var point = proceed.call(this, series, options, x),
                chart = series.chart,
                tick = series.xAxis && series.xAxis.ticks[x],
                tickLabel = tick && tick.label;
            //console.log("series");
            //console.log(series);

            if (point.drilldown) {

                if (tickLabel) {
                    if (!tickLabel._basicStyle) {
                        tickLabel._basicStyle = tickLabel.element.getAttribute('style');
                    }
                    tickLabel.addClass('highcharts-drilldown-axis-label')          .css({
                        'text-decoration': 'none',
                        'font-weight': 'normal',
                        'cursor': 'auto'
                        }).on('click', function () {
                            if (point.doDrilldown) {
                                return false;
                            }
                        });//remove this "on" block to make axis labels clickable
                }
            } 
            else if (tickLabel && tickLabel._basicStyle) 
            {
            }

            return point;
        });
    })(Highcharts);

    // Create the chart
    $('#container').highcharts({
    .....
    .......

Upvotes: 1

Related Questions