custom scales: Cannot determine type of '${name}' axis.

[sgratzl]

Expected behavior

I'm developing https://github.com/sgratzl/chartjs-chart-geo and I'm in the process to upgrade to chart.js v4. Part of the plugin are multiple new scales types configured in scale keys like xy, size, and color.

e.g.
https://github.com/sgratzl/chartjs-chart-geo/blob/3d92cd17afaeec887d05bf9ccf677a2e0bdab607/samples/albers.html#L40-L50

I expect that I don't to alter the configuration and it keeps working like before

Current behavior

However, I now get this error:

Cannot determine type of '${name}' axis. Please provide 'axis' or 'position' option.

which I don't understand or how I fix it

Reproducible sample

https://codepen.io/sgratzl/pen/GRGzEjb

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

v4.0.1

Browser name and version

No response

Link to your project

No response

[LeeLenaleee]

We dont determine the type of the axis based on the first letter as described in the migration guide here. Only x and y will be picked up by default otherwise you need to specify what kind of scale it is like the error said.

Since you made the ID of your scale xy by setting the key of the scale object to that, chart.js can't infer the type you want it to be so you will need to specify it

[stockiNail]

@sgratzl maybe I'm wrong but it could be enough to add "axis" option in the controllers where the defaults are set.

[stockiNail]

@sgratzl FYI I'm wrapping the geo controller in my lib for GWT/J2CL. I was already setting (with CHART.JS 3.x) the axis option on the geo scales because I need that, it worked.

Projection: axis: 'x'
Size: axis: 'x'
Color: axis: 'x'

[sgratzl]

thx. hm. setting it in the controller wasn't enough. seems like that the axis check is before the defaults from the controller are merged into it. Thus, each time I want to configure this custom scale, I will also have to provide the axis option.

[stockiNail]

I have not checked the code but if it is checking before merging sounds to me not correct. Asa I have time I will have a look.

[yveslange]

Having the same issue here. Any news about this issue ? This is blocking us from moving to version 3 to 4 since a while.

[cunha20]

Hi, I'm running Chart.js version 4.2.1 and adding the below setting in options, it solved the problem.
...
scales: {
gridLines: {
type: 'logarithmic',
position: 'right',
display: false,
},
},
....

[etimberg]

@cunha20 I don't think those options are correct and everything set looks like it would be ignored.

The reason this error occurs is because it happens during the config merge process. Basically to support legacy use cases of having a default category axis for the X and a linear axis for the Y we have to figure out where the axis is.

That being said, reading the code now I think we need to have some escape mechanisms for custom scales that don't have positions (like the color scale in this case)

@LeeLenaleee @dangreen @igorlukanin @kurkle what if we move the error up a bit and only throw it if we can't match the position and there is no scale of that type (where type falls back to id) registered?

[cunha20]

@etimberg in my case, I'm making compatible an App that was using Chat.js 3.9.1 to the latest version and adding the mentioned properties solved the problem in my application. Thanks for the feedback.

[stockiNail]

@etimberg apologize because I had a look some days ago, for @sgratzl issue. I have seen that the main issue could be that if you set axis option in custom scale default, this is ignored or better, the determineAxis function checks the chart config without falling back to the defaults. And this is happening in mergeScaleConfig function. Maybe, as first workaround, we could change the code in order to check axis option in chart config and scale default. In this way, I can develop my scale and set axis in my default.

I have tested the following:

    const tempScaleConf = mergeIf(Object.create(null), [scaleConf, defaults.scales[scaleConf.type]]);
    const axis = determineAxis(id, tempScaleConf);
    const defaultId = getDefaultScaleIDFromAxis(axis, chartIndexAxis);
    const defaultScaleOptions = chartDefaults.scales || {};
    scales[id] = mergeIf(tempScaleConf, [{axis}, defaultScaleOptions[axis], defaultScaleOptions[defaultId]]);

and my scale/chart sample:

class MyScale extends Chart.LinearScale {
    /* extensions ... */
};
MyScale.id = 'color';
MyScale.defaults = {
  axis: 'y'
};
Chart.register(MyScale);
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            yAxisID: 'color'
        }]
    },
    options: {
      scales: {
        color: {
          type: 'color'
        },
        y: {
          display: false,
        },
        x: {
        }
      }
    }
});

Of course, you could add a specific escape for custom scale but maybe it could be enough to use the custom scale defaults where axis or position have a default. Because the annoying thing is that the axis/position must be configured in every chart instances (avoiding the defaults).

[stockiNail]

@cunha20 I don't think those options are correct and everything set looks like it would be ignored.

@etimberg @cunha20 the options sound to be correct, the scale ID is "gridLines" and it's working because the position option has been set in the configuration. I think if @cunha20 will remove the position, it would not work anymore.

[stockiNail]

@etimberg @LeeLenaleee @dangreen @igorlukanin @kurkle may I try to prepare and submit a PR?