fix(charts): fix description and behavior of chartConfig.legendPosition (#4911)

Author: Lukas742

packages/charts/src/components/BarChart/BarChart.tsx

@@ -214,7 +214,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
   const isBigDataSet = dataset?.length > 30;
   const primaryDimensionAccessor = primaryDimension?.accessor;
 
-  const [width, legendPosition] = useLongestYAxisLabelBar(dataset, dimensions);
+  const [width, legendPosition] = useLongestYAxisLabelBar(dataset, dimensions, chartConfig.legendPosition);
   const marginChart = useChartMargin(chartConfig.margin, chartConfig.zoomingTool);
   const [xAxisHeight] = useObserveXAxisHeights(chartRef, 1);
   const isRTL = useIsRTL(chartRef);

packages/charts/src/components/BulletChart/BulletChart.tsx

@@ -242,7 +242,8 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
 
   const [yAxisWidth, legendPosition] = useLongestYAxisLabel(
     dataset,
-    layout === 'vertical' ? dimensions : sortedMeasures
+    layout === 'vertical' ? dimensions : sortedMeasures,
+    chartConfig.legendPosition
   );
 
   const marginChart = useChartMargin(chartConfig.margin, chartConfig.zoomingTool);

packages/charts/src/components/ColumnChart/ColumnChart.tsx

@@ -171,7 +171,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
 
   const tooltipValueFormatter = useTooltipFormatter(measures);
 
-  const [yAxisWidth, legendPosition] = useLongestYAxisLabel(dataset, measures);
+  const [yAxisWidth, legendPosition] = useLongestYAxisLabel(dataset, measures, chartConfig.legendPosition);
 
   const primaryDimension = dimensions[0];
   const { primaryMeasure, secondaryMeasure } = resolvePrimaryAndSecondaryMeasures(

packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.tsx

@@ -144,7 +144,7 @@ const ColumnChartWithTrend = forwardRef<HTMLDivElement, ColumnChartWithTrendProp
   );
 
   const { lineMeasures, columnMeasures, columnDataset } = usePrepareTrendMeasures(measures, dataset);
-  const [yAxisWidth] = useLongestYAxisLabel(columnDataset, columnMeasures);
+  const [yAxisWidth] = useLongestYAxisLabel(columnDataset, columnMeasures, chartConfig.legendPosition);
 
   const columnTooltipConfig = {
     formatter: (value, name, tooltipProps) => {

packages/charts/src/components/ComposedChart/index.tsx

@@ -246,7 +246,11 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
   const isBigDataSet = dataset?.length > 30 ?? false;
   const primaryDimensionAccessor = primaryDimension?.accessor;
 
-  const [yAxisWidth, legendPosition] = useLongestYAxisLabel(dataset, layout === 'vertical' ? dimensions : measures);
+  const [yAxisWidth, legendPosition] = useLongestYAxisLabel(
+    dataset,
+    layout === 'vertical' ? dimensions : measures,
+    chartConfig.legendPosition
+  );
 
   const marginChart = useChartMargin(chartConfig.margin, chartConfig.zoomingTool);
   const xAxisHeights = useObserveXAxisHeights(chartRef, layout === 'vertical' ? 1 : props.dimensions.length);

packages/charts/src/components/LineChart/LineChart.tsx

@@ -203,7 +203,7 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
   const isBigDataSet = dataset?.length > 30 ?? false;
   const primaryDimensionAccessor = primaryDimension?.accessor;
 
-  const [yAxisWidth, legendPosition] = useLongestYAxisLabel(dataset, measures);
+  const [yAxisWidth, legendPosition] = useLongestYAxisLabel(dataset, measures, chartConfig.legendPosition);
   const marginChart = useChartMargin(chartConfig.margin, chartConfig.zoomingTool);
   const xAxisHeights = useObserveXAxisHeights(chartRef, props.dimensions.length);
   const { chartConfig: _0, dimensions: _1, measures: _2, ...propsWithoutOmitted } = rest;

packages/charts/src/components/ScatterChart/ScatterChart.tsx

@@ -206,7 +206,7 @@ const ScatterChart = forwardRef<HTMLDivElement, ScatterChartProps>((props, ref)
   const yMeasure = measures.find(({ axis }) => axis === 'y');
   const zMeasure = measures.find(({ axis }) => axis === 'z');
 
-  const [yAxisWidth, legendPosition] = useLongestYAxisLabel(dataset?.[0]?.data, [yMeasure]);
+  const [yAxisWidth, legendPosition] = useLongestYAxisLabel(dataset?.[0]?.data, [yMeasure], chartConfig.legendPosition);
   const xAxisHeights = useObserveXAxisHeights(chartRef, 1);
   const marginChart = useChartMargin(chartConfig.margin, chartConfig.zoomingTool);
   const { chartConfig: _0, measures: _1, ...propsWithoutOmitted } = rest;

packages/charts/src/hooks/useLongestYAxisLabel.ts

@@ -3,7 +3,7 @@ import { getValueByDataKey } from 'recharts/lib/util/ChartUtils.js';
 import { defaultMaxYAxisWidth } from '../internal/defaults.js';
 import { getTextWidth } from '../internal/Utils.js';
 
-export const useLongestYAxisLabel = (dataset: unknown[], elements): [number, object] =>
+export const useLongestYAxisLabel = (dataset: unknown[], elements, legendPosition: string): [number, object] =>
   useMemo(() => {
     let labelLength = 0;
     const primaryElement = elements[0];
@@ -20,5 +20,9 @@ export const useLongestYAxisLabel = (dataset: unknown[], elements): [number, obj
 
     labelLength = Math.min(labelLength, defaultMaxYAxisWidth);
 
+    if (legendPosition === 'middle') {
+      return [labelLength, { width: 'auto' }];
+    }
+
     return [labelLength, { marginLeft: labelLength, maxWidth: `calc(100% - ${labelLength + 10}px)` }];
   }, [dataset, elements]);

packages/charts/src/hooks/useLongestYAxisLabelBar.ts

@@ -3,7 +3,7 @@ import { getValueByDataKey } from 'recharts/lib/util/ChartUtils.js';
 import { defaultMaxYAxisWidth } from '../internal/defaults.js';
 import { getTextWidth } from '../internal/Utils.js';
 
-export const useLongestYAxisLabelBar = (dataset: unknown[], elements): [number[], object] =>
+export const useLongestYAxisLabelBar = (dataset: unknown[], elements, legendPosition = ''): [number[], object] =>
   useMemo(() => {
     let axisWidths = Array(elements.length).fill(0);
     let marginLeft = 0;
@@ -25,6 +25,8 @@ export const useLongestYAxisLabelBar = (dataset: unknown[], elements): [number[]
       axisWidths = axisWidths.map((length) => Math.min(defaultMaxYAxisWidth, length));
       marginLeft = axisWidths.reduce((acc, val) => acc + val, 0);
     }
-
+    if (legendPosition === 'middle') {
+      return [axisWidths, { width: 'auto' }];
+    }
     return [axisWidths, { marginLeft, maxWidth: `calc(100% - ${marginLeft + 8}px)` }];
   }, [dataset, elements]);

packages/charts/src/interfaces/IChartBaseProps.ts

@@ -58,7 +58,7 @@ export interface IChartBaseProps<T = ICartesianChartConfig> extends Omit<CommonP
    * **Properties available on all charts:**
    *
    * - `margin`: Sets the margin of the chart container. Receives a object with four possible properties (`right`, `left`, `top`, `bottom`) that expect a number as value.
-   * - `legendPosition`: Position of the legend. Can be one of the following: `"top"`, `"left"`, `"right"`, `"bottom"`
+   * - `legendPosition`: Vertical position of the legend. Can be one of the following: `"top"`,`"middle"`, `"bottom"` (`"middle"` is not supported for: ColumnChartWithTrend, DonutChart, PieChart)
    * - `legendHorizontalAlign`: Alignment of the legend. Can be one of the following: `"left"`, `"center"`, `"right"`
    * - `resizeDebounce`: Number that sets the amount of delay time the chart waits when resizing.
    *
@@ -75,11 +75,11 @@ export interface IChartBaseProps<T = ICartesianChartConfig> extends Omit<CommonP
       bottom: number;
     };
     /**
-     * Position of the legend. Can be one of the following: `"top"`, `"left"`, `"right"`, `"bottom"`
+     * Vertical position of the legend. Can be one of the following: `"top"`,`"middle"`, `"bottom"` (`"middle"` is not supported for: ColumnChartWithTrend, DonutChart, PieChart)
      */
     legendPosition?: string;
     /**
-     * Alignment of the legend. Can be one of the following: `"left"`, `"center"`, `"right"`
+     * Horizontal alignment of the legend. Can be one of the following: `"left"`, `"center"`, `"right"`
      */
     legendHorizontalAlign?: string;
     /**