From 0c5e3bb72079df29311902e7d00e7265ce7c6b1d Mon Sep 17 00:00:00 2001
From: Vitaly Rtishchev <rtivital@gmail.com>
Date: Fri, 28 Jun 2024 12:52:04 +0400
Subject: [PATCH] [@mantine/charts] Fix unexpected padding on the right side of
 the chart in BarChart, AreaChart and LineChart components (#6467)

---
 packages/@mantine/charts/src/AreaChart/AreaChart.tsx  | 11 ++++++-----
 .../@mantine/charts/src/BarChart/BarChart.story.tsx   |  2 +-
 packages/@mantine/charts/src/BarChart/BarChart.tsx    | 11 ++++++-----
 packages/@mantine/charts/src/LineChart/LineChart.tsx  | 11 ++++++-----
 4 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/@mantine/charts/src/AreaChart/AreaChart.tsx b/packages/@mantine/charts/src/AreaChart/AreaChart.tsx
index e30e8368b3..157b9df97b 100644
--- a/packages/@mantine/charts/src/AreaChart/AreaChart.tsx
+++ b/packages/@mantine/charts/src/AreaChart/AreaChart.tsx
@@ -321,7 +321,6 @@ export const AreaChart = factory<AreaChartFactory>((_props, ref) => {
   });
 
   const sharedYAxisProps = {
-    hide: !withYAxis,
     axisLine: false,
     ...(orientation === 'vertical'
       ? { dataKey, type: 'category' as const }
@@ -402,10 +401,11 @@ export const AreaChart = factory<AreaChartFactory>((_props, ref) => {
             yAxisId="left"
             orientation="left"
             tick={{ transform: 'translate(-10, 0)', fontSize: 12, fill: 'currentColor' }}
+            hide={!withYAxis}
             {...sharedYAxisProps}
             {...yAxisProps}
           >
-            {rightYAxisLabel && (
+            {yAxisLabel && (
               <Label
                 position="insideLeft"
                 angle={-90}
@@ -414,7 +414,7 @@ export const AreaChart = factory<AreaChartFactory>((_props, ref) => {
                 offset={-5}
                 {...getStyles('axisLabel')}
               >
-                {rightYAxisLabel}
+                {yAxisLabel}
               </Label>
             )}
             {yAxisProps?.children}
@@ -424,10 +424,11 @@ export const AreaChart = factory<AreaChartFactory>((_props, ref) => {
             yAxisId="right"
             orientation="right"
             tick={{ transform: 'translate(10, 0)', fontSize: 12, fill: 'currentColor' }}
+            hide={!withRightYAxis}
             {...sharedYAxisProps}
             {...rightYAxisProps}
           >
-            {yAxisLabel && (
+            {rightYAxisLabel && (
               <Label
                 position="insideRight"
                 angle={90}
@@ -436,7 +437,7 @@ export const AreaChart = factory<AreaChartFactory>((_props, ref) => {
                 offset={-5}
                 {...getStyles('axisLabel')}
               >
-                {yAxisLabel}
+                {rightYAxisLabel}
               </Label>
             )}
             {yAxisProps?.children}
diff --git a/packages/@mantine/charts/src/BarChart/BarChart.story.tsx b/packages/@mantine/charts/src/BarChart/BarChart.story.tsx
index 92f536ab58..4a21d3b3be 100644
--- a/packages/@mantine/charts/src/BarChart/BarChart.story.tsx
+++ b/packages/@mantine/charts/src/BarChart/BarChart.story.tsx
@@ -33,7 +33,7 @@ const waterfallData = [
 
 export function Usage() {
   return (
-    <div style={{ padding: 40 }}>
+    <div style={{ background: 'silver' }}>
       <BarChart
         h={300}
         data={simpleData}
diff --git a/packages/@mantine/charts/src/BarChart/BarChart.tsx b/packages/@mantine/charts/src/BarChart/BarChart.tsx
index 34c8417c43..1f75228512 100644
--- a/packages/@mantine/charts/src/BarChart/BarChart.tsx
+++ b/packages/@mantine/charts/src/BarChart/BarChart.tsx
@@ -279,7 +279,6 @@ export const BarChart = factory<BarChartFactory>((_props, ref) => {
   });
 
   const sharedYAxisProps = {
-    hide: !withYAxis,
     axisLine: false,
     ...(orientation === 'vertical'
       ? { dataKey, type: 'category' as const }
@@ -352,10 +351,11 @@ export const BarChart = factory<BarChartFactory>((_props, ref) => {
             yAxisId="left"
             orientation="left"
             tick={{ transform: 'translate(-10, 0)', fontSize: 12, fill: 'currentColor' }}
+            hide={!withYAxis}
             {...sharedYAxisProps}
             {...yAxisProps}
           >
-            {rightYAxisLabel && (
+            {yAxisLabel && (
               <Label
                 position="insideLeft"
                 angle={-90}
@@ -364,7 +364,7 @@ export const BarChart = factory<BarChartFactory>((_props, ref) => {
                 offset={-5}
                 {...getStyles('axisLabel')}
               >
-                {rightYAxisLabel}
+                {yAxisLabel}
               </Label>
             )}
             {yAxisProps?.children}
@@ -374,10 +374,11 @@ export const BarChart = factory<BarChartFactory>((_props, ref) => {
             yAxisId="right"
             orientation="right"
             tick={{ transform: 'translate(10, 0)', fontSize: 12, fill: 'currentColor' }}
+            hide={!withRightYAxis}
             {...sharedYAxisProps}
             {...rightYAxisProps}
           >
-            {yAxisLabel && (
+            {rightYAxisLabel && (
               <Label
                 position="insideRight"
                 angle={90}
@@ -386,7 +387,7 @@ export const BarChart = factory<BarChartFactory>((_props, ref) => {
                 offset={-5}
                 {...getStyles('axisLabel')}
               >
-                {yAxisLabel}
+                {rightYAxisLabel}
               </Label>
             )}
             {yAxisProps?.children}
diff --git a/packages/@mantine/charts/src/LineChart/LineChart.tsx b/packages/@mantine/charts/src/LineChart/LineChart.tsx
index 4a2faa3c85..e2d90636f8 100644
--- a/packages/@mantine/charts/src/LineChart/LineChart.tsx
+++ b/packages/@mantine/charts/src/LineChart/LineChart.tsx
@@ -303,7 +303,6 @@ export const LineChart = factory<LineChartFactory>((_props, ref) => {
   });
 
   const sharedYAxisProps = {
-    hide: !withYAxis,
     axisLine: false,
     ...(orientation === 'vertical'
       ? { dataKey, type: 'category' as const }
@@ -383,10 +382,11 @@ export const LineChart = factory<LineChartFactory>((_props, ref) => {
             yAxisId="left"
             orientation="left"
             tick={{ transform: 'translate(-10, 0)', fontSize: 12, fill: 'currentColor' }}
+            hide={!withYAxis}
             {...sharedYAxisProps}
             {...yAxisProps}
           >
-            {rightYAxisLabel && (
+            {yAxisLabel && (
               <Label
                 position="insideLeft"
                 angle={-90}
@@ -395,7 +395,7 @@ export const LineChart = factory<LineChartFactory>((_props, ref) => {
                 offset={-5}
                 {...getStyles('axisLabel')}
               >
-                {rightYAxisLabel}
+                {yAxisLabel}
               </Label>
             )}
             {yAxisProps?.children}
@@ -405,10 +405,11 @@ export const LineChart = factory<LineChartFactory>((_props, ref) => {
             yAxisId="right"
             orientation="right"
             tick={{ transform: 'translate(10, 0)', fontSize: 12, fill: 'currentColor' }}
+            hide={!withRightYAxis}
             {...sharedYAxisProps}
             {...rightYAxisProps}
           >
-            {yAxisLabel && (
+            {rightYAxisLabel && (
               <Label
                 position="insideRight"
                 angle={90}
@@ -417,7 +418,7 @@ export const LineChart = factory<LineChartFactory>((_props, ref) => {
                 offset={-5}
                 {...getStyles('axisLabel')}
               >
-                {yAxisLabel}
+                {rightYAxisLabel}
               </Label>
             )}
             {yAxisProps?.children}