[charts] Deprecate xAxisKey /zAxisKey in favor of xAxisId/zAxisId

docs/data/charts/axis/AxisWithComposition.js

@@ -24,19 +24,19 @@ export default function AxisWithComposition() {
           {
             type: 'line',
             id: 'revenue',
-            yAxisKey: 'money',
+            yAxisId: 'money',
             data: [5645, 7542, 9135, 12221],
           },
           {
             type: 'bar',
             id: 'cookies',
-            yAxisKey: 'quantities',
+            yAxisId: 'quantities',
             data: [3205, 2542, 3135, 8374],
           },
           {
             type: 'bar',
             id: 'icecream',
-            yAxisKey: 'quantities',
+            yAxisId: 'quantities',
             data: [1645, 5542, 5146, 3735],
           },
         ]}

docs/data/charts/axis/AxisWithComposition.tsx

@@ -24,19 +24,19 @@ export default function AxisWithComposition() {
           {
             type: 'line',
             id: 'revenue',
-            yAxisKey: 'money',
+            yAxisId: 'money',
             data: [5645, 7542, 9135, 12221],
           },
           {
             type: 'bar',
             id: 'cookies',
-            yAxisKey: 'quantities',
+            yAxisId: 'quantities',
             data: [3205, 2542, 3135, 8374],
           },
           {
             type: 'bar',
             id: 'icecream',
-            yAxisKey: 'quantities',
+            yAxisId: 'quantities',
             data: [1645, 5542, 5146, 3735],
           },
         ]}

docs/data/charts/axis/ReverseExampleNoSnap.js

@@ -30,7 +30,7 @@ const dataset = [
 const series = [
   { type: 'line', dataKey: 'min', color: '#577399' },
   { type: 'line', dataKey: 'max', color: '#fe5f55' },
-  { type: 'bar', dataKey: 'precip', color: '#bfdbf7', yAxisKey: 'rightAxis' },
+  { type: 'bar', dataKey: 'precip', color: '#bfdbf7', yAxisId: 'rightAxis' },
 ];
 
 export default function ReverseExampleNoSnap() {

docs/data/charts/axis/ScaleExample.js

@@ -14,8 +14,8 @@ export default function ScaleExample() {
           { id: 'logAxis', scaleType: 'log' },
         ]}
         series={[
-          { yAxisKey: 'linearAxis', data: sample, label: 'linear' },
-          { yAxisKey: 'logAxis', data: sample, label: 'log' },
+          { yAxisId: 'linearAxis', data: sample, label: 'linear' },
+          { yAxisId: 'logAxis', data: sample, label: 'log' },
         ]}
         leftAxis="linearAxis"
         rightAxis="logAxis"

docs/data/charts/axis/ScaleExample.tsx

@@ -14,8 +14,8 @@ export default function ScaleExample() {
           { id: 'logAxis', scaleType: 'log' },
         ]}
         series={[
-          { yAxisKey: 'linearAxis', data: sample, label: 'linear' },
-          { yAxisKey: 'logAxis', data: sample, label: 'log' },
+          { yAxisId: 'linearAxis', data: sample, label: 'linear' },
+          { yAxisId: 'logAxis', data: sample, label: 'log' },
         ]}
         leftAxis="linearAxis"
         rightAxis="logAxis"

docs/data/charts/axis/ScaleExample.tsx.preview

@@ -5,8 +5,8 @@
     { id: 'logAxis', scaleType: 'log' },
   ]}
   series={[
-    { yAxisKey: 'linearAxis', data: sample, label: 'linear' },
-    { yAxisKey: 'logAxis', data: sample, label: 'log' },
+    { yAxisId: 'linearAxis', data: sample, label: 'linear' },
+    { yAxisId: 'logAxis', data: sample, label: 'log' },
   ]}
   leftAxis="linearAxis"
   rightAxis="logAxis"

docs/data/charts/axis/axis.md

@@ -22,17 +22,17 @@ Here is a demonstration with two lines with the same data.
 But one uses a linear, and the other a log axis.
 
 Each axis definition is identified by its property `id`.
-And series specify the axis they use with `xAxisKey` and `yAxisKey` properties.
+And series specify the axis they use with `xAxisId` and `yAxisId` properties.
 
 {{"demo": "ScaleExample.js"}}
 
 :::info
 The management of those ids is for advanced use cases, such as charts with multiple axes.
 Or customized axes.
 
-If you do not provide a `xAxisKey` or `yAxisKey`, the series will use the first axis defined.
+If you do not provide a `xAxisId` or `yAxisId`, the series will use the first axis defined.
 
