Chart.js: TimeScale xAxis last tick not visible

[peterzebird]

Hello,

See my plunk here : http://plnkr.co/edit/LyWEV9?p=preview

I'm using chart.js 2.0.0 and angular-chart.js last version.

I have a time scale on data for a week but the last tick on Sunday is not visible, not displayed or displayed out of canvas I don't know.

Not sure if this is from Chart.js or angular-chart or how I'm using both but have to try here as I would bet on it more than the angular wrapper (maybe I'm wrong)

Thanks,

[etimberg]

I think this is from the time scale. Bars on time scales are hard to support. I'll try and think of some ways we can improve this.

[peterzebird]

It was "almost" working with Chart.js v2.0.0-beta-2.
Almost because the timestamp of last tick had to be 1ms more than start of the last day (sunday). Except that little manual trick it was fine.

[etimberg]

@peterzebird I upgraded your plunkr to v2.1.2 and it's looking a little better
http://plnkr.co/edit/guSgb1u6rzZITHhIv4VM?p=preview

[etimberg]

Tested this with v2.5.0 and the last tick is displayed. The bars are in a bad position, but at least this issue appears to be fixed. The actual bars on time scale position issue is tracked by a number of other issues such as #2415

[etimberg]

Plunkr with v2.5.0: http://plnkr.co/edit/5HhT4fA27RZCWsHdRDRs?p=preview

[VictorRos]

Hi !

I'm drawing charts with Chart.js 2.5.0 on my project.
Unfortunately, the issue is still in the news. The last item is never shown.

@etimberg Below, a picture coming from your plunker.

Nevertheless, in my case I find a workaround by setting the max value to the last value of labels (containing timestamp) + a delta.

var delta = intervalTimeSelected * nbMillisecondsFromUnitSelected;
chart.options.scales.xAxes[0].time.max = lastValue + delta;

• intervalTimeSelected
  javascript var intervalTimeSelected = chart.options.scales.xAxes[0].time.unitStepSize;
• nbMillisecondsFromUnitSelected
  javascript // We could have a switch on chart.options.scales.xAxes[0].time.unit to determine // nbMillisecondsFromUnitSelected. Here, it's just an example. if (chart.options.scales.xAxes[0].time.unit === "minute") { var nbMillisecondsFromUnitSelected = 60000; }

I update your plunker with my workaround: http://plnkr.co/edit/AHnqqpwL7OajQiWn966Q?p=preview
I change values from $cope.graph.data

[kennyjwilli]

This bug is affecting me as well. Why was this issue closed if it still exists? Is it being tracked elsewhere?

[ampalmer1]

@kennyjwilli I don't believe it is. I've been looking for a fix for hours now. I think the issue is just being ignored.

[etimberg]

@ampalmer1 the solution to this specific issue was fixed in 2.5.0 as the last 'Sunday' tick mark is now visible. Further, when I run the fiddle I created above I can see part of the last bar.

This issue did not cover the fact that the last bar may or may not be visible. There is another issue that covers that.

In general, it seems very unclear how bars on a time scale should behave. Unlike an axis that is built from string labels, a time axis is a continuous range of values. We could have bars nicely spaced at 12:00AM each day, or we could have a bar at 12:00AM and 12:01AM and would need to ensure that they do not overlap but are also both visible to the user and tooltips.

I am happy to look at a PR that improves this, but it needs to be a comprehensive solution rather than a quick fix that only works for certain cases.

[kennyjwilli]

@etimberg Thanks for the reply.

The main issue always linked is #2415. Unless I am misunderstanding the problem, it sounds like it only occurs when data spans multiple years. The issue I (and I assume @ampalmer1 and others) have is the missing last bar. See @VictorRos's plnkr.

There is also #3297 which sounds exactly like this problem but is again linked back to #2415. If that is where this issue is being tracked, I think the title and description should be updated to document the general problem :smile:

[etimberg]

@kennyjwilli #2415 is the one I was thinking of. I will update the title to be more descriptive.