The tooltip in a scrollable container of Highcharts moves along with the content as it scrolls

Question

The tooltip in a scrollable container of Highcharts moves along with the content as it scrolls

I am currently facing an issue with my Highcharts instance that is displayed within a scrollable container. In addition, I have set the tooltip.outside option to true so that the tooltip always appears on top even if it exceeds the chart svg.

The problem arises when scrolling, as the tooltip moves along with the scroll which causes it to render in different positions when hovering over the series.

Is there a solution to this issue? It seems that setting tooltip.outside to false resolves the problem, suggesting that the calculations for tooltip positioning are affected by the scrolling when set to true.

To summarize, there are two main issues:

The tooltip follows the scrolling movement
Upon re-hovering, the tooltip position on the series becomes incorrect

You can view a gif demonstrating the issue here: https://i.sstatic.net/2WeMB.jpg Check out an example here: https://jsfiddle.net/tcqeo415/2/

If you disable the CSS code in the provided example, you will see the correct behavior of the tooltip

javascript highcharts

Answer 1

Answer №1

This response bears resemblance to @ppotaczek's, but offers a distinct approach.

Upon entering a chart with the mouse, the position of the chart is cached. Even if you scroll while keeping the mouse within the chart, the position does not update due to caching.

To address this, utilizing tooltip.positioner and deactivating the caching by setting chartsPosition to null can be effective.

 positioner: function (w, h, point) {
    this.chart.pointer.chartPosition = null;
    return this.getPosition(w, h, point);
  },

This prompts the chart to recalculate its position. It should be noted that this may impact performance.

If you wish to maintain scrolling behavior, refer to @ppotaczeck's solution. The code snippet below removes any tooltips upon scrolling (specifically for the initial example).

document.body.addEventListener("scroll", function() {
  Highcharts.charts[0].tooltip.hide(0);
}, true)

Example: https://jsfiddle.net/gv1m6tjy/

Answer 2

This response bears resemblance to @ppotaczek's, but offers a distinct approach.

Upon entering a chart with the mouse, the position of the chart is cached. Even if you scroll while keeping the mouse within the chart, the position does not update due to caching.

To address this, utilizing tooltip.positioner and deactivating the caching by setting chartsPosition to null can be effective.

 positioner: function (w, h, point) {
    this.chart.pointer.chartPosition = null;
    return this.getPosition(w, h, point);
  },

This prompts the chart to recalculate its position. It should be noted that this may impact performance.

If you wish to maintain scrolling behavior, refer to @ppotaczeck's solution. The code snippet below removes any tooltips upon scrolling (specifically for the initial example).

document.body.addEventListener("scroll", function() {
  Highcharts.charts[0].tooltip.hide(0);
}, true)

Example: https://jsfiddle.net/gv1m6tjy/

Answer 3

Answer №2

The position of a chart remains static because it does not respond to the scrolling event.

To resolve this issue, you can update chart.pointer.chartPosition.top. The code snippet below is specific to the initial chart:

(function (H) {
  H.wrap(H.Tooltip.prototype, 'refresh', function (proceed, points) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    this.points = points;
  });
}(Highcharts));

document.getElementById('container1').addEventListener('mouseenter', function(){
  var chart = Highcharts.charts[0];
  if (chart && chart.pointer && !chart.startChartPosY) {
    chart.pointer.getChartPosition();
    chart.startChartPosY = chart.pointer.chartPosition.top;
  }
});

document.getElementById('outer').addEventListener('scroll', function(e){
  var H = Highcharts,
    chart = H.charts[H.hoverChartIndex],
    tooltip = chart.tooltip;

  if (chart && chart.pointer) {
    chart.pointer.chartPosition.top = chart.startChartPosY - this.scrollTop;
  }

  if (tooltip && !tooltip.isHidden) {
    tooltip.refresh(tooltip.points);
  }
});

See the live demonstration here: https://jsfiddle.net/BlackLabel/ao0c21g6/3/

For more information, refer to the documentation: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

Answer 4

The position of a chart remains static because it does not respond to the scrolling event.

To resolve this issue, you can update chart.pointer.chartPosition.top. The code snippet below is specific to the initial chart:

(function (H) {
  H.wrap(H.Tooltip.prototype, 'refresh', function (proceed, points) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    this.points = points;
  });
}(Highcharts));

document.getElementById('container1').addEventListener('mouseenter', function(){
  var chart = Highcharts.charts[0];
  if (chart && chart.pointer && !chart.startChartPosY) {
    chart.pointer.getChartPosition();
    chart.startChartPosY = chart.pointer.chartPosition.top;
  }
});

document.getElementById('outer').addEventListener('scroll', function(e){
  var H = Highcharts,
    chart = H.charts[H.hoverChartIndex],
    tooltip = chart.tooltip;

  if (chart && chart.pointer) {
    chart.pointer.chartPosition.top = chart.startChartPosY - this.scrollTop;
  }

  if (tooltip && !tooltip.isHidden) {
    tooltip.refresh(tooltip.points);
  }
});

See the live demonstration here: https://jsfiddle.net/BlackLabel/ao0c21g6/3/

For more information, refer to the documentation: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

The tooltip in a scrollable container of Highcharts moves along with the content as it scrolls

Answer №1

Answer №2

Similar questions

What is the method for retrieving a value from my Node.js module once it has been modified by an asynchronous function?

A guide on implementing a .click function with jQuery

The horizontal overflow in the HTML code was unsuccessful

The clingy navigation bar hinders smooth scrolling to the content

Data loss from AngularJS multipartForm directive when redirecting to different routes

Tips on connecting data within a jQuery element to a table of data

Guide to aligning a component in the middle of the screen - Angular

Raspberry Pi encountering a TypeError with Node.js async parallel: "task is not a function" error

What is the best way to display a nested JSON object structure?

Ways to prevent an empty iframe from triggering a load event upon injection

Angular routes cause a glitch in the Bootstrap navbar, causing it to shift to the left on certain active

What is the best way to send data to a view in Laravel using Ajax?

Discover anew the means to revive JavaScript and Ajax call towards the controller without necessitating any user click within the captivating Razor View of MVC 4

Is there a way to display the background when the popover is visible and hide it when the popover is hidden?

The LoopBack framework encountered an issue where it could not execute the 'post' method due to being undefined

Is it possible to transfer data from javascript to php through ajax?

Troubleshooting three.js problem: Unexpected application malfunction in Chrome due to outdated code incompatible with the latest three.js library

Incorporating Paged.JS functionality into a React/JS web application

Does Internet Explorer 10 support the FormData object?

Executing PHP to capture and showcase the HTTP request received from one page onto another