Run scripts

docs/data/charts-component-api-pages.ts

@@ -25,6 +25,10 @@ const apiPages: MuiPage[] = [
     pathname: '/x/api/charts/bar-element',
     title: 'BarElement',
   },
+  {
+    pathname: '/x/api/charts/bar-label',
+    title: 'BarLabel',
+  },
   {
     pathname: '/x/api/charts/bar-plot',
     title: 'BarPlot',

docs/pages/x/api/charts/bar-chart.json

@@ -14,6 +14,7 @@
         "text": "highlight docs"
       }
     },
+    "barLabel": { "type": { "name": "union", "description": "'value'<br>&#124;&nbsp;func" } },
     "borderRadius": { "type": { "name": "number" } },
     "bottomAxis": {
       "type": { "name": "union", "description": "object<br>&#124;&nbsp;string" },
@@ -131,6 +132,12 @@
       "default": "BarElementPath",
       "class": null
     },
+    {
+      "name": "barLabel",
+      "description": "The component that renders the bar label.",
+      "default": "BarLabelComponent",
+      "class": null
+    },
     {
       "name": "legend",
       "description": "Custom rendering of the legend.",

docs/pages/x/api/charts/bar-label.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './bar-label.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docsx/translations/api-docs/charts/bar-label',
+    false,
+    /\.\/bar-label.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};

docs/pages/x/api/charts/bar-label.json

@@ -0,0 +1,52 @@
+{
+  "props": {
+    "height": { "type": { "name": "number" }, "required": true },
+    "value": { "type": { "name": "number" }, "required": true },
+    "width": { "type": { "name": "number" }, "required": true },
+    "barLabel": { "type": { "name": "union", "description": "'value'<br>&#124;&nbsp;func" } },
+    "slotProps": { "type": { "name": "object" }, "default": "{}" },
+    "slots": {
+      "type": { "name": "object" },
+      "default": "{}",
+      "additionalInfo": { "slotsApi": true }
+    }
+  },
+  "name": "BarLabel",
+  "imports": [
+    "import { BarLabel } from '@mui/x-charts/BarChart';",
+    "import { BarLabel } from '@mui/x-charts';"
+  ],
+  "slots": [
+    {
+      "name": "barLabel",
+      "description": "The component that renders the bar label.",
+      "default": "BarLabelComponent",
+      "class": null
+    }
+  ],
+  "classes": [
+    {
+      "key": "faded",
+      "className": "MuiBarLabel-faded",
+      "description": "Styles applied to the root element if it is faded.",
+      "isGlobal": false
+    },
+    {
+      "key": "highlighted",
+      "className": "MuiBarLabel-highlighted",
+      "description": "Styles applied to the root element if it is highlighted.",
+      "isGlobal": false
+    },
+    {
+      "key": "root",
+      "className": "MuiBarLabel-root",
+      "description": "Styles applied to the root element.",
+      "isGlobal": false
+    }
+  ],
+  "muiName": "MuiBarLabel",
+  "filename": "/packages/x-charts/src/BarChart/BarLabel/BarLabel.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/x/react-charts/bars/\">Charts - Bars</a></li></ul>",
+  "cssComponent": false
+}

docs/pages/x/api/charts/bar-plot.json

@@ -1,5 +1,6 @@
 {
   "props": {
+    "barLabel": { "type": { "name": "union", "description": "'value'<br>&#124;&nbsp;func" } },
     "borderRadius": { "type": { "name": "number" } },
     "onItemClick": {
       "type": { "name": "func" },
@@ -27,6 +28,12 @@
       "description": "The component that renders the bar.",
       "default": "BarElementPath",
       "class": null
+    },
+    {
+      "name": "barLabel",
+      "description": "The component that renders the bar label.",
+      "default": "BarLabelComponent",
+      "class": null
     }
   ],
   "classes": [],

docs/translations/api-docs/charts/bar-chart/bar-chart.json

@@ -5,6 +5,9 @@
       "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."
     },
+    "barLabel": {
+      "description": "Can be set to &#39;value&#39; to display the current value. If provided, the function will be used to format the label of the bar."
+    },
     "borderRadius": { "description": "Defines the border radius of the bar element." },
     "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>."
@@ -76,6 +79,7 @@
     "axisTick": "Custom component for the axis tick.",
     "axisTickLabel": "Custom component for tick label.",
     "bar": "The component that renders the bar.",
+    "barLabel": "The component that renders the bar label.",
     "itemContent": "Custom component for displaying tooltip content when triggered by item event.",
     "legend": "Custom rendering of the legend.",
     "loadingOverlay": "Overlay component rendered when the chart is in a loading state.",

