[@mantine/charts] Fix valueFormatter prop not working correctly wit…

…h `orientation="vertical"` in BarChart, AreaChart and LineChart components (#6979)
mantinedev · Oct 16, 2024 · 7567fec · 7567fec
1 parent bb19ad7
commit 7567fec
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 3 deletions.
diff --git a/packages/@mantine/charts/src/AreaChart/AreaChart.story.tsx b/packages/@mantine/charts/src/AreaChart/AreaChart.story.tsx
@@ -189,6 +189,28 @@ export function Vertical() {
   );
 }
 
+export function VerticalValueFormatter() {
+  return (
+    <div style={{ padding: 40 }}>
+      <AreaChart
+        h={400}
+        data={data}
+        dataKey="date"
+        curveType="linear"
+        withGradient
+        withLegend
+        orientation="vertical"
+        valueFormatter={(value) => `$ ${value * 2}`}
+        series={[
+          { name: 'Apples', color: 'indigo.6' },
+          { name: 'Oranges', color: 'blue.6' },
+          { name: 'Tomatoes', color: 'teal.6' },
+        ]}
+      />
+    </div>
+  );
+}
+
 export function WithLegend() {
   return (
     <div style={{ padding: 40 }}>

diff --git a/packages/@mantine/charts/src/AreaChart/AreaChart.tsx b/packages/@mantine/charts/src/AreaChart/AreaChart.tsx
@@ -326,6 +326,8 @@ export const AreaChart = factory<AreaChartFactory>((_props, ref) => {
     );
   });
 
+  const tickFormatter = type === 'percent' ? valueToPercent : valueFormatter;
+
   const sharedYAxisProps = {
     axisLine: false,
     ...(orientation === 'vertical'
@@ -334,7 +336,7 @@ export const AreaChart = factory<AreaChartFactory>((_props, ref) => {
     tickLine: withYTickLine ? { stroke: 'currentColor' } : false,
     allowDecimals: true,
     unit,
-    tickFormatter: type === 'percent' ? valueToPercent : valueFormatter,
+    tickFormatter: orientation === 'vertical' ? undefined : tickFormatter,
     ...getStyles('axis'),
   };
 
@@ -392,6 +394,7 @@ export const AreaChart = factory<AreaChartFactory>((_props, ref) => {
             interval="preserveStartEnd"
             tickLine={withXTickLine ? { stroke: 'currentColor' } : false}
             minTickGap={5}
+            tickFormatter={orientation === 'vertical' ? tickFormatter : undefined}
             {...getStyles('axis')}
             {...xAxisProps}
           >

diff --git a/packages/@mantine/charts/src/BarChart/BarChart.story.tsx b/packages/@mantine/charts/src/BarChart/BarChart.story.tsx
@@ -155,3 +155,23 @@ export function ReferenceLines() {
     </div>
   );
 }
+
+export function VerticalOrientationValueFormatter() {
+  return (
+    <BarChart
+      h={300}
+      p="xl"
+      data={data}
+      dataKey="month"
+      type="stacked"
+      orientation="vertical"
+      valueFormatter={(value) => `${value * 2}%`}
+      yAxisProps={{ width: 80 }}
+      series={[
+        { name: 'Smartphones', color: 'violet.6' },
+        { name: 'Laptops', color: 'blue.6' },
+        { name: 'Tablets', color: 'teal.6' },
+      ]}
+    />
+  );
+}
diff --git a/packages/@mantine/charts/src/BarChart/BarChart.tsx b/packages/@mantine/charts/src/BarChart/BarChart.tsx
@@ -295,6 +295,8 @@ export const BarChart = factory<BarChartFactory>((_props, ref) => {
     );
   });
 
+  const tickFormatter = type === 'percent' ? valueToPercent : valueFormatter;
+
   const sharedYAxisProps = {
     axisLine: false,
     ...(orientation === 'vertical'
@@ -303,7 +305,7 @@ export const BarChart = factory<BarChartFactory>((_props, ref) => {
     tickLine: withYTickLine ? { stroke: 'currentColor' } : false,
     allowDecimals: true,
     unit,
-    tickFormatter: type === 'percent' ? valueToPercent : valueFormatter,
+    tickFormatter: orientation === 'vertical' ? undefined : tickFormatter,
     ...getStyles('axis'),
   };
 
@@ -354,6 +356,7 @@ export const BarChart = factory<BarChartFactory>((_props, ref) => {
             interval="preserveStartEnd"
             tickLine={withXTickLine ? { stroke: 'currentColor' } : false}
             minTickGap={5}
+            tickFormatter={orientation === 'vertical' ? tickFormatter : undefined}
             {...getStyles('axis')}
             {...xAxisProps}
           >

diff --git a/packages/@mantine/charts/src/LineChart/LineChart.story.tsx b/packages/@mantine/charts/src/LineChart/LineChart.story.tsx
@@ -143,6 +143,26 @@ export function Vertical() {
   );
 }
 
+export function VerticalValueFormatter() {
+  return (
+    <div style={{ padding: 40 }}>
+      <LineChart
+        h={300}
+        data={data}
+        dataKey="date"
+        orientation="vertical"
+        valueFormatter={(value) => `$ ${value * 2}`}
+        series={[
+          { name: 'Apples', color: 'indigo.6' },
+          { name: 'Oranges', color: 'blue.6' },
+          { name: 'Tomatoes', color: 'teal.6' },
+        ]}
+        withLegend
+      />
+    </div>
+  );
+}
+
 export function ReferenceLines() {
   return (
     <div style={{ padding: 40 }}>

diff --git a/packages/@mantine/charts/src/LineChart/LineChart.tsx b/packages/@mantine/charts/src/LineChart/LineChart.tsx
@@ -316,7 +316,7 @@ export const LineChart = factory<LineChartFactory>((_props, ref) => {
     tickLine: withYTickLine ? { stroke: 'currentColor' } : false,
     allowDecimals: true,
     unit,
-    tickFormatter: valueFormatter,
+    tickFormatter: orientation === 'vertical' ? undefined : valueFormatter,
     ...getStyles('axis'),
   };
 
@@ -373,6 +373,7 @@ export const LineChart = factory<LineChartFactory>((_props, ref) => {
             interval="preserveStartEnd"
             tickLine={withXTickLine ? { stroke: 'currentColor' } : false}
             minTickGap={5}
+            tickFormatter={orientation === 'vertical' ? valueFormatter : undefined}
             {...getStyles('axis')}
             {...xAxisProps}
           >