-That's why in most of the demonstrations with single x and y axis you will not see definitions of axis `id`, `xAxisKey`, or `yAxisKey`.
+That's why in most of the demonstrations with single x and y axis you will not see definitions of axis `id`, `xAxisId`, or `yAxisId`.
 Those demonstrations use the defaultized values.
 :::
 

docs/data/charts/bar-demo/BiaxialBarChart.js

@@ -24,13 +24,13 @@ export default function BiaxialBarChart() {
           data: pData,
           label: 'pv',
           id: 'pvId',
-          yAxisKey: 'leftAxisId',
+          yAxisId: 'leftAxisId',
         },
         {
           data: uData,
           label: 'uv',
           id: 'uvId',
-          yAxisKey: 'rightAxisId',
+          yAxisId: 'rightAxisId',
         },
       ]}
       xAxis={[{ data: xLabels, scaleType: 'band' }]}

docs/data/charts/bar-demo/BiaxialBarChart.tsx

@@ -25,14 +25,14 @@ export default function BiaxialBarChart() {
           label: 'pv',
           id: 'pvId',
 
-          yAxisKey: 'leftAxisId',
+          yAxisId: 'leftAxisId',
         },
         {
           data: uData,
           label: 'uv',
           id: 'uvId',
 
-          yAxisKey: 'rightAxisId',
+          yAxisId: 'rightAxisId',
         },
       ]}
       xAxis={[{ data: xLabels, scaleType: 'band' }]}

docs/data/charts/components/ScaleDemo.js

@@ -103,14 +103,14 @@ export default function ScaleDemo() {
         {
           type: 'line',
           data: [5, 15, 20, 24, 30, 38, 40, 51, 52, 61],
-          yAxisKey: 'left_axis_id',
+          yAxisId: 'left_axis_id',
         },
         {
           type: 'line',
           data: [
             50134, 48361, 46362, 44826, 42376, 40168, 38264, 36159, 34259, 32168,
           ],
-          yAxisKey: 'right_axis_id',
+          yAxisId: 'right_axis_id',
         },
       ]}
       xAxis={[{ data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], scaleType: 'point' }]}

docs/data/charts/components/ScaleDemo.tsx

@@ -103,14 +103,14 @@ export default function ScaleDemo() {
         {
           type: 'line',
           data: [5, 15, 20, 24, 30, 38, 40, 51, 52, 61],
-          yAxisKey: 'left_axis_id',
+          yAxisId: 'left_axis_id',
         },
         {
           type: 'line',
           data: [
             50134, 48361, 46362, 44826, 42376, 40168, 38264, 36159, 34259, 32168,
           ],
-          yAxisKey: 'right_axis_id',
+          yAxisId: 'right_axis_id',
         },
       ]}
       xAxis={[{ data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], scaleType: 'point' }]}

docs/data/charts/getting-started/Combining.js

