Line Area chart with tooltip for the area

[smorks]

Hello all! I have an existing area line chart, with multiple overlapping areas. My question is, is there a way to have a tooltip when the user hovers over any part of the whole area, rather than just the points?

After reading the documentation, and searching through the discussions and issues, I haven't been able to find any information on this. I've also played with the different interaction types, and none of them seem to do exactly what i want.

I'm thinking maybe a plugin might be the best solution to this? Does anyone have any other ideas?

[kurkle]

See https://www.chartjs.org/docs/latest/samples/tooltip/interactions.html

[smorks]

thanks, i've played with the different interactions but none seem to do what i would like. i'm going to try and see if i can create my own custom interaction that does what i want.

[Udemology]

Hi @smorks out of curiosity. If you would mouse over on top of the area line, what datapoint would be shown? Do you want to show all datapoints or only a specific datapoint.

By default Chart.js only should the point you are nearest. But if anywhere of the shape the tooltip would be triggers. I suspect you want to show all the datapoints matching with that area line?

I think this would be a fun challenge, something out of the ordinary.
If I know what you are looking for perhaps I can make it. Unless you already managed to make one.

[smorks]

not sure if i explained it well, but anytime you hover over an area, ideally it would show a custom tooltip that is specific for the visible area, or in other words, the top-most area that the mouse is over.

and no, i haven't done this yet, it's not a super high priority right now.

[Udemology]

I eventually came up with something like this: https://youtu.be/b9_X1x-J7ro
It might not be the best option but it could be expanded, but it is independent of the existing tooltip structure.

[suconbu]

I had the same problem then found this post.
It worked fine for me when I did the following:

    const chart = new Chart(ctx,
    {
        type: "line",
        ...
        options: {
            ...
            tooltips: {          <<<
                intersect: false <<<
            }                    <<<

I hope this helps.

[smorks]

i tried that, and it's not exactly what we're looking for, since our charts can have multiple areas, and each colored area has a name, and that's the name we want to appear when hovered. i've attached an image to hopefully make it clearer.

so when hovering over the red area, it would display it's name in the tooltip, and so on and so forth.