Highcharts Column chart with drilldown, remove hyperlink like formatting from x-axis labels

Question

I am using column chart with drilldown. Here is my JSFIDDLE.

Now my problem is:

I want to remove hyperlink like formatting from the labels on x-axis and dataLabels

As you would be able to notice from my fiddle that I have already tried to apply formatting on the x-axis labels by using the code like:

xAxis: {
         type: 'category',
         labels:{
               style:{
                    color: 'red',
                    textDecoration:"none"
               }
         } 
      },

and used following code to format dataLabels:

plotOptions: {
                    series: {
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true,
                            format: '{point.y:.1f}%',
                            style:{
                               color: 'blue',
                               textDecoration:"none"
                            }
                        }
                    }
                }

But the problem is: The formatting only works for that x-axis labels and dataLabels that does not have drilldown data. While it works on all the x-axis labels and dataLabels of drilldowned data !

Useful references: http://api.highcharts.com/highcharts#xAxis.labels.style http://api.highcharts.com/highcharts#series.data.dataLabels

Any help would be greatly appreciated !

sandeep rajbhandari · Accepted Answer · 2018-05-15 10:12:59Z

5

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/][1]

answered May 15, 2018 at 10:12

sandeep rajbhandari

1,3061 gold badge12 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rahul Gupta · Accepted Answer · 2014-06-30 09:57:42Z

4

You need to overwrite drilldown function, to avoid add action to labels.

http://jsfiddle.net/phpdeveloperrahul/FW64T/

 (function (H) {
    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;

        if (point.drilldown) {

            // Add the click event to the point label
            H.addEvent(point, 'click', function () {
                point.doDrilldown();
            });

            // Make axis labels clickable
            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;
                    }
                });

            }
        } else if (tickLabel && tickLabel._basicStyle) {
        }

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

edited Jun 30, 2014 at 9:57

Rahul Gupta

10.2k7 gold badges66 silver badges69 bronze badges

answered Jun 27, 2014 at 14:04

Sebastian Bochan

37.6k3 gold badges51 silver badges75 bronze badges

5 Comments

Rahul Gupta Over a year ago

Thanks Sebastian Bochan ! How can I do the same thing with dataLabels also ? If you can give me the updated code, then I will accept your answer

Rahul Gupta Over a year ago

Thhhhhhaaaannnnnkkkkksssss.... a lot my dear friend ! Can you please provide the links for further reference on prototyping ?

Sebastian Bochan Over a year ago

I wrap function from drilldown.src.js

katalin_2003 Over a year ago

@SebastianBochan any idea why I get Uncaught TypeError: point.doDrilldown is not a function ? I get that in your example too.

Ramon Vasconcelos Over a year ago

This code is broken. If you open a drill down by clicking a column and then clicking on drillUp button, it will rebuild all links except the last one. Also console is returning an error.

johanthuresson · Accepted Answer · 2014-11-19 00:44:37Z

3

Or you can do it with css

.highcharts-drilldown-axis-label{
text-decoration: none !important;
}

answered Nov 19, 2014 at 0:44

johanthuresson

5803 silver badges5 bronze badges

Comments

Fernando Cisneros · Accepted Answer · 2018-08-17 16:30:13Z

2

{...
series: [],
drilldown: {
    activeAxisLabelStyle: {
        cursor: 'default',
        color: '#3E576F',
        fontWeight: 'normal',
        textDecoration: 'none'
    },
    activeDataLabelStyle: {
        cursor: 'default',
        color: '#3E576F',
        fontWeight: 'normal',
        textDecoration: 'none'
    }
}
}

answered Aug 17, 2018 at 16:30

Fernando Cisneros

1091 silver badge2 bronze badges

1 Comment

L_J Over a year ago

While this code may answer the question, providing information on how and why it solves the problem improves its long-term value.

Luís Cruz · Accepted Answer · 2015-06-17 12:51:24Z

0

In drilldown just put

activeAxisLabelStyle: {
    cursor: 'pointer',
    color: '#0d233a',
    fontWeight: 'bold',
    textDecoration: 'none'          
}

edited Jun 17, 2015 at 12:51

Luís Cruz

15k16 gold badges71 silver badges100 bronze badges

answered Jun 17, 2015 at 12:33

sabarinath vylassery

1

1 Comment

Sai Over a year ago

Note: It just change the looks, not the behavior. Means, though it makes label look normal, if the user accidently clicks on it, hyperlink behavior happens.

veuncent · Accepted Answer · 2015-07-30 11:58:40Z

In case you have a chart where only a selection of columns have drilldowns, Sebastian Bochan's answer needs to be modified so that all columns have the same label:

(function (H) {
            //DATALABELS
            H.wrap(H.Series.prototype, 'drawDataLabels', function (proceed) {
                var css = this.chart.options.drilldown.activeDataLabelStyle;
                proceed.call(this);

                css.textDecoration = 'none';
                css.fontWeight = 'normal';
                css.cursor = 'default';
                css.color = 'blue';

                H.each(this.points, function (point) {

                    if (point.dataLabel) { // <-- remove 'point.drilldown &&' 
                        point.dataLabel
                            .css(css)
                            .on('click', function () {
                                return false;
                            });
                    }
                });
            });
        })(Highcharts);

Also note that these settings are global, so also affect any other charts you may have.

Collectives™ on Stack Overflow

Highcharts Column chart with drilldown, remove hyperlink like formatting from x-axis labels

6 Answers 6

Comments

5 Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

5 Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related