@@ -10,18 +10,18 @@ const series = [
   {
     type: 'bar',
     stack: '',
-    yAxisKey: 'eco',
+    yAxisId: 'eco',
     data: [2, 5, 3, 4, 1],
   },
   {
     type: 'bar',
     stack: '',
-    yAxisKey: 'eco',
+    yAxisId: 'eco',
     data: [5, 6, 2, 8, 9],
   },
   {
     type: 'line',
-    yAxisKey: 'pib',
+    yAxisId: 'pib',
     color: 'red',
     data: [1000, 1500, 3000, 5000, 10000],
   },

docs/data/charts/getting-started/Combining.tsx

@@ -10,18 +10,18 @@ const series = [
   {
     type: 'bar',
     stack: '',
-    yAxisKey: 'eco',
+    yAxisId: 'eco',
     data: [2, 5, 3, 4, 1],
   },
   {
     type: 'bar',
     stack: '',
-    yAxisKey: 'eco',
+    yAxisId: 'eco',
     data: [5, 6, 2, 8, 9],
   },
   {
     type: 'line',
-    yAxisKey: 'pib',
+    yAxisId: 'pib',
     color: 'red',
     data: [1000, 1500, 3000, 5000, 10000],
   },

docs/data/charts/line-demo/BiaxialLineChart.js

@@ -19,8 +19,8 @@ export default function BiaxialLineChart() {
       width={500}
       height={300}
       series={[
-        { data: pData, label: 'pv', yAxisKey: 'leftAxisId' },
-        { data: uData, label: 'uv', yAxisKey: 'rightAxisId' },
+        { data: pData, label: 'pv', yAxisId: 'leftAxisId' },
+        { data: uData, label: 'uv', yAxisId: 'rightAxisId' },
       ]}
       xAxis={[{ scaleType: 'point', data: xLabels }]}
       yAxis={[{ id: 'leftAxisId' }, { id: 'rightAxisId' }]}

docs/data/charts/line-demo/BiaxialLineChart.tsx

@@ -19,8 +19,8 @@ export default function BiaxialLineChart() {
       width={500}
       height={300}
       series={[
-        { data: pData, label: 'pv', yAxisKey: 'leftAxisId' },
-        { data: uData, label: 'uv', yAxisKey: 'rightAxisId' },
+        { data: pData, label: 'pv', yAxisId: 'leftAxisId' },
+        { data: uData, label: 'uv', yAxisId: 'rightAxisId' },
       ]}
       xAxis={[{ scaleType: 'point', data: xLabels }]}
       yAxis={[{ id: 'leftAxisId' }, { id: 'rightAxisId' }]}

docs/data/charts/line-demo/BiaxialLineChart.tsx.preview

@@ -2,8 +2,8 @@
   width={500}
   height={300}
   series={[
-    { data: pData, label: 'pv', yAxisKey: 'leftAxisId' },
-    { data: uData, label: 'uv', yAxisKey: 'rightAxisId' },
+    { data: pData, label: 'pv', yAxisId: 'leftAxisId' },
+    { data: uData, label: 'uv', yAxisId: 'rightAxisId' },
   ]}
   xAxis={[{ scaleType: 'point', data: xLabels }]}
   yAxis={[{ id: 'leftAxisId' }, { id: 'rightAxisId' }]}

docs/data/charts/scatter-demo/MultipleYAxesScatterChart.js

@@ -34,12 +34,12 @@ export default function MultipleYAxesScatterChart() {
       series={[
         {
           data: data1,
-          yAxisKey: 'leftAxis',
+          yAxisId: 'leftAxis',
           valueFormatter: ({ x, y }) => `${x}cm, ${y}kg`,
         },
         {
           data: data2,
-          yAxisKey: 'rightAxis',
+          yAxisId: 'rightAxis',
           valueFormatter: ({ x, y }) => `${x}cm, ${y}kg`,
         },
       ]}

docs/data/charts/scatter-demo/MultipleYAxesScatterChart.tsx

@@ -33,13 +33,13 @@ export default function MultipleYAxesScatterChart() {
       series={[
         {
           data: data1,
-          yAxisKey: 'leftAxis',
+          yAxisId: 'leftAxis',
 
           valueFormatter: ({ x, y }) => `${x}cm, ${y}kg`,
         },
         {
           data: data2,
-          yAxisKey: 'rightAxis',
+          yAxisId: 'rightAxis',
 
           valueFormatter: ({ x, y }) => `${x}cm, ${y}kg`,
         },

docs/pages/x/api/charts/bar-series-type.json

@@ -16,7 +16,9 @@
     "stackOffset": { "type": { "description": "StackOffsetType" }, "default": "'diverging'" },
     "stackOrder": { "type": { "description": "StackOrderType" }, "default": "'none'" },
     "valueFormatter": { "type": { "description": "SeriesValueFormatter<TValue>" } },
+    "xAxisId": { "type": { "description": "string" } },
     "xAxisKey": { "type": { "description": "string" } },
+    "yAxisId": { "type": { "description": "string" } },
     "yAxisKey": { "type": { "description": "string" } }
   }
 }

docs/pages/x/api/charts/line-series-type.json

@@ -20,7 +20,9 @@
     "stackOffset": { "type": { "description": "StackOffsetType" }, "default": "'none'" },
     "stackOrder": { "type": { "description": "StackOrderType" }, "default": "'none'" },
     "valueFormatter": { "type": { "description": "SeriesValueFormatter<TValue>" } },
+    "xAxisId": { "type": { "description": "string" } },
     "xAxisKey": { "type": { "description": "string" } },
+    "yAxisId": { "type": { "description": "string" } },
     "yAxisKey": { "type": { "description": "string" } }
   }
 }

docs/pages/x/api/charts/scatter-series-type.json

@@ -13,8 +13,11 @@
     },
     "markerSize": { "type": { "description": "number" } },
     "valueFormatter": { "type": { "description": "SeriesValueFormatter<TValue>" } },
+    "xAxisId": { "type": { "description": "string" } },
     "xAxisKey": { "type": { "description": "string" } },
+    "yAxisId": { "type": { "description": "string" } },
     "yAxisKey": { "type": { "description": "string" } },
+    "zAxisId": { "type": { "description": "string" } },
     "zAxisKey": { "type": { "description": "string" } }
   }
 }

docs/translations/api-docs/charts/bar-series-type.json

@@ -21,7 +21,9 @@
     "valueFormatter": {
       "description": "Formatter used to render values in tooltip or other data display."
     },
+    "xAxisId": { "description": "The id of the x-axis used to render the series." },
     "xAxisKey": { "description": "The id of the x-axis used to render the series." },
+    "yAxisId": { "description": "The id of the y-axis used to render the series." },
     "yAxisKey": { "description": "The id of the y-axis used to render the series." }
   }
 }

