Add custom tooltip for x axis label on hover action

Question

In our Angular application we are using Highcharts. In that we are showing xAxis labeles as below

When the number of items are more and we have long text, we are showing part of the text and want to show tooltip/tilte on hover like below.

I tried something like below:

this.chartOptions.xAxis['labels'].events.mouseover = (e) => {
    e.chart.renderer.label("tooltip text", e.x, e.y, 'rectangle').css({
    color: '#FFFFFF'
})
.attr({
    fill: 'rgba(0, 0, 0, 0.75)',
    padding: 8,
    r: 4,
})
.add()
.toFront();
}

But, here the problem is the event does not have any renderer in it. So, not able to add the custom label.

I have also tried multiple ways using axisTitle, formatter etc.. (Please check this link for reference)

Please help me solve this problem.

Thanks...

Answer 1

Use a basic function instead of an arrow one and refer to a chart by this keyword:

mouseover: function(e) {
    this.chart.renderer.label("tooltip text", e.x, e.y, 'rectangle').css({
            color: '#FFFFFF'
        })
        .attr({
            fill: 'rgba(0, 0, 0, 0.75)',
            padding: 8,
            r: 4,
        })
        .add()
        .toFront();
}

---

Live demo: http://jsfiddle.net/BlackLabel/dfazcwyr/