feat: remove default axis override when custom id is given (#10643)

* feat: remove default axis override when custom id is given

* docs: add info into migration guide

* test: fix tests for the feat

* docs: add info into migration guide

* test: fix tests for the feat

* feat: review fixes

* feat: review fixes

Author: dangreen

docs/migration/v4-migration.md

@@ -7,6 +7,7 @@ Chart.js 4.0 introduces a number of breaking changes. We tried keeping the amoun
 ### Charts
 
 * Charts don't override the default tooltip callbacks, so all chart types have the same-looking tooltips.
+* Default scale override has been removed if the configured scale starts with `x`/`y`. Defining `xAxes` in your config will now create a second scale instead of overriding the default `x` axis.
 
 ### Options
 

src/core/core.config.js

@@ -32,17 +32,25 @@ function axisFromPosition(position) {
 }
 
 export function determineAxis(id, scaleOptions) {
-  if (id === 'x' || id === 'y') {
+  if (id === 'x' || id === 'y' || id === 'r') {
     return id;
   }
-  return scaleOptions.axis || axisFromPosition(scaleOptions.position) || id.charAt(0).toLowerCase();
+
+  id = scaleOptions.axis
+    || axisFromPosition(scaleOptions.position)
+    || id.length > 1 && determineAxis(id[0].toLowerCase(), scaleOptions);
+
+  if (id) {
+    return id;
+  }
+
+  throw new Error(`Cannot determine type of '${name}' axis. Please provide 'axis' or 'position' option.`);
 }
 
 function mergeScaleConfig(config, options) {
   const chartDefaults = overrides[config.type] || {scales: {}};
   const configScales = options.scales || {};
   const chartIndexAxis = getIndexAxis(config.type, options);
-  const firstIDs = Object.create(null);
   const scales = Object.create(null);
 
   // First figure out first scale id's per axis.
@@ -57,7 +65,6 @@ function mergeScaleConfig(config, options) {
     const axis = determineAxis(id, scaleConf);
     const defaultId = getDefaultScaleIDFromAxis(axis, chartIndexAxis);
     const defaultScaleOptions = chartDefaults.scales || {};
-    firstIDs[axis] = firstIDs[axis] || id;
     scales[id] = mergeIf(Object.create(null), [{axis}, scaleConf, defaultScaleOptions[axis], defaultScaleOptions[defaultId]]);
   });
 
@@ -69,7 +76,7 @@ function mergeScaleConfig(config, options) {
     const defaultScaleOptions = datasetDefaults.scales || {};
     Object.keys(defaultScaleOptions).forEach(defaultID => {
       const axis = getAxisFromDefaultScaleID(defaultID, indexAxis);
-      const id = dataset[axis + 'AxisID'] || firstIDs[axis] || axis;
+      const id = dataset[axis + 'AxisID'] || axis;
       scales[id] = scales[id] || Object.create(null);
       mergeIf(scales[id], [{axis}, configScales[id], defaultScaleOptions[defaultID]]);
     });

test/fixtures/controller.bar/stacking/issue-9105.js

@@ -10,31 +10,31 @@ module.exports = {
           label: 'Dataset 1',
           data: [12, 19, 3, 5, 2, 3],
           stack: '0',
-          yAxisID: 'y-axis-1'
+          yAxisID: 'y'
         },
         {
           backgroundColor: 'rgba(54,162,235,0.8)',
           label: 'Dataset 2',
           data: [13, 19, 3, 5, 8, 3],
           stack: '0',
-          yAxisID: 'y-axis-1'
+          yAxisID: 'y'
         },
         {
           backgroundColor: 'rgba(75,192,192,0.8)',
           label: 'Dataset 3',
           data: [13, 19, 3, 5, 8, 3],
           stack: '0',
-          yAxisID: 'y-axis-1'
+          yAxisID: 'y'
         }
       ]
     },
     options: {
       plugins: false,
       scales: {
-        xaxis: {
+        x: {
           display: false,
         },
-        'y-axis-1': {
+        y: {
           display: false
         }
       }

test/fixtures/core.scale/ticks/rotated-long.js

@@ -17,11 +17,11 @@ module.exports = {
         title: false
       },
       scales: {
-        bottom: {
+        x: {
           type: 'category',
           position: 'bottom'
         },
-        top: {
+        x2: {
           type: 'category',
           position: 'top'
         }

test/fixtures/core.scale/ticks/rotated-multi-line.js

@@ -17,11 +17,11 @@ module.exports = {
         title: false
       },
       scales: {
-        bottom: {
+        x: {
           type: 'category',
           position: 'bottom'
         },
-        top: {
+        x2: {
           type: 'category',
           position: 'top'
         }

test/fixtures/mixed/bar+line.js

@@ -19,10 +19,10 @@ module.exports = {
     options: {
       indexAxis: 'y',
       scales: {
-        horz: {
+        x: {
           position: 'top'
         },
-        vert: {
+        y: {
           axis: 'y',
           labels: ['a', 'b', 'c', 'd']
         }

test/specs/core.controller.tests.js

@@ -443,6 +443,7 @@ describe('Chart', function() {
         options: {
           scales: {
             foo: {
+              axis: 'x',
               type: 'logarithmic',
               _jasmineCheckC: 'c2',
               _jasmineCheckD: 'd2'

test/specs/core.scale.tests.js

@@ -571,4 +571,102 @@ describe('Core.scale', function() {
       expect(chart.scales.y.max).toEqual(10);
     });
   });
+
+  describe('overrides', () => {
+    it('should create new scale', () => {
+      const chart = window.acquireChart({
+        type: 'scatter',
+        data: {
+          datasets: [{
+            data: [{x: 100, y: 100}, {x: -100, y: -100}]
+          }, {
+            data: [{x: 10, y: 10}, {x: -10, y: -10}]
+          }]
+        },
+        options: {
+          scales: {
+            x2: {
+              type: 'linear',
+              min: -20,
+              max: 20
+            }
+          }
+        }
+      });
+
+      expect(Object.keys(chart.scales).sort()).toEqual(['x', 'x2', 'y']);
+    });
+
+    it('should create new scale with custom name', () => {
+      const chart = window.acquireChart({
+        type: 'scatter',
+        data: {
+          datasets: [{
+            data: [{x: 100, y: 100}, {x: -100, y: -100}]
+          }, {
+            data: [{x: 10, y: 10}, {x: -10, y: -10}]
+          }]
+        },
+        options: {
+          scales: {
+            scaleX: {
+              axis: 'x',
+              type: 'linear',
+              min: -20,
+              max: 20
+            }
+          }
+        }
+      });
+
+      expect(Object.keys(chart.scales).sort()).toEqual(['scaleX', 'x', 'y']);
+    });
+
+    it('should throw error on scale with custom name without axis type', () => {
+      expect(() => window.acquireChart({
+        type: 'scatter',
+        data: {
+          datasets: [{
+            data: [{x: 100, y: 100}, {x: -100, y: -100}]
+          }, {
+            data: [{x: 10, y: 10}, {x: -10, y: -10}]
+          }]
+        },
+        options: {
+          scales: {
+            scaleX: {
+              type: 'linear',
+              min: -20,
+              max: 20
+            }
+          }
+        }
+      })).toThrow();
+    });
+
+    it('should read options first to determine axis', () => {
+      const chart = window.acquireChart({
+        type: 'scatter',
+        data: {
+          datasets: [{
+            data: [{x: 100, y: 100}, {x: -100, y: -100}]
+          }, {
+            data: [{x: 10, y: 10}, {x: -10, y: -10}]
+          }]
+        },
+        options: {
+          scales: {
+            xavier: {
+              axis: 'y',
+              type: 'linear',
+              min: -20,
+              max: 20
+            }
+          }
+        }
+      });
+
+      expect(chart.scales.xavier.axis).toBe('y');
+    });
+  });
 });

types/index.d.ts

@@ -3039,9 +3039,9 @@ export interface CartesianScaleOptions extends CoreScaleOptions {
   stackWeight?: number;
 
   /**
-   *   Which type of axis this is. Possible values are: 'x', 'y'. If not set, this is inferred from the first character of the ID which should be 'x' or 'y'.
+   *   Which type of axis this is. Possible values are: 'x', 'y', 'r'. If not set, this is inferred from the first character of the ID which should be 'x', 'y' or 'r'.
    */
-  axis: 'x' | 'y';
+  axis: 'x' | 'y' | 'r';
 
   /**
    * User defined minimum value for the scale, overrides minimum value from data.