Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
fix(charts): Adjust pf-core vars & add tooltip examples #2497
Adjusted/added pf-core vars to ensure custom tooltip colors are displayed correctly. Previously, the background and label were the same black color, so the text wasn't visible.
We were also applying old, hard coded color properties over the pf-core vars, so the theme had to be cleaned up a bit.
Also modified an area chart example, showing how width can be responsive (per @priley86 's request).
This looks good to me and should resolve my default background issue in #2476 (so I'd be able to use the same theme).
The responsive use case you've added here should help. I'd argue we should try to add those examples for test purposes for each Chart in the future w/ the way these svgs are scaling. I think what's potentially still different about my use case in 35 is I'm expected to render around 30 x-axis labels responsively (days of the month). When I compress this chart for mobile, I'm seeing some weirdness with the Voronoi tooltip hover, where if bars become close, the first bar hovered is still showing it's tooltip when I move to hover a second bar. I'm not seeing this same buggy behavior happen when I pass the default
I will continue to experiment here, but it's just something to test w/ VoronoiContainer in the future. Not sure if you would see the same thing here if trying to render several x-axis labels.
Thank you for the reviews!
@karelhala Yes, please use voronoiDimension for your dependent axis. Or, try the approach used by the stack chart example.
@priley86 Although, a voronoi container appears to work with bar charts, it may not be best when wrapped by a stack chart? I've also encountered some (non-mobile) jumpy hovers with the stack example.
You could try working with a basic container, instead? I've also modified the stack chart example to show an alternative way to apply tooltips without voronoi container -- that fixed the tooltip hover behavior.