New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
min-height for bars in bar chart #2959
Comments
Also need help on this. Any progress on a solution ? |
@barsh @cidylle: #3400 does not implement the |
@simonbrunel Thanks a lot for your input. Do you mean to use a different In my case the bar would not even appear on the chart (even a pixel of it) if the smallest values are less than 1% of the biggest values in the datasets. So there's actually nothing to hover over even if the data is actually there, it appears as it is 0. Would love a clarification or a hint if possible for these use cases. Thanks. |
@simonbrunel I forked the codepen listed above and experimented with the |
@barsh the new tooltip options will be released in version 2.4, available in the next few days. I uploaded a custom build for testing: http://codepen.io/anon/pen/qqBNgd ( @cidylle yes, but mainly by using |
@simonbrunel What would happen in the case of a stacked chart with Also you mentioned this would work for of an almost inaccessible bar. In my case the bar does not show up (for values too small relative to max value). Would the enhancements work in that case? Is there any way to show just a line to indicate to the user that there is at least a non-zero value there ? For example this other charting library shows a line you can hover over even for values that are extremely small. That is the behavior I would like in chart.js, however for the same set of values, no bar or line shows up. |
@cidylle you can use this fiddle to experiment the new modes / intersect options with a stacked bars containing value '0'. I hope it will give you a good idea of these new features. The |
Any updates/plans for a PR for the |
I'm not sure what the best way to implement min height would be. A simple approach of simply rendering the bar larger in some cases would technically make the chart show incorrect information (the bar would look larger than it actually was until a user hovered over it and read the tooltip). That could be misleading. Another option could be to have the y scale start at a negative value and fill to the bottom rather than filling to 0 (use a mode to toggle this, like how line fill is configurable) |
In my use case, I am using the data labels plugin to render the X-axis text atop the bar instead of in the axis. This makes the X-axis text unreadable without a minimum width. Misleading data is completely worth the trade-off of unreadable data. |
Where are the bar heights set? I'd rather mod the code to set a min pixel value than have non-zero value bars that are completely invisible. Even the lowest value should have minimum visibility. Zero values are one thing, but non-zero values not visible on the chart...? In this chart, the invisible bar value is not 0, but actually 1600, yet not visible. A suggestion based on the attached image. if lowest bar value height in pixels is < 1 (or something... border count?) bar height = bar value as % of first tick. In the above image, would make it 3px. Personally, I agree there should be a min-height option. That is what developers logically look for. Please add min-height to datasets.
That would allow to handle the issue by calculation or just a static px. UPDATE: Found another post containing a plugin to handle 0 value bars. Modified it and is working to do what is needed.
|
what is the final recommended fix? |
@nmz787-intel Want to post your code? Seems to work fine as per https://www.chartjs.org/docs/latest/charts/bar.html#styling |
here's a codepen example showing my issue: I filed a new ticket: |
It's very difficult to get your mouse in the right spot to make the tooltip to appear in the screenshot below. Is there a way to set the
min-height
to say5px
?Here's the example, try to get the tooltip to appear.
http://codepen.io/barsh/pen/grXXVO
The text was updated successfully, but these errors were encountered: