[@mantine/charts] Fix valueFormatter not working in point labels of…

… LineChant, AreaChart and CompositeChart components (#6989)
mantinedev · Nov 16, 2024 · ed68c87 · ed68c87
1 parent 5c04b62
commit ed68c87
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 6 deletions.
diff --git a/packages/@mantine/charts/src/AreaChart/AreaChart.tsx b/packages/@mantine/charts/src/AreaChart/AreaChart.tsx
@@ -299,7 +299,7 @@ export const AreaChart = factory<AreaChartFactory>((_props, ref) => {
           strokeOpacity={dimmed ? 0.5 : 1}
           strokeDasharray={item.strokeDasharray}
           yAxisId={item.yAxisId || 'left'}
-          label={withPointLabels ? <PointLabel /> : undefined}
+          label={withPointLabels ? <PointLabel valueFormatter={valueFormatter} /> : undefined}
           {...(typeof areaProps === 'function' ? areaProps(item) : areaProps)}
         />
       </Fragment>

diff --git a/packages/@mantine/charts/src/CompositeChart/CompositeChart.story.tsx b/packages/@mantine/charts/src/CompositeChart/CompositeChart.story.tsx
@@ -55,6 +55,7 @@ export function Usage() {
         ]}
         withLegend
         withPointLabels
+        valueFormatter={(value) => `$ ${value}`}
       />
     </div>
   );

diff --git a/packages/@mantine/charts/src/CompositeChart/CompositeChart.tsx b/packages/@mantine/charts/src/CompositeChart/CompositeChart.tsx
@@ -276,7 +276,7 @@ export const CompositeChart = factory<CompositeChartFactory>((_props, ref) => {
           type={curveType}
           strokeDasharray={item.strokeDasharray}
           yAxisId={item.yAxisId || 'left'}
-          label={withPointLabels ? <PointLabel /> : undefined}
+          label={withPointLabels ? <PointLabel valueFormatter={valueFormatter} /> : undefined}
           {...(typeof lineProps === 'function' ? lineProps(item) : lineProps)}
         />
       );
@@ -322,7 +322,7 @@ export const CompositeChart = factory<CompositeChartFactory>((_props, ref) => {
           strokeOpacity={dimmed ? 0.5 : 1}
           strokeDasharray={item.strokeDasharray}
           yAxisId={item.yAxisId || 'left'}
-          label={withPointLabels ? <PointLabel /> : undefined}
+          label={withPointLabels ? <PointLabel valueFormatter={valueFormatter} /> : undefined}
           {...(typeof areaProps === 'function' ? areaProps(item) : areaProps)}
         />
       );

diff --git a/packages/@mantine/charts/src/LineChart/LineChart.story.tsx b/packages/@mantine/charts/src/LineChart/LineChart.story.tsx
@@ -69,6 +69,7 @@ export function Usage() {
           { name: 'Oranges', color: 'blue.6' },
           { name: 'Tomatoes', color: 'teal.6' },
         ]}
+        valueFormatter={(value) => `$ ${value}`}
         withLegend
         withPointLabels
       />

diff --git a/packages/@mantine/charts/src/LineChart/LineChart.tsx b/packages/@mantine/charts/src/LineChart/LineChart.tsx
@@ -282,7 +282,7 @@ export const LineChart = factory<LineChartFactory>((_props, ref) => {
         type={curveType}
         strokeDasharray={item.strokeDasharray}
         yAxisId={item.yAxisId || 'left'}
-        label={withPointLabels ? <PointLabel /> : undefined}
+        label={withPointLabels ? <PointLabel valueFormatter={valueFormatter} /> : undefined}
         {...(typeof lineProps === 'function' ? lineProps(item) : lineProps)}
       />
     );

diff --git a/packages/@mantine/charts/src/PointLabel/PointLabel.tsx b/packages/@mantine/charts/src/PointLabel/PointLabel.tsx
@@ -2,9 +2,10 @@ interface PointLabelProps {
   x?: number;
   y?: number;
   value?: number;
+  valueFormatter?: (value: number) => string;
 }
 
-export function PointLabel({ x, y, value }: PointLabelProps) {
+export function PointLabel({ x, y, value, valueFormatter }: PointLabelProps) {
   return (
     <g transform={`translate(${x},${y})`}>
       <text
@@ -16,7 +17,7 @@ export function PointLabel({ x, y, value }: PointLabelProps) {
         fill="var(--chart-text-color, var(--mantine-color-dimmed))"
         fontSize={8}
       >
-        {value}
+        {valueFormatter ? valueFormatter(value!) : value}
       </text>
     </g>
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -55,6 +55,7 @@ export function Usage() { @@
             ]}
             withLegend
             withPointLabels
+            valueFormatter={(value) => `$ ${value}`}
           />
         </div>
       );
@@ Expand Down @@