Update to be outside instead of above

Author: Sigdriv

docs/data/charts/bars/BarLabelPlacement.js

@@ -5,7 +5,7 @@ export default function BarLabelPlacement() {
     <BarChart
       xAxis={[{ data: ['group A', 'group B', 'group C'] }]}
       series={[
-        { data: [1, 1, -4], barLabel: 'value', barLabelPlacement: 'above' },
+        { data: [1, 1, -4], barLabel: 'value', barLabelPlacement: 'outside' },
         { data: [2, 0, -1], barLabel: 'value', barLabelPlacement: 'inside' },
         { data: [3, -1, 4], barLabel: 'value' },
       ]}

docs/data/charts/bars/BarLabelPlacement.tsx

@@ -5,7 +5,7 @@ export default function BarLabelPlacement() {
     <BarChart
       xAxis={[{ data: ['group A', 'group B', 'group C'] }]}
       series={[
-        { data: [1, 1, -4], barLabel: 'value', barLabelPlacement: 'above' },
+        { data: [1, 1, -4], barLabel: 'value', barLabelPlacement: 'outside' },
         { data: [2, 0, -1], barLabel: 'value', barLabelPlacement: 'inside' },
         { data: [3, -1, 4], barLabel: 'value' },
       ]}

docs/data/charts/bars/BarLabelPlacement.tsx.preview

@@ -1,7 +1,7 @@
 <BarChart
   xAxis={[{ data: ['group A', 'group B', 'group C'] }]}
   series={[
-    { data: [1, 1, -4], barLabel: 'value', barLabelPlacement: 'above' },
+    { data: [1, 1, -4], barLabel: 'value', barLabelPlacement: 'outside' },
     { data: [2, 0, -1], barLabel: 'value', barLabelPlacement: 'inside' },
     { data: [3, -1, 4], barLabel: 'value' },
   ]}

docs/data/charts/bars/bars.md

@@ -183,7 +183,7 @@ In the example below, the value of the first series is displayed using the defau
 
 You can also display the labels on top of the bars.
 To do so, provide the `barLabelPlacement` prop.
-This prop accepts two values: `'inside'` (default) and `'above'`.
+This prop accepts two values: `'inside'` (default) and `'outside'`.
 
 {{"demo": "BarLabelPlacement.js"}}
 

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

@@ -12,7 +12,10 @@
         "description": "'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined)"
       }
     },
-    "barLabelPlacement": { "type": { "description": "'inside' | 'above'" }, "default": "'inside'" },
+    "barLabelPlacement": {
+      "type": { "description": "'inside' | 'outside'" },
+      "default": "'inside'"
+    },
     "color": { "type": { "description": "string" } },
     "colorGetter": {
       "type": { "description": "(data: ColorCallbackValue<TValue>) => string" }

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

@@ -2,7 +2,7 @@
   "componentDescription": "",
   "propDescriptions": {
     "barLabelPlacement": {
-      "description": "The placement of the bar label. It controls whether the label is placed inside the bar or above it."
+      "description": "The placement of the bar label. It controls whether the label is rendered inside or outside the bar."
     },
     "height": { "description": "Height of the bar this label belongs to." },
     "width": { "description": "Width of the bar this label belongs to." },

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

@@ -5,7 +5,7 @@
       "description": "If provided, the function will be used to format the label of the bar. It can be set to 'value' to display the current value."
     },
     "barLabelPlacement": {
-      "description": "The placement of the bar label. It controls whether the label is placed inside the bar or above it."
+      "description": "The placement of the bar label. It controls whether the label is rendered inside or outside the bar."
     },
     "borderRadius": { "description": "Defines the border radius of the bar element." },
     "onItemClick": {

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

@@ -6,7 +6,7 @@
       "description": "If provided, the function will be used to format the label of the bar.<br />It can be set to &#39;value&#39; to display the current value."
     },
     "barLabelPlacement": {
-      "description": "The placement of the bar label.<br />It controls whether the label is placed inside the bar or above it."
+      "description": "The placement of the bar label.<br />It controls whether the label is rendered inside or outside the bar."
     },
     "color": {
       "description": "Color to use when displaying the series.<br />If <code>colorGetter</code> is provided, it will be used to get the color for each data point instead.<br />Otherwise, this color will be used for all data points in the series."

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

@@ -59,10 +59,10 @@ export type BarLabelProps = Omit<
     height: number;
     /**
      * The placement of the bar label.
-     * It controls whether the label is placed inside the bar or above it.
+     * It controls whether the label is rendered inside or outside the bar.
      * @default 'inside'
      */
-    barLabelPlacement?: 'inside' | 'above';
+    barLabelPlacement?: 'inside' | 'outside';
     value: number | null;
   };
 
@@ -95,7 +95,7 @@ BarLabel.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  barLabelPlacement: PropTypes.oneOf(['above', 'inside']),
+  barLabelPlacement: PropTypes.oneOf(['outside', 'inside']),
   classes: PropTypes.object,
   dataIndex: PropTypes.number.isRequired,
   /**

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

@@ -185,9 +185,9 @@ BarPlot.propTypes = {
   barLabel: PropTypes.oneOfType([PropTypes.oneOf(['value']), PropTypes.func]),
   /**
    * The placement of the bar label.
-   * It controls whether the label is placed inside the bar or above it.
+   * It controls whether the label is rendered inside or outside the bar.
    */
-  barLabelPlacement: PropTypes.oneOf(['above', 'inside']),
+  barLabelPlacement: PropTypes.oneOf(['outside', 'inside']),
   /**
    * Defines the border radius of the bar element.
    */