docs/translations/api-docs/charts/bar-label/bar-label.json

@@ -0,0 +1,25 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "barLabel": { "description": "The bar label type or formatter." },
+    "height": { "description": "The height of the bar." },
+    "slotProps": { "description": "The props used for each component slot." },
+    "slots": { "description": "Overridable component slots." },
+    "value": { "description": "The value of the data point." },
+    "width": { "description": "The width of the bar." }
+  },
+  "classDescriptions": {
+    "faded": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "it is faded"
+    },
+    "highlighted": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "it is highlighted"
+    },
+    "root": { "description": "Styles applied to the root element." }
+  },
+  "slotDescriptions": { "barLabel": "The component that renders the bar label." }
+}

docs/translations/api-docs/charts/bar-plot/bar-plot.json

@@ -1,6 +1,9 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "barLabel": {
+      "description": "Can be set to 'value' to display the current value. If provided, the function will be used to format the label of the bar."
+    },
     "borderRadius": { "description": "Defines the border radius of the bar element." },
     "onItemClick": {
       "description": "Callback fired when a bar item is clicked.",
@@ -14,5 +17,8 @@
     "slots": { "description": "Overridable component slots." }
   },
   "classDescriptions": {},
-  "slotDescriptions": { "bar": "The component that renders the bar." }
+  "slotDescriptions": {
+    "bar": "The component that renders the bar.",
+    "barLabel": "The component that renders the bar label."
+  }
 }

docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json

@@ -43,6 +43,7 @@
     "area": "The component that renders the area.",
     "axisContent": "Custom component for displaying tooltip content when triggered by axis event.",
     "bar": "The component that renders the bar.",
+    "barLabel": "The component that renders the bar label.",
     "itemContent": "Custom component for displaying tooltip content when triggered by item event.",
     "line": "The component that renders the line.",
     "lineHighlight": "",

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

@@ -234,6 +234,14 @@ BarChart.propTypes = {
     x: PropTypes.oneOf(['band', 'line', 'none']),
     y: PropTypes.oneOf(['band', 'line', 'none']),
   }),
+  /**
+   * Can be set to 'value' to display the current value.
+   * If provided, the function will be used to format the label of the bar.
+   * @param {BarItem} item The item to format.
+   * @param {BarLabelContext} context data about the bar.
+   * @returns {string} The formatted label.
+   */
+  barLabel: PropTypes.oneOfType([PropTypes.oneOf(['value']), PropTypes.func]),
   /**
    * Defines the border radius of the bar element.
    */

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { animated } from '@react-spring/web';
 import { useSlotProps } from '@mui/base/utils';
+import PropTypes from 'prop-types';
 import { InteractionContext } from '../../context/InteractionProvider';
 import { getIsFaded, getIsHighlighted } from '../../hooks/useInteractionItemProps';
 import { barLabelClasses, useUtilityClasses } from './barLabelClasses';
@@ -26,7 +27,6 @@ export const BarLabelComponent = styled(animated.text, {
   dominantBaseline: 'central',
   pointerEvents: 'none',
   opacity: 1,
-
   [`&.${barLabelClasses.faded}`]: {
     opacity: 0.3,
   },
@@ -56,10 +56,21 @@ export type BarLabelProps = Omit<BarLabelOwnerState, 'isFaded' | 'isHighlighted'
      * @default {}
      */
     slots?: BarLabelSlots;
+    /**
+     * The height of the bar.
+     */
     height: number;
+    /**
+     * The width of the bar.
+     */
     width: number;
-    layout?: 'vertical' | 'horizontal';
+    /**
+     * The value of the data point.
+     */
     value: number | null;
+    /**
+     * The bar label type or formatter.
+     */
     barLabel?: 'value' | BarLabelFunction;
   };
 
@@ -134,6 +145,36 @@ BarLabel.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * The bar label type or formatter.
+   */
+  barLabel: PropTypes.oneOfType([PropTypes.oneOf(['value']), PropTypes.func]),
+  classes: PropTypes.object,
+  color: PropTypes.string.isRequired,
+  dataIndex: PropTypes.number.isRequired,
+  /**
+   * The height of the bar.
+   */
+  height: PropTypes.number.isRequired,
+  seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
+  /**
+   * The value of the data point.
+   */
+  value: PropTypes.number,
+  /**
+   * The width of the bar.
+   */
+  width: PropTypes.number.isRequired,
 } as any;
 
 export { BarLabel };

