Skip to content
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

[BUG] Barchart: setting xaxes 'type: time' is causing bars to be drawn off canvas. #5312

Closed
cmflynn opened this issue Mar 2, 2018 · 8 comments

Comments

@cmflynn
Copy link

cmflynn commented Mar 2, 2018

Expected Behavior

All bars should be drawn on canvas and visible.

Current Behavior

Currently, the bars at the beginning and end of the datasets are being drawn off canvas.

Possible Solution

Currently can be fixed by removing type: 'time' and letting chartjs infer the type.
Also can be "fixed" by adding offset: true to the x-axis, however, this adds large margins to the start and of end of chart and looks really bad.

Steps to Reproduce (for bugs)

jsfiddle

  1. comment out line 68 type: 'time'

Screenshot:

image

Environment

  • Chart.js version: 2.7.2
  • Browser name and version: Chrome Version 64.0.3282.186 (Official Build) (64-bit)
@simonbrunel
Copy link
Member

Your fiddle doesn't work for me (no data displayed), but the screenshot is the expected behavior when offset: false (aligned on ticks, ticks at start and end) meaning that the first and last bars are half displayed. That's why offset is by default true but then maybe there is a bug with it (certainly related to #4658).

Can you fix your fiddle and keep offset: true?

@cmflynn
Copy link
Author

cmflynn commented Mar 2, 2018

@simonbrunel did you access the fiddle in firefox? It doesn't work in FF for some reason. I tested in chrome and it works. *EDIT: The daily chart works in FF. The monthly doesn't i'm assuming because moment js complains about the date format in the monthly view.

I updated the fiddle with another chart, whee the data is daily, and you can see the rather large margins.

@cmflynn
Copy link
Author

cmflynn commented Mar 2, 2018

Here's a screenshot of how it looks in my application where I can change the number of days displayed. As you can see of the offset is much more pronounced.

image

@nagix
Copy link
Contributor

nagix commented Mar 6, 2018

I have forked and fixed @codyflynnNC's fiddle: https://jsfiddle.net/nagix/oyeu2yzt/. With offset: true, all bars are drawn inside as expected.
The problem of the large offsets on the both side will be fixed with #4658. See https://jsfiddle.net/nagix/a8jcqd4a/.

@schlachtzeuger
Copy link

I think I have the same issue, but only when I set time.min.

Here's what my chart normally looks like:
chart_normal

Now when I set time.min, it draws out of the chart:
chart_time min

But also if I set offset=true, there are several points where they should not be:
chart_time min_offset true

Please fix this soon! And by the way: Great work, I really enjoy working with Chart.js!

Max

@jledentu
Copy link

I confirm the issue: offset: true is not applied when a min/max is set.
Here is a fiddle:

https://jsfiddle.net/ntfxds2o/3/

I you comment the line:

time: { min: '2019-01-01T00:00Z', max: '2019-01-10T00:00Z' },

then the offset is correctly applied.

I think that the offset should take min/max into account.

@jledentu
Copy link

jledentu commented Oct 18, 2019

I was writing a PR, but actually it seems this has been fixed by #6264

@benmccann
Copy link
Contributor

I filed a bug for the issue @schlachtzeuger mentioned, which still remains #6540. I added some info there in case anyone wants to try fixing it

I'll close this issue since the offset bug has been fixed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants