By default CanvasJS adds “1m”, “3m”, “6m”, “YTD”, “1y”, “All” buttons at the top of the chart.
Recently one of our testers noticed that the “YTD” (year to date) button wasn’t behaving as expected. Most people generally assume that when they click a YTD button that it will give them all the readings for the current year in progress. So if for example we are in 2025 then the range would always jump to 2025 and give you all the readings for this year.
This is apparently not what the CanvasJS YTD button does. After some experimentation I realized that what it is doing instead is taking the current range’s “end date” and then moving the associated range’s “start date” to the beginning of the same year as the “end date”. Myself and others find this very unintuitive. This can be seen easily by looking at your default JSFiddle.
The other range buttons appear to behave in a similar fashion. These are perhaps mildly less unintuitive as there are perhaps less expectations for how they should behave but nonetheless they too can be a bit confusing until you understand how they were designed.
I would consequently propose that this confusion be addressed in some way by the CanvasJS team. Possible ways of improving this situation include: removing these buttons by default, improving their default label text so their functionality is more obvious, explaining their behavior in the documentation, changing their functionality to be just the “last 1m”, “last 3m”, etc. or some combination of these improvements. I’ll obviously leave this to your own judgement.
For now, I am aware of how I can disable these buttons and will likely be removing them from our product.
Regards,
Chris
.
