CODEWITHSUNDEEP
javascriptjqueryhighchartstooltip
Neysor
Neysor

Reputation: 3909

How to extend Tooltip Range in Highcharts

How can i extend the Tooltip area in the Combo-Meteogram example, so that the tooltip also shows if you go over the wind-arrows?

I can't find an any option in Highcharts Tooltip which gives me that option.

Upvotes: 0

Views: 586

Answers (1)

Mark
Mark

Reputation: 108517

Those arrows are not plotted but are rendered using the chart.renderer. So you need to trigger the tooltip yourself. See this question here which is kinda close to what you want.

Applying the ideas in that answer modify the the end of the drawWindArrows function like so:

.add()
.on('mouseover', function () {
 chart.tooltip.refresh([Highcharts.charts[0].series[0].points[point.index],
                        Highcharts.charts[0].series[1].points[point.index],
                        Highcharts.charts[0].series[2].points[point.index]]);
})
.on('mouseout', function () {
 chart.tooltip.hide();
});

Here's an updated fiddle.

Note, this isn't perfect. It requires you to mouseover the arrow and not the box. If I have time tonight or tomorrow morning, I'll fix that. :)

EDITS

To fix the problems you mention in your comment, just make the code a bit more dynamic:

.on('mouseover', function () {
    var points = $.map(point.series.chart.series, function(i){
        return i.points[point.index];
     });
     chart.tooltip.refresh(points);
})
.on('mouseout', function () {
     chart.tooltip.hide();
});

To fix the problem I mention, I've added an transparent shape on top of the arrow so that the mouseover will have a larger target:

chart.renderer.circle(x, y, 15)
    .attr({
    'stroke-width': 0,
    stroke: 'rgba(255, 255, 255, 0)',
    fill: 'rgba(255, 255, 255, 0)',
    zIndex: 10
}).add()

Updated example here.

Upvotes: 1

Related Questions