question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How can I make tooltips align vertically for vertical bar charts?

See original GitHub issue

I 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:

screenshot

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:

screenshot_2

screenshot_1

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:closed
  • Created 4 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
Moghulcommented, Feb 4, 2021

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.

0reactions
kurklecommented, Mar 8, 2021

@etimberg has the correct answer, closing.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found