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

Offset ignored when min and max axis values are set #5618

Closed
shanwpf opened this issue Jul 6, 2018 · 9 comments · Fixed by #6264
Closed

Offset ignored when min and max axis values are set #5618

shanwpf opened this issue Jul 6, 2018 · 9 comments · Fixed by #6264

Comments

@shanwpf
Copy link

shanwpf commented Jul 6, 2018

Bar charts with a date x-axis does ignores offset: true when time.min and time.max are set.

Expected Behavior

Offset should work even if time.min and time.max are set.

Current Behavior

If I let Chart.js auto scale the graph, it works just fine. However, my project involves using a date range picker which sets time.min and time.max to restrict the range of the graph, which causes half of the first and last bars to be cut off as there is no offset.

Auto scaling
screen shot 2018-07-06 at 12 29 14 pm

With time.min and time.max
screen shot 2018-07-06 at 12 29 31 pm

Environment

  • Chart.js version: 2.7.2
  • Browser name and version: Chrome 67.0.3396.99
@benmccann
Copy link
Contributor

@nagix FYI since you've been working on some related issues

@DharanCharts
Copy link

can I get ,transparent doughnut chart truncate half of the chart using css with min and max limits with value

Min value : 0 and Max value : 100 and value is 60

@nwkeeley
Copy link

@shanwpf Did you ever get this figured out? I am having the exact same problem.

@shanwpf
Copy link
Author

shanwpf commented Dec 26, 2018

@nwkeeley Nope, I ended up just rolling with it since the chart isn't a crucial part of my project. I suggest using another charting library if this bothers you.

@nwkeeley
Copy link

Thanks @shanwpf .. I can roll with it just like you..... - just something QA kicked back to me.

For others in the future.... the bound: 'data' works really well.... but I needed to use the time.min/max
A hack I thought of was to inject a data point at my time.min/max but that seems a bit messy..

I to shall roll with it for now.

@simonbrunel
Copy link
Member

@shanwpf @nwkeeley can you guys share a codepen or jsfiddle that showcases your issue?

@shanwpf
Copy link
Author

shanwpf commented Dec 26, 2018

I no longer have access to the code I wrote. Maybe @nwkeeley can provide a test case.

@nwkeeley
Copy link

My implementation is a bit complex but let me see what I can put together to demonstrate the issue - might not be until tomorrow

@ikbenpinda
Copy link

ikbenpinda commented Jan 18, 2019

@simonbrunel https://codepen.io/anon/pen/EGBEBq Does this work as a repro? Uncommenting time.min/max on lines 31/32 should reproduce the issue.

I'm having the same issue. Elsewhere this was fixed by removing the timezone suffix, but for me these are simple 'YYYY-MM-DD' formats, so that doesn't work for me.(edit: this refers to a slightly different issue related to offset)

Update: One workaround of sorts is to set the time to 12:00(pm), e.g. min: '2018-05-06 12:00:00'. This will align the bars similar to how offset usually works. However, hovering at the sides of the Y-axes shows the partial bars are still there, just not visible. ticks.mirror does not change this either.

It looks like the X-axis is overlapped by the Y-axis? I don't know. I've updated my repro.

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.

7 participants