In Highcharts drilldown charts, Custom Formatting of X-Axis label displays the label with underline even in the last level

Question

I have a chart drawn using Highcharts API, which has two series and multiple levels of data shown using DrillDown feature of the API. When i tend to modify the default Axis label format using formatting property and by setting useHTML 'true', the labels are displayed with underline even in the last level which is not the expected behaviour.

 xAxis: {
        type: 'category',
        labels: {
            rotation: -45,
            formatter: function (e) {
                return '<div class="chartXAxisLabel" title="' + this.value + '" ><span>' + this.value + '</span></div>';
            },
            useHTML: true
        },
        title: {
            enabled: true,
            align: 'high'
        }
    },

The issue could be seen in the below fiddle link.

http://jsfiddle.net/6LXVQ/418/

Halvor Holsten Strand Halvor Holsten Strand · Accepted Answer · 2015-03-29T16:59:45

I find it odd that only adding/removing useHTML: true causes this problem by itself. The formatter does not need to be involved (as shown in this minimal example).

I found that adding this minimal code fixes the problem (JSFiddle example with your code):

xAxis: {
    labels: {
        useHTML: true,
        style: {
            "text-decoration": "none"
        }
    }
}

I'm not exactly sure why, but it removes the underline from the span element that is causing it.

In Highcharts drilldown charts, Custom Formatting of X-Axis label displays the label with underline even in the last level

1 Answers