2
votes

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/

1

1 Answers

1
votes

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.