packages/x-charts/src/BarChart/BarLabel/BarLabelPlot.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { to, useTransition } from '@react-spring/web';
 import type { AnimationData, CompletedBarData } from '../types';
 import { BarLabel } from './BarLabel';
@@ -72,4 +73,33 @@ function BarLabelPlot(props: BarLabelPlotProps) {
   );
 }
 
+BarLabelPlot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  barLabel: PropTypes.oneOfType([PropTypes.oneOf(['value']), PropTypes.func]),
+  bars: PropTypes.arrayOf(
+    PropTypes.shape({
+      color: PropTypes.string.isRequired,
+      dataIndex: PropTypes.number.isRequired,
+      height: PropTypes.number.isRequired,
+      highlightScope: PropTypes.shape({
+        faded: PropTypes.oneOf(['global', 'none', 'series']),
+        highlighted: PropTypes.oneOf(['item', 'none', 'series']),
+      }),
+      layout: PropTypes.oneOf(['horizontal', 'vertical']),
+      maskId: PropTypes.string.isRequired,
+      seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+      value: PropTypes.number,
+      width: PropTypes.number.isRequired,
+      x: PropTypes.number.isRequired,
+      xOrigin: PropTypes.number.isRequired,
+      y: PropTypes.number.isRequired,
+      yOrigin: PropTypes.number.isRequired,
+    }),
+  ).isRequired,
+  skipAnimation: PropTypes.bool,
+} as any;
+
 export { BarLabelPlot };

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

@@ -366,6 +366,14 @@ BarPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Can be set to 'value' to display the current value.
+   * If provided, the function will be used to format the label of the bar.
+   * @param {BarItem} item The item to format.
+   * @param {BarLabelContext} context data about the bar.
+   * @returns {string} The formatted label.
+   */
+  barLabel: PropTypes.oneOfType([PropTypes.oneOf(['value']), PropTypes.func]),
   /**
    * Defines the border radius of the bar element.
    */

scripts/x-charts.exports.json

@@ -35,7 +35,21 @@
   { "name": "BarElementProps", "kind": "TypeAlias" },
   { "name": "BarElementSlotProps", "kind": "Interface" },
   { "name": "BarElementSlots", "kind": "Interface" },
+  { "name": "BarItem", "kind": "TypeAlias" },
   { "name": "BarItemIdentifier", "kind": "TypeAlias" },
+  { "name": "BarLabel", "kind": "Function" },
+  { "name": "barLabelClasses", "kind": "Variable" },
+  { "name": "BarLabelClasses", "kind": "Interface" },
+  { "name": "BarLabelClassKey", "kind": "TypeAlias" },
+  { "name": "BarLabelComponent", "kind": "Variable" },
+  { "name": "BarLabelComponentProps", "kind": "TypeAlias" },
+  { "name": "BarLabelContext", "kind": "TypeAlias" },
+  { "name": "BarLabelFunction", "kind": "TypeAlias" },
+  { "name": "BarLabelOwnerState", "kind": "Interface" },
+  { "name": "BarLabelPlot", "kind": "Function" },
+  { "name": "BarLabelProps", "kind": "TypeAlias" },
+  { "name": "BarLabelSlotProps", "kind": "Interface" },
+  { "name": "BarLabelSlots", "kind": "Interface" },
   { "name": "BarPlot", "kind": "Function" },
   { "name": "BarPlotProps", "kind": "Interface" },
   { "name": "BarPlotSlotProps", "kind": "Interface" },
@@ -140,6 +154,7 @@
   { "name": "getAxisHighlightUtilityClass", "kind": "Function" },
   { "name": "getAxisUtilityClass", "kind": "Function" },
   { "name": "getBarElementUtilityClass", "kind": "Function" },
+  { "name": "getBarLabelUtilityClass", "kind": "Function" },
   { "name": "getChartsGridUtilityClass", "kind": "Function" },
   { "name": "getChartsTooltipUtilityClass", "kind": "Function" },
   { "name": "getGaugeUtilityClass", "kind": "Function" },
@@ -266,6 +281,7 @@
   { "name": "useDrawingArea", "kind": "Function" },
   { "name": "useGaugeState", "kind": "Function" },
   { "name": "useSvgRef", "kind": "Function" },
+  { "name": "useUtilityClasses", "kind": "Variable" },
   { "name": "useXScale", "kind": "Function" },
   { "name": "useYScale", "kind": "Function" },
   { "name": "ZAxisContextProvider", "kind": "Function" },