CODEWITHSUNDEEP
chartschart.js
loliki
loliki

Reputation: 957

ChartJS - line graph, position tooltip

I have the following graph with 3 datasets. Everything works fine except for one small bug. I want to tooltip to be placed only on the first dataset, as it currently is placed on the average position of all datasets.

Here is a screenshot: enter image description here

I know that ChartJS has the positioners function (the one below), but I can't figure out how to ignore the other 2 datasets so the tooltip is sticked only to the first line graph

Chart.Tooltip.positioners.top = function (elements, eventPosition) {
      const tooltip = this;
      return ;
 };

Upvotes: 0

Views: 818

Answers (1)

akif vohra
akif vohra

Reputation: 86

You can also define a custom position function for tooltips. like this,

Chart.Tooltip.positioners.custom = function(elements, eventPosition) {
var x = eventPosition.x;
var y = eventPosition.y;
var minDistance = Number.POSITIVE_INFINITY;
var i, len, nearestElement;
var top_element = elements[0];
for (i = 0, len = elements.length; i < len; ++i) {
    console.log(elements[i].tooltipPosition().y);
    if (elements[i].tooltipPosition().y < top_element.tooltipPosition().y) {
        top_element = elements[i];
    }
}
var tp = top_element.tooltipPosition();
x = tp.x;
y = tp.y;

return {
    x: x,
    y: y
};

};

Once done, you can specify it in tooltips.options.

More information :

https://www.chartjs.org/docs/latest/configuration/tooltip.html#position-modes

Hope it helps!

Upvotes: 1

Related Questions