How to set custom y-axis range?

[davidmichaelkarr]

I like the fact that the chart looks at minimum and maximum values and scales the y-axis so that it just shows the minimum and maximum values.

However, I have a situation where I'm drawing multiple charts. They each have different data, and the min/max Y values will vary, but the domain of all them are related, and it would make more sense if I could determine the min/max of ALL the datasets, and then set the min/max of all of the charts to those values. It will result in some charts showing points right at the bottom of the chart, but the consistency within the entire set of charts is more valuable.

It'll be easy enough to iterate through my datasets to determine the min/max values, but how do I set the charts to use those values?

[davidmichaelkarr]

I thought I'd figured this out, but it looks like this will be more complicated to make it "complete". I noticed the example for setting "ticks: { min: N, max:N }", but this results in an odd looking Y axis. I think I have to somehow compute a reasonable step size. What is a reasonable algorithm to compute that?

[davidmichaelkarr]

I would think that since charts.js is computing a reasonable step size from the data, I should be able to just ask it to recompute a step size from the custom min/max value, instead of having to implement a similar algorithm to what the code is already doing.

[davidmichaelkarr]

Note that I'm using charts.js from angular-chart. I noticed the "chart.update()" method, but as I'm using angular-chart, I'm not creating the Chart objects in my javascript, they're created declaratively (by me, at least). In any case, despite the fact that it seems like calling "chart.update()" is the thing to do here, I would think that it would be unnecessary.

[etimberg]

@davidmichaelkarr using ticks.min and ticks.max is the way to do this. What looks odd about it?

You can use ticks.stepSize for a fixed step size

[davidmichaelkarr]

The problem is, it's just not that simple. A simple-minded approach results in an unpleasing rendering. I can't just determine the max Y value of my data and set the ticks.max to that. The proper value to set "ticks.max" to is some value larger than that value, which apparently the charts engine usually computes properly so it renders cleanly.

For instance, let's say a dataset has values ranging from 0 to 480. When I render that normally, it shows Y axis values of 0, 200, 400, and 600, which looks good. Essentially, what I need to set "ticks.max" to is "600", not "480". The effect would be the same as if I had added an additional fake data value of the "max" value, with an X axis value one plus the last value. That would make the chart engine render it in a reasonable fashion (except for one of the data points being fake).

[davidmichaelkarr]

Another way to look at is if I could set a "pretend" Y axis value, so the chart engine would render the chart with the provided data, but also using that pretend data point in the calculations for determining the Y axis labels.

[etimberg]

Hmm, have you looked at ticks.suggestedMin and ticks.suggestedMax? They essentially change the data max and min before the auto fit algorithm runs

[davidmichaelkarr]

Bingo! That's exactly what I needed. It would be useful to rephrase the statement in the docs about these two fields. What it says now is confusing and doesn't say what you said here, which was exactly what I needed to know.

[etimberg]

Ok, I'll retag this as a documentation bug.

[etimberg]

Fixed in #3751