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] Labels not aligned properly on line graph/stepSize ignored? #4104

Closed
sbowman opened this issue Apr 3, 2017 · 6 comments
Closed

[BUG] Labels not aligned properly on line graph/stepSize ignored? #4104

sbowman opened this issue Apr 3, 2017 · 6 comments

Comments

@sbowman
Copy link

sbowman commented Apr 3, 2017

Expected Behavior

When creating a line graph spanning 720 minutes, the vertical lines should be evenly spaced.

For smaller data sets on other graphs (7, 48), this worked fine, i.e. the labels are evenly spaced. Didn't need stepSize or fixedStepSize, only maxTicksLimit.

Current Behavior

Currently, the last line/right edge is stretched to the right so the last segment is double the size of the other segments. Labels are not evenly spaced (using momentjs to create per-minute labels).

screen shot 2017-04-03 at 2 30 38 pm

Steps to Reproduce (for bugs)

  1. Create a data set with 721 values (0 through and including 720).
  2. Create 721 labels using momentjs, representing each minute from twelve hours ago until now.
  3. Set points[0] = 0 and points[720] = 0.
  4. Configure the graph with xAxes:
	this.chart` = new Chart(el, {
	  type: 'line',
	  options: {
	    animation: false,
	    scales: {
	      xAxes: [{
	        ticks: {
	          maxTicksLimit: 13,
	          fixedStepSize: 60,
	          stepSize: 60
	        }
	      }],
	      yAxes: [{
	        ticks: {
	          beginAtZero:true
	        }
	      }]
	    }
	  }
	});
  1. Submit the labels and data points to the graph.

Note that it doesn't obey the fixedStepSize or stepSize. In the sample screenshot, the ends line up, 2:30 AM and 2:30 PM, but the divisions are off. 2:30 AM to 3:26 AM is not 60 minutes.

I also tried using 719 values, instead of 720. Same results.

Environment

  • Chart.js version: 2.5
  • Browser name and version: Chrome 56.0 OS X El Capitan
  • Link to your project: private
@sbowman
Copy link
Author

sbowman commented Apr 3, 2017

I believe this is something to do with the size of the data set. If I have more than around 100 data points in my graph, the last section skews.

@etimberg
Copy link
Member

etimberg commented Apr 4, 2017

@sbowman what kind of x axis are you using? From the snippet above it looks like you're using the default category axis but the values are specified as dates and times. Have you tried the time axis?

options: {
  scales: {
    xAxes: [{
      type: 'time'
    }]
  }
}

@sbowman
Copy link
Author

sbowman commented Apr 4, 2017

I was just using string values, not time.

@sbowman
Copy link
Author

sbowman commented Apr 4, 2017

Refactored using type: 'time'...working as expected now. Thank you for that pointer; not sure how I missed the "time" axis. Also made my code much cleaner!

@etimberg
Copy link
Member

etimberg commented Apr 4, 2017

Awesome, can I close this out?

@sbowman
Copy link
Author

sbowman commented Apr 5, 2017

Sorry...thought I tapped the close button.

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

No branches or pull requests

2 participants