[@mantine/charts] BarChart: Fix incorrect labels positions in some ca…

…ses (#7160) * [@mantine/charts] BarChart: Use `LabelList` instead of `BarLabel`, and add `valueLabelProps` option support. * [@mantine/charts] BarChart: Simplify position logic for LabelList based on orientation * [@mantine/charts] prettier format
mantinedev · Nov 24, 2024 · 931565c · 931565c
1 parent b78faa0
commit 931565c
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 38 deletions.
diff --git a/apps/mantine.dev/src/pages/charts/bar-chart.mdx b/apps/mantine.dev/src/pages/charts/bar-chart.mdx
@@ -237,3 +237,12 @@ rendered behind the chart.
 To display value above each bar, set `withBarValueLabel`:
 
 <Demo data={BarChartDemos.barValueLabel} />
+
+## Bar value label props
+
+You can pass props down to recharts [LabelList](https://recharts.org/en-US/api/LabelList)
+component with `valueLabelProps` prop. `valueLabelProps` accepts either an object with props
+or a function that receives series data as an argument and returns an object with
+props.
+
+<Demo data={BarChartDemos.valueLabelProps} />
diff --git a/packages/@docs/demos/src/demos/charts/BarChart/BarChart.demo.valueLabelProps.tsx b/packages/@docs/demos/src/demos/charts/BarChart/BarChart.demo.valueLabelProps.tsx
@@ -0,0 +1,53 @@
+import { BarChart } from '@mantine/charts';
+import { MantineDemo } from '@mantinex/demo';
+import { data, dataCode } from './_data';
+
+const code = `
+import { BarChart } from '@mantine/charts';
+import { data } from './data';
+
+function Demo() {
+  return (
+    <BarChart
+      h={300}
+      data={data}
+      dataKey="month"
+      valueFormatter={(value) => new Intl.NumberFormat('en-US').format(value)}
+      withBarValueLabel
+      valueLabelProps={{ position: 'inside', fill: 'white' }}
+      series={[
+        { name: 'Smartphones', color: 'violet.6' },
+        { name: 'Laptops', color: 'blue.6' },
+        { name: 'Tablets', color: 'teal.6' },
+      ]}
+    />
+  );
+}
+`;
+
+function Demo() {
+  return (
+    <BarChart
+      h={300}
+      data={data}
+      dataKey="month"
+      valueFormatter={(value) => new Intl.NumberFormat('en-US').format(value)}
+      withBarValueLabel
+      valueLabelProps={{ position: 'inside', fill: 'white' }}
+      series={[
+        { name: 'Smartphones', color: 'violet.6' },
+        { name: 'Laptops', color: 'blue.6' },
+        { name: 'Tablets', color: 'teal.6' },
+      ]}
+    />
+  );
+}
+
+export const valueLabelProps: MantineDemo = {
+  type: 'code',
+  component: Demo,
+  code: [
+    { code, language: 'tsx', fileName: 'Demo.tsx' },
+    { code: dataCode, language: 'tsx', fileName: 'data.ts' },
+  ],
+};
diff --git a/packages/@docs/demos/src/demos/charts/BarChart/BarChart.demos.story.tsx b/packages/@docs/demos/src/demos/charts/BarChart/BarChart.demos.story.tsx
@@ -128,6 +128,11 @@ export const Demo_barValueLabel = {
   render: renderDemo(demos.barValueLabel),
 };
 
+export const Demo_valueLabelProps = {
+  name: '⭐ Demo: valueLabelProps',
+  render: renderDemo(demos.valueLabelProps),
+};
+
 export const Demo_minBarSize = {
   name: '⭐ Demo: minBarSize',
   render: renderDemo(demos.minBarSize),

diff --git a/packages/@docs/demos/src/demos/charts/BarChart/index.ts b/packages/@docs/demos/src/demos/charts/BarChart/index.ts
@@ -26,3 +26,4 @@ export { barValueLabel } from './BarChart.demo.barValueLabel';
 export { minBarSize } from './BarChart.demo.minBarSize';
 export { mixedStack } from './BarChart.demo.mixedStack';
 export { stripes } from './BarChart.demo.stripes';
+export { valueLabelProps } from './BarChart.demo.valueLabelProps';
diff --git a/packages/@mantine/charts/src/BarChart/BarChart.tsx b/packages/@mantine/charts/src/BarChart/BarChart.tsx
@@ -5,6 +5,8 @@ import {
   CartesianGrid,
   Cell,
   Label,
+  LabelList,
+  LabelListProps,
   Legend,
   BarChart as ReChartsBarChart,
   ReferenceLine,
@@ -31,7 +33,6 @@ import {
 import { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';
 import { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';
 import type { BaseChartStylesNames, ChartSeries, GridChartBaseProps } from '../types';
-import { BarLabel } from './BarLabel';
 import classes from '../grid-chart.module.css';
 
 function valueToPercent(value: number) {
@@ -92,6 +93,11 @@ export interface BarChartProps
   /** Determines whether a label with bar value should be displayed on top of each bar, incompatible with `type="stacked"` and `type="percent"`, `false` by default */
   withBarValueLabel?: boolean;
 
+  /** Props passed down to recharts `LabelList` component */
+  valueLabelProps?:
+    | ((series: BarChartSeries) => Partial<Omit<LabelListProps<Record<string, any>>, 'ref'>>)
+    | Partial<LabelListProps<Record<string, any>>>;
+
   /** Sets minimum height of the bar in px, `0` by default */
   minBarSize?: number;
 
@@ -202,6 +208,7 @@ export const BarChart = factory<BarChartFactory>((_props, ref) => {
     xAxisLabel,
     yAxisLabel,
     withBarValueLabel,
+    valueLabelProps,
     withRightYAxis,
     rightYAxisLabel,
     rightYAxisProps,
@@ -217,6 +224,8 @@ export const BarChart = factory<BarChartFactory>((_props, ref) => {
   const [highlightedArea, setHighlightedArea] = useState<string | null>(null);
   const shouldHighlight = highlightedArea !== null;
   const stacked = type === 'stacked' || type === 'percent';
+  const tickFormatter = type === 'percent' ? valueToPercent : valueFormatter;
+
   const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {
     setHighlightedArea(null);
     onMouseLeave?.(event);
@@ -258,11 +267,6 @@ export const BarChart = factory<BarChartFactory>((_props, ref) => {
         fillOpacity={dimmed ? 0.1 : fillOpacity}
         strokeOpacity={dimmed ? 0.2 : 0}
         stackId={stacked ? 'stack' : item.stackId || undefined}
-        label={
-          withBarValueLabel ? (
-            <BarLabel valueFormatter={valueFormatter} orientation={orientation} />
-          ) : undefined
-        }
         yAxisId={item.yAxisId || 'left'}
         minPointSize={minBarSize}
         {...(typeof barProps === 'function' ? barProps(item) : barProps)}
@@ -275,6 +279,15 @@ export const BarChart = factory<BarChartFactory>((_props, ref) => {
             }
           />
         ))}
+        {withBarValueLabel && (
+          <LabelList
+            position={orientation === 'vertical' ? 'right' : 'top'}
+            fontSize={12}
+            fill="var(--chart-bar-label-color, var(--mantine-color-dimmed))"
+            formatter={tickFormatter}
+            {...(typeof valueLabelProps === 'function' ? valueLabelProps(item) : valueLabelProps)}
+          />
+        )}
       </Bar>
     );
   });
@@ -299,8 +312,6 @@ export const BarChart = factory<BarChartFactory>((_props, ref) => {
     );
   });
 
-  const tickFormatter = type === 'percent' ? valueToPercent : valueFormatter;
-
   const sharedYAxisProps = {
     axisLine: false,
     ...(orientation === 'vertical'

diff --git a/packages/@mantine/charts/src/BarChart/BarLabel.tsx b/packages/@mantine/charts/src/BarChart/BarLabel.tsx
diff --git a/packages/@mantine/charts/src/CompositeChart/CompositeChart.tsx b/packages/@mantine/charts/src/CompositeChart/CompositeChart.tsx
@@ -7,6 +7,7 @@ import {
   CartesianGrid,
   DotProps,
   Label,
+  LabelList,
   Legend,
   Line,
   LineProps,
@@ -31,7 +32,6 @@ import {
   useResolvedStylesApi,
   useStyles,
 } from '@mantine/core';
-import { BarLabel } from '../BarChart/BarLabel';
 import { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';
 import { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';
 import { PointLabel } from '../PointLabel/PointLabel';
@@ -340,11 +340,19 @@ export const CompositeChart = factory<CompositeChartFactory>((_props, ref) => {
           isAnimationActive={false}
           fillOpacity={dimmed ? 0.1 : 1}
           strokeOpacity={dimmed ? 0.2 : 0}
-          label={withBarValueLabel ? <BarLabel valueFormatter={valueFormatter} /> : undefined}
           yAxisId={item.yAxisId || 'left'}
           minPointSize={minBarSize}
           {...(typeof barProps === 'function' ? barProps(item) : barProps)}
-        />
+        >
+          {withBarValueLabel && (
+            <LabelList
+              position="top"
+              fontSize={12}
+              fill="var(--chart-bar-label-color, var(--mantine-color-dimmed))"
+              formatter={valueFormatter}
+            />
+          )}
+        </Bar>
       );
     }
 

diff --git a/packages/@mantine/charts/src/grid-chart.module.css b/packages/@mantine/charts/src/grid-chart.module.css
@@ -22,10 +22,6 @@
     font-family: var(--mantine-font-family);
     color: var(--chart-text-color, var(--mantine-color-dimmed));
   }
-
-  &:where([data-orientation='vertical']) {
-    --chart-bar-label-color: var(--mantine-color-white);
-  }
 }
 
 .container {