[docs] Complete charts API pages (#12038)

mui · Feb 13, 2024 · ec1a2a4 · ec1a2a4
1 parent 20129ab
commit ec1a2a4
Show file tree

Hide file tree

Showing 13 changed files with 278 additions and 29 deletions.
diff --git a/docs/pages/x/api/charts/bar-chart.json b/docs/pages/x/api/charts/bar-chart.json
@@ -1,9 +1,17 @@
 {
   "props": {
+    "series": {
+      "type": { "name": "arrayOf", "description": "Array&lt;object&gt;" },
+      "required": true
+    },
     "axisHighlight": {
       "type": {
         "name": "shape",
         "description": "{ x?: 'band'<br>&#124;&nbsp;'line'<br>&#124;&nbsp;'none', y?: 'band'<br>&#124;&nbsp;'line'<br>&#124;&nbsp;'none' }"
+      },
+      "seeMoreLink": {
+        "url": "https://mui.com/x/react-charts/tooltip/#highlights",
+        "text": "highlight docs"
       }
     },
     "bottomAxis": {
@@ -20,6 +28,10 @@
     "dataset": { "type": { "name": "arrayOf", "description": "Array&lt;object&gt;" } },
     "disableAxisListener": { "type": { "name": "bool" }, "default": "false" },
     "height": { "type": { "name": "number" }, "default": "undefined" },
+    "layout": {
+      "type": { "name": "enum", "description": "'horizontal'<br>&#124;&nbsp;'vertical'" },
+      "default": "'vertical'"
+    },
     "leftAxis": {
       "type": {
         "name": "union",
@@ -62,6 +74,13 @@
       "default": "{}",
       "additionalInfo": { "slotsApi": true }
     },
+    "tooltip": {
+      "type": {
+        "name": "shape",
+        "description": "{ axisContent?: elementType, classes?: object, itemContent?: elementType, slotProps?: object, slots?: object, trigger?: 'axis'<br>&#124;&nbsp;'item'<br>&#124;&nbsp;'none' }"
+      },
+      "seeMoreLink": { "url": "https://mui.com/x/react-charts/tooltip/", "text": "tooltip docs" }
+    },
     "topAxis": {
       "type": {
         "name": "union",

diff --git a/docs/pages/x/api/charts/line-chart.json b/docs/pages/x/api/charts/line-chart.json
@@ -1,11 +1,19 @@
 {
   "props": {
+    "series": {
+      "type": { "name": "arrayOf", "description": "Array&lt;object&gt;" },
+      "required": true
+    },
     "axisHighlight": {
       "type": {
         "name": "shape",
         "description": "{ x?: 'band'<br>&#124;&nbsp;'line'<br>&#124;&nbsp;'none', y?: 'band'<br>&#124;&nbsp;'line'<br>&#124;&nbsp;'none' }"
       },
-      "default": "{ x: 'line' }"
+      "default": "{ x: 'line' }",
+      "seeMoreLink": {
+        "url": "https://mui.com/x/react-charts/tooltip/#highlights",
+        "text": "highlight docs"
+      }
     },
     "bottomAxis": {
       "type": {
@@ -36,13 +44,16 @@
       },
       "default": "object Depends on the charts type."
     },
+    "onAreaClick": { "type": { "name": "func" } },
     "onAxisClick": {
       "type": { "name": "func" },
       "signature": {
         "type": "function(event: MouseEvent, data: null | AxisData) => void",
         "describedArgs": ["event", "data"]
       }
     },
+    "onLineClick": { "type": { "name": "func" } },
+    "onMarkClick": { "type": { "name": "func" } },
     "rightAxis": {
       "type": {
         "name": "union",
@@ -57,6 +68,14 @@
       "default": "{}",
       "additionalInfo": { "slotsApi": true }
     },
+    "tooltip": {
+      "type": {
+        "name": "shape",
+        "description": "{ axisContent?: elementType, classes?: object, itemContent?: elementType, slotProps?: object, slots?: object, trigger?: 'axis'<br>&#124;&nbsp;'item'<br>&#124;&nbsp;'none' }"
+      },
+      "default": "{ trigger: 'item' }",
+      "seeMoreLink": { "url": "https://mui.com/x/react-charts/tooltip/", "text": "tooltip docs" }
+    },
     "topAxis": {
       "type": {
         "name": "union",

diff --git a/docs/pages/x/api/charts/pie-chart.json b/docs/pages/x/api/charts/pie-chart.json
@@ -1,5 +1,20 @@
 {
   "props": {
+    "series": {
+      "type": { "name": "arrayOf", "description": "Array&lt;object&gt;" },
+      "required": true
+    },
+    "axisHighlight": {
+      "type": {
+        "name": "shape",
+        "description": "{ x?: 'band'<br>&#124;&nbsp;'line'<br>&#124;&nbsp;'none', y?: 'band'<br>&#124;&nbsp;'line'<br>&#124;&nbsp;'none' }"
+      },
+      "default": "{ x: 'none', y: 'none' }",
+      "seeMoreLink": {
+        "url": "https://mui.com/x/react-charts/tooltip/#highlights",
+        "text": "highlight docs"
+      }
+    },
     "bottomAxis": {
       "type": {
         "name": "union",
@@ -21,13 +36,23 @@
       },
       "default": "null"
     },
+    "legend": {
+      "type": {
+        "name": "shape",
+        "description": "{ classes?: object, direction?: 'column'<br>&#124;&nbsp;'row', hidden?: bool, position?: { horizontal: 'left'<br>&#124;&nbsp;'middle'<br>&#124;&nbsp;'right', vertical: 'bottom'<br>&#124;&nbsp;'middle'<br>&#124;&nbsp;'top' }, slotProps?: object, slots?: object }"
+      },
+      "default": "{ direction: 'column', position: { vertical: 'middle', horizontal: 'right' } }",
+      "deprecated": true,
+      "deprecationInfo": "Consider using <code>slotProps.legend</code> instead."
+    },
     "margin": {
       "type": {
         "name": "shape",
         "description": "{ bottom?: number, left?: number, right?: number, top?: number }"
       },
       "default": "object Depends on the charts type."
     },
+    "onItemClick": { "type": { "name": "func" } },
     "rightAxis": {
       "type": {
         "name": "union",
@@ -37,6 +62,19 @@
     },
     "skipAnimation": { "type": { "name": "bool" }, "default": "false" },
     "slotProps": { "type": { "name": "object" }, "default": "{}" },
+    "slots": {
+      "type": { "name": "object" },
+      "default": "{}",
+      "additionalInfo": { "slotsApi": true }
+    },
+    "tooltip": {
+      "type": {
+        "name": "shape",
+        "description": "{ axisContent?: elementType, classes?: object, itemContent?: elementType, slotProps?: object, slots?: object, trigger?: 'axis'<br>&#124;&nbsp;'item'<br>&#124;&nbsp;'none' }"
+      },
+      "default": "{ trigger: 'item' }",
+      "seeMoreLink": { "url": "https://mui.com/x/react-charts/tooltip/", "text": "tooltip docs" }
+    },
     "topAxis": {
       "type": {
         "name": "union",

diff --git a/docs/pages/x/api/charts/scatter-chart.json b/docs/pages/x/api/charts/scatter-chart.json
@@ -1,5 +1,20 @@
 {
   "props": {
+    "series": {
+      "type": { "name": "arrayOf", "description": "Array&lt;object&gt;" },
+      "required": true
+    },
+    "axisHighlight": {
+      "type": {
+        "name": "shape",
+        "description": "{ x?: 'band'<br>&#124;&nbsp;'line'<br>&#124;&nbsp;'none', y?: 'band'<br>&#124;&nbsp;'line'<br>&#124;&nbsp;'none' }"
+      },
+      "default": "{ x: 'none', y: 'none' }",
+      "seeMoreLink": {
+        "url": "https://mui.com/x/react-charts/tooltip/#highlights",
+        "text": "highlight docs"
+      }
+    },
     "bottomAxis": {
       "type": {
         "name": "union",
@@ -49,6 +64,14 @@
       "default": "{}",
       "additionalInfo": { "slotsApi": true }
     },
+    "tooltip": {
+      "type": {
+        "name": "shape",
+        "description": "{ axisContent?: elementType, classes?: object, itemContent?: elementType, slotProps?: object, slots?: object, trigger?: 'axis'<br>&#124;&nbsp;'item'<br>&#124;&nbsp;'none' }"
+      },
+      "default": "{ trigger: 'item' }",
+      "seeMoreLink": { "url": "https://mui.com/x/react-charts/tooltip/", "text": "tooltip docs" }
+    },
     "topAxis": {
       "type": {
         "name": "union",

diff --git a/docs/translations/api-docs/charts/bar-chart/bar-chart.json b/docs/translations/api-docs/charts/bar-chart/bar-chart.json
@@ -2,7 +2,8 @@
   "componentDescription": "",
   "propDescriptions": {
     "axisHighlight": {
-      "description": "Object <code>{ x, y }</code> that defines how the charts highlight the mouse position along the x- and y-axes. The two properties accept the following values: - &#39;none&#39;: display nothing. - &#39;line&#39;: display a line at the current mouse position. - &#39;band&#39;: display a band at the current mouse position. Only available with band scale."
+      "description": "The configuration of axes highlight. Default is set to &#39;band&#39; in the bar direction. Depends on <code>layout</code> prop.",
+      "seeMoreText": "See {{link}} for more details."
     },
     "bottomAxis": {
       "description": "Indicate which axis to display the bottom of the charts. Can be a string (the id of the axis) or an object <code>ChartsXAxisProps</code>."
@@ -17,6 +18,7 @@
     "height": {
       "description": "The height of the chart in px. If not defined, it takes the height of the parent element."
     },
+    "layout": { "description": "The direction of the bar elements." },
     "leftAxis": {
       "description": "Indicate which axis to display the left of the charts. Can be a string (the id of the axis) or an object <code>ChartsYAxisProps</code>."
     },
@@ -40,9 +42,14 @@
     "rightAxis": {
       "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object <code>ChartsYAxisProps</code>."
     },
+    "series": { "description": "The series to display in the bar chart." },
     "skipAnimation": { "description": "If <code>true</code>, animations are skipped." },
     "slotProps": { "description": "The props used for each component slot." },
     "slots": { "description": "Overridable component slots." },
+    "tooltip": {
+      "description": "The configuration of the tooltip.",
+      "seeMoreText": "See {{link}} for more details."
+    },
     "topAxis": {
       "description": "Indicate which axis to display the top of the charts. Can be a string (the id of the axis) or an object <code>ChartsXAxisProps</code>."
     },

diff --git a/docs/translations/api-docs/charts/line-chart/line-chart.json b/docs/translations/api-docs/charts/line-chart/line-chart.json
@@ -2,7 +2,8 @@
   "componentDescription": "",
   "propDescriptions": {
     "axisHighlight": {
-      "description": "Object <code>{ x, y }</code> that defines how the charts highlight the mouse position along the x- and y-axes. The two properties accept the following values: - &#39;none&#39;: display nothing. - &#39;line&#39;: display a line at the current mouse position. - &#39;band&#39;: display a band at the current mouse position. Only available with band scale."
+      "description": "The configuration of axes highlight.",
+      "seeMoreText": "See {{link}} for more details."
     },
     "bottomAxis": {
       "description": "Indicate which axis to display the bottom of the charts. Can be a string (the id of the axis) or an object <code>ChartsXAxisProps</code>."
@@ -26,19 +27,27 @@
     "margin": {
       "description": "The margin between the SVG and the drawing area. It&#39;s used for leaving some space for extra information such as the x- and y-axis or legend. Accepts an object with the optional properties: <code>top</code>, <code>bottom</code>, <code>left</code>, and <code>right</code>."
     },
+    "onAreaClick": { "description": "Callback fired when an area element is clicked." },
     "onAxisClick": {
       "description": "The function called for onClick events. The second argument contains information about all line/bar elements at the current mouse position.",
       "typeDescriptions": {
         "event": "The mouse event recorded on the <code>&lt;svg/&gt;</code> element.",
         "data": "The data about the clicked axis and items associated with it."
       }
     },
+    "onLineClick": { "description": "Callback fired when a line element is clicked." },
+    "onMarkClick": { "description": "Callback fired when a mark element is clicked." },
     "rightAxis": {
       "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object <code>ChartsYAxisProps</code>."
     },
+    "series": { "description": "The series to display in the line chart." },
     "skipAnimation": { "description": "If <code>true</code>, animations are skipped." },
     "slotProps": { "description": "The props used for each component slot." },
     "slots": { "description": "Overridable component slots." },
+    "tooltip": {
+      "description": "The configuration of the tooltip.",
+      "seeMoreText": "See {{link}} for more details."
+    },
     "topAxis": {
       "description": "Indicate which axis to display the top of the charts. Can be a string (the id of the axis) or an object <code>ChartsXAxisProps</code>."
     },

diff --git a/docs/translations/api-docs/charts/pie-chart/pie-chart.json b/docs/translations/api-docs/charts/pie-chart/pie-chart.json
@@ -1,6 +1,10 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "axisHighlight": {
+      "description": "The configuration of axes highlight.",
+      "seeMoreText": "See {{link}} for more details."
+    },
     "bottomAxis": {
       "description": "Indicate which axis to display the bottom of the charts. Can be a string (the id of the axis) or an object <code>ChartsXAxisProps</code>."
     },
@@ -17,14 +21,22 @@
     "leftAxis": {
       "description": "Indicate which axis to display the left of the charts. Can be a string (the id of the axis) or an object <code>ChartsYAxisProps</code>."
     },
+    "legend": { "description": "The props of the legend." },
     "margin": {
       "description": "The margin between the SVG and the drawing area. It&#39;s used for leaving some space for extra information such as the x- and y-axis or legend. Accepts an object with the optional properties: <code>top</code>, <code>bottom</code>, <code>left</code>, and <code>right</code>."
     },
+    "onItemClick": { "description": "Callback fired when a pie arc is clicked." },
     "rightAxis": {
       "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object <code>ChartsYAxisProps</code>."
     },
+    "series": { "description": "The series to display in the pie chart." },
     "skipAnimation": { "description": "If <code>true</code>, animations are skipped." },
     "slotProps": { "description": "The props used for each component slot." },
+    "slots": { "description": "Overridable component slots." },
+    "tooltip": {
+      "description": "The configuration of the tooltip.",
+      "seeMoreText": "See {{link}} for more details."
+    },
     "topAxis": {
       "description": "Indicate which axis to display the top of the charts. Can be a string (the id of the axis) or an object <code>ChartsXAxisProps</code>."
     },

diff --git a/docs/translations/api-docs/charts/scatter-chart/scatter-chart.json b/docs/translations/api-docs/charts/scatter-chart/scatter-chart.json
@@ -1,6 +1,10 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "axisHighlight": {
+      "description": "The configuration of axes highlight.",
+      "seeMoreText": "See {{link}} for more details."
+    },
     "bottomAxis": {
       "description": "Indicate which axis to display the bottom of the charts. Can be a string (the id of the axis) or an object <code>ChartsXAxisProps</code>."
     },
@@ -33,8 +37,13 @@
     "rightAxis": {
       "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object <code>ChartsYAxisProps</code>."
     },
+    "series": { "description": "The series to display in the scatter chart." },
     "slotProps": { "description": "The props used for each component slot." },
     "slots": { "description": "Overridable component slots." },
+    "tooltip": {
+      "description": "The configuration of the tooltip.",
+      "seeMoreText": "See {{link}} for more details."
+    },
     "topAxis": {
       "description": "Indicate which axis to display the top of the charts. Can be a string (the id of the axis) or an object <code>ChartsXAxisProps</code>."
     },