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
Chartjs v2.8 removes latest label on line chart #6154
Comments
This change comes from #5891, considered as a bug fix because the "always display last tick" was reported many times as an issue and because the initial reason of its implementation was a bit obscure. It also made the auto skip behavior weird and not aesthetic in many cases. In 2.8, we decided to "fix" it by making the auto skip logic consistent for all ticks without any special case for the last one. Though, I agree we should support such design, however, the API shouldn't be dedicated to this specific use case, thus I doubt we will consider options like Some suggestions that would need to be debated: autoSkipReverse: true // skip ticks from end to start
// and/or
autoSkip: function({tick, index, ticks}) {
return undefined; // let the auto-skipper decide
return true; // skip it
return false; // keep it
} We could also start nesting auto skip specific options under
|
@simonbrunel I understand the pain here, but if we are going to implement a realtime chart with ChartJs, we must show latest tick. Otherwise end user might think, realtime chart is not in real time, and it's going a few seconds late. That's why it's very important to show last tick. (We update charts every 500 ms, so we can show performance stats in realtime) I also understand It's not easy to offer something which can make everyone happy. But I think it's nice to put an option for backward compability for other people who likes to keep the same behaviour in the future. (Please don't get me like I'm complaining, but consider this as a feedback) Thank you for your great efforts. We love ChartJs :) 💯 |
The reason I don't want to use 2.8 right now because the last label can dissapear |
I wonder if you could just handle manually by removing the last label and adding a new one with the max value of the axis |
@benmccann This is one of our real time chart. I think, we do the same way, removing last label and adding a new date label as string. So if customer looks into this, he does not see latest date. In this case, he might think that, real time chart is 3-4 seconds behind of the time. Also we see now, with v2.8, tooltip squares are empty: It's probably something is changed with 2.8 and we do not send background color of the tooltip or point from the backend. I think that's why it's empty but we will fix it. |
@simonbrunel Thanks for pointing out the commit. I changed that "skipping" line and now I see the latest point. I believe there will be an option to enable this in the next release. Otherwise we can use custom code. |
@yusufozturk chartjs-plugin-streaming may fit your use case as ticks move together with lines and users will easily know it's realtime. |
For empty tooltip squares, set |
I am having the same issues as @yusufozturk as we are also using live data. However, my current fix was to redesign the _autoSkip function to be the code below. As a temporary fix I am using a plugin to swap out the current function on each of the relevant axes. Note: Since we are only using this for the X Axis, this only affects that, however this could be adapted to include yAxis support.
I really like @simonbrunel's suggestion of adding a custom autoSkip function, and I also think that having an autoSkip set of options under the ticks would be very useful to save coding and present multiple implementations. Happy to help implement this. |
Agree: The last label contains very important information in our case, and when the last label is omitted, our graph does not make much sense. We would appreciate an extra option to tune the autoSkip behaviour, to include the last label (versus: spread ticks evenly) |
Having the same problem here. |
My charts reflecting endurance sports activities having 2 x-scales for distance and duration/time. But of course I can understand the reasons for the new autoskip behaviour as well and for other use cases they absolutely makes sense. So, why not just offering both options? |
Hi @simonbrunel, do you have any quick workaround for the latest version to show last label? Apparently autoSkip code is changed and I can't make it work anymore. Thanks! |
Do you have a working example of this anywhere? Codepen or elsewhere? |
The same happens in v3. Is there any elegant solution to this meanwhile? |
i made some changes to @jsphpndr suggestion with autoSkip:true. this is working for me
|
hey guys, this is open for 3 years now, any fix? I have a bunch of years and the last one doesn't always show up, it ends at 2098 or 2099, although the last label is 2100. Changing some options might look fine, 2100 showing, but on a different resolution (zooming in / out), it might disappear again. |
@dannypk found a solution in the last months? can't find anything online.. |
@annavanbohemen hi! I found 2 solutions - one was, having fewer labels! Although not a proper solution, our use case changed, and I had to display each year between 2020 to 2100. Now, we have to show up to 2050 instead of 2100, so there are fewer labels, therefore the chart looks proper now. Anyway, what really helped was changing the label's tick rotation.
At 90 degrees it will look like in this screenshot Can find more about it in docs https://www.chartjs.org/docs/latest/axes/cartesian/_common_ticks.html |
@dannypk Thanks! |
Can you filter the ticks.source's data? And give less options? Like just the one you want to display?
On Wed, Jan 25, 2023 at 17:53, Anna van ***@***.***> wrote:
@dannypk Thanks!
but unfortunately it still doesn't show the last tick when on mobile device. the only way that it shows it always is with ticks.source: data , but then it wil show all ticks and will not skip any. Also not very pretty.
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you were mentioned.Message ID: ***@***.***>
|
It gets string ‘data’ and nog object data |
Updates Chart.js to 2.9.4 for bug fixes and to avoid prototype pollution. Added Chart.min.js from https://github.com/chartjs/Chart.js/releases/tag/v2.9.4. Moment.js from bundle does not seem to be needed. Chart.js 2.8 introduced chartjs/Chart.js#6154, which causes the last X-axis label with "and above" to always be omitted. Add a custom autofit function to calculate our own spacing. Testing: - Examined /admission page with multiple queries admitted. Graph appears to render correctly. Change-Id: Ia4e0da58755b9561ddc75c217ef227a81c80a2a6 Reviewed-on: http://gerrit.cloudera.org:8080/19683 Reviewed-by: Impala Public Jenkins <impala-public-jenkins@cloudera.com> Tested-by: Impala Public Jenkins <impala-public-jenkins@cloudera.com>
Hi guys, I'm finding myself working in similar issues. If you set inside ticks this 2 options you should be good to go.
This will remove un necessary ticks for x and make sure they are horizontal. (Same logic could be applied for y). Along this you can also add |
@simonbrunel 2024 arrived and we still suffer from lack of |
Hey everyone! It worked for me. I use Might be helpful 🙏
|
I've tried to resolve this before but never found this thread and always gave up. My heart sank as I read through, but the very last post, from just last week, is simple and worked perfectly in Chart 3.9.1. Thanks to martsInDenIs. |
Hi,
Chartjs 2.8 removes latest label which makes it harder to understand the chart. I can confirm that this behaviour started with version 2.8. I added two codepens for v2.7 and v2.8 so you can see the difference.
We do not use time scale. Date comes as string from backend and we handle the zooming operations from backend as well.
Here is how it looks in our product:
v2.7:
v2.8:
Expected Behavior
User should see latest label on line chart.
Here is the correct view from v2.7:
https://codepen.io/yusufozturk/pen/NJEKpw
I see latest label here:
Current Behavior
Chartjs 2.8 removes the latest label, and so there is an empty space at the end of the labels.
Here is the issue from v2.8:
https://codepen.io/yusufozturk/pen/Lagwvo
Label is visible on chart but not on the axis:
Possible Solution
I will revert back to v2.7. I don't have any other solution at the moment.
Steps to Reproduce (for bugs)
Create a chart with lots of data points and try to limit width of the chart. So Chartjs will remove some of the labels to fit all labels in to the chart area. But latest version will also remove the latest label.
Environment
The text was updated successfully, but these errors were encountered: