Addition of an extra min/max property

[life-of-e]

The linear scale configurations currently have min/max and suggestedMin/suggestedMax. Min/max fixes the scale endpoints and suggestedMin/suggestedMax fixes the scale endpoints at initial draw but allows them to expand based on the data.

I would like to suggest a third type, a form of "not to exceed" which would allow the chart to select the appropriate endpoints until the data reached these values at which point the endpoints would be fixed. It's essentially the reverse of the suggestedMin/suggestedMax.

Rationale: Suppose a set of data collected from a real world system that, on average, is centered on 0 with a standard deviation of 5. Most data will be within two standard deviations from the mean and the vast majority would be within three. It is possible for this real world system to generate valid data points that lie far outside three standard deviations.

The idea then is that the graph would show the data as is but have the scale min/max limited by the new min/max property to the values of +/- three standard deviations. This would allow the graph to grow if data begins to appear that is up to 3 standard deviations away but otherwise autoscale to fit the data that will naturally be much closer to the mean. It also prevents the scale from being stretched out in the event of an extreme datapoint (in the case of a line chart, showing lines that extend beyond the limit) where it would not be correct to filter out the exxtreme point as it is valid data but it's not necessary to represent it accurately on the plot (one can see the lines extending off the edge to know that an extreme point is present but the point itself does not need to be visible).

Implementation: Where suggestedMin/suggestedMax implement this by the basic idea of scale_min = min(data, suggestedMin) or scale_max = max(data, suggestedMax) the new settings would implement in basically the form scale_min = max( min(data), notToExceedMin) and scale_max = min( max(data), notToExceedMax).

[LeeLenaleee]

You can implement this yourself already with a scriptable option for the max property.

const cantGrowBiggerAs = 40;

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'pink'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'orange'
      }
    ]
  },
  options: {
    scales: {
      y: {
        max: (ctx) => {
          let max = Number.NEGATIVE_INFINITY;

          ctx.chart.data.datasets.forEach(dataset => {
            let datasetMax = Math.max(...dataset.data);
            max = datasetMax > max ? datasetMax : max;
          })
          return max >= cantGrowBiggerAs ? cantGrowBiggerAs : null;
        }
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

https://jsfiddle.net/Leelenaleee/mn21ba0c/6/

[kurkle]

Or using afterDataLimits hook:

scales: {
  y: {
    afterDataLimits(scale) {
      scale.max = Math.min(scale.max, cantGrowBiggerAs);
    }
  }
}

https://jsfiddle.net/kejx6yt1/

[life-of-e]

I've got 3.3.2 and the callback didn't work in all cases. I get an error in the console Uncaught RangeError: invalid digits value: NaN. As a test I implemented the callback as below with a constant just as a test. I know there's data below that value because without the callback I have a valid plot. With the callback I get the error.

Upon further testing it works when I use scale.max = 116 but I get the error with scale.min = 116 or any value other than 0 for scale.min

scales:
        {
             'y-axis-1':
            {   
                afterDataLimits: function(scale) { scale.min = 116; }
                type: 'linear',
                title: {
                    text: 'Numbers',
                    display: true,
                    color: '#FF0000',
                },
                position: 'left',
                grid:
                {
                    tickColor: '#FF0000',
                    color: '#FF000080',
                    drawOnChartArea: true,
                    drawBorder: true,
                    borderColor: '#FF0000',
                },
                ticks:
                {
                    color: '#FF0000',
                },
            },

[life-of-e]

I was going to try LeeLenaleee's version but my data is in x/y pairs as in [ {x: val, y: val}, {x: val, y: val} ...] so I would need to change the algorithm around to be able to use the Math functions.

[LeeLenaleee]

You can map the data first to a normal array. So you will get this:

scales: {
  y: {
    max: (ctx) => {
      let max = Number.NEGATIVE_INFINITY;

      ctx.chart.data.datasets.forEach(dataset => {
        let datasetMax = Math.max(...dataset.data.map(e => e.y));
        max = datasetMax > max ? datasetMax : max;
      })
      return max >= cantGrowBiggerAs ? cantGrowBiggerAs : null;
    }
  }
}

[life-of-e]

I'll try that but it seems like it will slow things down with lots of datapoints since it effectively undoes the benefit of the dataset format.

[life-of-e]

Actually I forgot I can use filter to but I see that max is actually called multiple times during a page draw and each time ctx is passed a different object. For my chart, I have one chart and two y-axes. The defined function in max is called four times. The first call has ctx assigned an object of type "chart", the second time it's an object of type "scale". The third and fourth times it's of type "chart" and "scale" again.

I suspect the first pair is when the chart is first drawn which has no datasets assigned. The javascript on the page makes a call to the server to collect the data (this is part of in place updating rather than refreshing the whole page) after which the second pair of calls are made.

But either way why are there two calls to max and with two different objects?

Editing to add that if I remove the code and simply define the function as:

max: (ctx) => { console.log(ctx); }

I see the function called at first render (without datasets) four times (type "chart" followed by three type "scale"). After the data is fetched and an update occurs I get seven calls to min (type "chart" followed by six type "scale", my chart has six datasets total, three on each y-axis). The calls that send in an object of type "scale" always show an id of my first y-axis (called "y-axis-1") for every call to the function even though three of the datasets are assigned to "y-axis-2".