docs/translations/api-docs/charts/line-series-type.json

@@ -31,7 +31,9 @@
     "valueFormatter": {
       "description": "Formatter used to render values in tooltip or other data display."
     },
+    "xAxisId": { "description": "The id of the x-axis used to render the series." },
     "xAxisKey": { "description": "The id of the x-axis used to render the series." },
+    "yAxisId": { "description": "The id of the y-axis used to render the series." },
     "yAxisKey": { "description": "The id of the y-axis used to render the series." }
   }
 }

docs/translations/api-docs/charts/scatter-series-type.json

@@ -16,8 +16,11 @@
     "valueFormatter": {
       "description": "Formatter used to render values in tooltip or other data display."
     },
+    "xAxisId": { "description": "The id of the x-axis used to render the series." },
     "xAxisKey": { "description": "The id of the x-axis used to render the series." },
+    "yAxisId": { "description": "The id of the y-axis used to render the series." },
     "yAxisKey": { "description": "The id of the y-axis used to render the series." },
+    "zAxisId": { "description": "The id of the z-axis used to render the series." },
     "zAxisKey": { "description": "The id of the z-axis used to render the series." }
   }
 }

packages/x-charts/src/BarChart/BarPlot.tsx

@@ -101,15 +101,15 @@ const useAggregatedData = (): {
 
   const data = stackingGroups.flatMap(({ ids: groupIds }, groupIndex) => {
     return groupIds.flatMap((seriesId) => {
-      const xAxisKey = series[seriesId].xAxisKey ?? defaultXAxisId;
-      const yAxisKey = series[seriesId].yAxisKey ?? defaultYAxisId;
+      const xAxisId = series[seriesId].xAxisId ?? series[seriesId].xAxisKey ?? defaultXAxisId;
+      const yAxisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey ?? defaultYAxisId;
 
-      const xAxisConfig = xAxis[xAxisKey];
-      const yAxisConfig = yAxis[yAxisKey];
+      const xAxisConfig = xAxis[xAxisId];
+      const yAxisConfig = yAxis[yAxisId];
 
       const verticalLayout = series[seriesId].layout === 'vertical';
 
-      checkScaleErrors(verticalLayout, seriesId, xAxisKey, xAxis, yAxisKey, yAxis);
+      checkScaleErrors(verticalLayout, seriesId, xAxisId, xAxis, yAxisId, yAxis);
 
       const baseScaleConfig = (
         verticalLayout ? xAxisConfig : yAxisConfig
@@ -118,7 +118,7 @@ const useAggregatedData = (): {
       const xScale = xAxisConfig.scale;
       const yScale = yAxisConfig.scale;
 
-      const colorGetter = getColor(series[seriesId], xAxis[xAxisKey], yAxis[yAxisKey]);
+      const colorGetter = getColor(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
       const bandWidth = baseScaleConfig.scale.bandwidth();
 
       const { barWidth, offset } = getBandSize({
@@ -142,12 +142,8 @@ const useAggregatedData = (): {
           seriesId,
           dataIndex,
           layout: series[seriesId].layout,
-          x: verticalLayout
-            ? xScale(xAxis[xAxisKey].data?.[dataIndex])! + barOffset
-            : minValueCoord,
-          y: verticalLayout
-            ? minValueCoord
-            : yScale(yAxis[yAxisKey].data?.[dataIndex])! + barOffset,
+          x: verticalLayout ? xScale(xAxis[xAxisId].data?.[dataIndex])! + barOffset : minValueCoord,
+          y: verticalLayout ? minValueCoord : yScale(yAxis[yAxisId].data?.[dataIndex])! + barOffset,
           xOrigin: xScale(0)!,
           yOrigin: yScale(0)!,
           height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,