Chart.js: [BUG] Scatter chart with large dataset does not properly fill chart width

[scmyers11]

It seems that when working with semi-large datasets, (I have 204 points) the scatter chart does not use up all of the horizontal space afforded to it. This makes for very compact hard to read charts and visually looks very bad. I am using chart.js latest (v 2.4.0) on macOS and Chrome. Here is a link to the codepen where you can see exactly what is happening, along with a version of my dataset to test with.

http://codepen.io/anon/pen/WRbRWW

Please let me know if you need any other details.

EDIT: Based on more reading of closed issues, this could be a problem with a calculation of how far apart to space each datapoint based on the width of the canvas. See https://github.com/chartjs/Chart.js/issues/248

[etimberg]

@scmyers11 the issue here is that the x axis range is auto scaled up so that the right edge is at 250. If you set an explicit maximum, this will not occur

I forked it and added an explicit maximum at the last point (x == 203) and it turned out better
http://codepen.io/etimberg/pen/LxEQrw

[scmyers11]

@etimberg I appreciate the help and that does solve my immediate problem. However, I am curious if this is still a bug? Auto scaling the right edge to more than the number of data points seems counterintuitive. I might be missing some context to be able to understand the reasoning but it seems like at draw time, the chart has a set size as defined by the canvas and the number of ticks. There doesn't seem to be a reason to be larger than that, that I can see.

[etimberg]

I think this is a sort of a bug. The scatter chart uses the same numerical axis type for both the x and y axes. On the y axis, this type of scaling is common place. I can see why it causes a problem on the x axis though.

On idea is that we add some kind of configuration to allow changing how this occurs. We could then have the x axis fit to only the data and not increase. The code that increases the size is https://github.com/chartjs/Chart.js/blob/master/src/core/core.ticks.js#L62

[ghost]

@etimberg I am also interested in this. Is there a tracking issue for this?

[ghost]

@etimberg Do you have any news on that?

[etimberg]

@mgrandl I haven't had the chance to look at this at all. The solution to this would be to define new option(s) to https://github.com/chartjs/Chart.js/blob/master/src/core/core.ticks.js#L52 and use that to configure the expected behaviour. I'm not sure exactly what the API would look like, but a PR is a good starting point for a conversation

[etimberg]

Proposal for solving this in the v2.7 timeframe:

1. Add a new config option to the linear axis to control the range calculation/
   Option has the a value from an enum with the following possible options:
   
   
   
   • Expand
   
   
   • Exact
   
   

The default would be Expand. Setting the data range calculation mode to Exact we wouldn't expand the range and just fit the ticks to some old values.

[ghost]

@etimberg Sounds perfect.

[benmccann]

Sounds quite similar to the scale.bounds feature that was implemented in https://github.com/chartjs/Chart.js/pull/4556 (docs are being added in https://github.com/chartjs/Chart.js/pull/4592). That was only for the time scale, but if we implemented it for the linear scale a well, we'd probably want to make it consistent with the time scale option

[simonbrunel]

Even better, the time and linear scales should share the exact same code :)

[etimberg]

+💯 for sharing code between time and linear scales 😄