[@mantine/charts] Fix unexpected padding on the right side of the cha…

…rt in BarChart, AreaChart and LineChart components (#6467)
mantinedev · Jun 28, 2024 · 0c5e3bb · 0c5e3bb
1 parent c7e52e4
commit 0c5e3bb
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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}