How can I make tooltips align vertically for vertical bar charts?
See original GitHub issueI have an issue with bar charts’ tooltip setup being horizontal in most cases. I prefer the tooltip to be above the bar, ‘pointing’ down at the bar with its caret, and if it’s coming off the screen, it should then be inside the bar, ‘pointing’ to the top of the bar.
The reason I want this is because the way it works now causes problems with stacked bar charts, like this:
I tried setting tooltips.yAlign to bottom but that seems to have problems with caret position and not adapting to cases where it comes off the screen, like so:
So… Is there a way to get a vertical tooltip on vertical bar charts that works correctly without making a fully custom tooltip implementation?
tooltips: {
enabled: true,
mode: 'nearest',
displayColors: false,
callbacks: {
title: function () {
return null;
},
label: function (tooltip) {
// This is a variable that's irrelevant to the issue but I didn't want to exclude anything from the snippet
return tooltip.value + (isShowingPercentages ? '%' : '');
}
}
}
Issue Analytics
- State:
- Created 4 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
Chart.js version 2.5 tooltip align items horizontally
Currently values are displaying vertical, i want to display horizontally. Some of the advance charts has 20 values. Please check the below ...
Read more >How to add charts to tooltips - Datawrapper Academy
To achieve this, we first add a table within the tooltip. The first column contains the categories ("women", "men"), and the second one...
Read more >Orientation - How tooltips behave - Celonis Documentation
For example, bar , line , area all have "vertical" as a default orientation while marks of type text and point have default...
Read more >Tooltip alignment - Highcharts official support forum
When the cursor line crosses a serie "AreaRange" the tooltip alignment changes vertically (middle alignment instead of bottom like in the other ...
Read more >hover - When hovering over a charts, which arrow alignment works ...
I think you should go with the top solution for both the bar and the line chart. They are placed well enough to...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I don’t know if this is still an issue in more recent implementations but it hasn’t been marked as resolved so…
My solution is that we have an ugly tooltip right now in production.
@etimberg has the correct answer, closing.