diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
index 8ed63acabe333e6c6e3a230f411730e03128f43c..4531a4e1a551aa49f4e41d742b55c0c05a8faeec 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
@@ -78,12 +78,13 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
         <g>
           <g
             class="barContainer "
-            transform="translate(21.219512195121922, -40)"
+            transform="translate(21.219512195121922, -0)"
           >
             <rect
               class="background-undefined animate-background"
               fill="#E0E0E0"
-              height="240"
+              height="180"
+              rx="4"
               width="190.97560975609758"
               x="0"
               y="0"
@@ -166,12 +167,13 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
         <g>
           <g
             class="barContainer "
-            transform="translate(233.41463414634146, -40)"
+            transform="translate(233.41463414634146, -0)"
           >
             <rect
               class="background-undefined animate-background"
               fill="#E0E0E0"
-              height="240"
+              height="180"
+              rx="4"
               width="190.97560975609758"
               x="0"
               y="0"
@@ -254,12 +256,13 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
         <g>
           <g
             class="barContainer "
-            transform="translate(445.609756097561, -40)"
+            transform="translate(445.609756097561, -0)"
           >
             <rect
               class="background-undefined animate-background"
               fill="#E0E0E0"
-              height="240"
+              height="180"
+              rx="4"
               width="190.97560975609758"
               x="0"
               y="0"
@@ -342,12 +345,13 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
         <g>
           <g
             class="barContainer "
-            transform="translate(657.8048780487804, -40)"
+            transform="translate(657.8048780487804, -0)"
           >
             <rect
               class="background-undefined animate-background"
               fill="#E0E0E0"
-              height="240"
+              height="180"
+              rx="4"
               width="190.97560975609758"
               x="0"
               y="0"
diff --git a/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap b/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
index 20dc0de7175ad37086447ad652b72bc5e00d3ace..c7c8bf6896308f62513b53a28ea194c6c18772bb 100644
--- a/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
+++ b/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
@@ -116,12 +116,13 @@ exports[`MaxConsumptionCard component should be rendered correctly with 2 button
           <g>
             <g
               class="barContainer disabled"
-              transform="translate(54.6875, -40)"
+              transform="translate(54.6875, -0)"
             >
               <rect
                 class="background-true animate-background"
                 fill="#E0E0E0"
                 height="220"
+                rx="4"
                 width="218.75"
                 x="0"
                 y="0"
@@ -204,12 +205,13 @@ exports[`MaxConsumptionCard component should be rendered correctly with 2 button
           <g>
             <g
               class="barContainer disabled"
-              transform="translate(328.125, -40)"
+              transform="translate(328.125, -0)"
             >
               <rect
                 class="background-false animate-background"
                 fill="#E0E0E0"
                 height="220"
+                rx="4"
                 width="218.75"
                 x="0"
                 y="0"
@@ -292,12 +294,13 @@ exports[`MaxConsumptionCard component should be rendered correctly with 2 button
           <g>
             <g
               class="barContainer disabled"
-              transform="translate(601.5625, -40)"
+              transform="translate(601.5625, -0)"
             >
               <rect
                 class="background-false animate-background"
                 fill="#E0E0E0"
                 height="220"
+                rx="4"
                 width="218.75"
                 x="0"
                 y="0"
diff --git a/src/components/Charts/Bar.tsx b/src/components/Charts/Bar.tsx
index 4c446427f39d6e8328cadf369f1df182046027d9..23c1b7ad05923803031035b7545e1aa2b6ed5409 100644
--- a/src/components/Charts/Bar.tsx
+++ b/src/components/Charts/Bar.tsx
@@ -194,15 +194,16 @@ const Bar = ({
       {/* selected background bar */}
       {height > 0 && (
         <g
-          transform={`translate(${xScaleValue}, -40)`}
+          transform={`translate(${xScaleValue}, -0)`}
           className={`barContainer ${disabled}`}
         >
           <rect
             onClick={!weekdays ? handleClick : () => undefined}
             x="0"
             y="0"
+            rx={4}
             width={compare ? getBandWidth() * 2 : getBandWidth()}
-            height={height + 40 + (clickable ? 60 : 0)}
+            height={height + 40}
             className={`background-${isSelectedDate} animate-background`}
             fill="#E0E0E0"
           />
diff --git a/src/components/Charts/__snapshots__/Bar.spec.tsx.snap b/src/components/Charts/__snapshots__/Bar.spec.tsx.snap
index 6fdf9b44cf60b76a73aa3351c94ae714f3a675dd..74185b552c56e85f5418691a36dee96d162ac2a4 100644
--- a/src/components/Charts/__snapshots__/Bar.spec.tsx.snap
+++ b/src/components/Charts/__snapshots__/Bar.spec.tsx.snap
@@ -6,12 +6,13 @@ exports[`Bar component test should correctly render Bar with isDuel 1`] = `
     <g>
       <g
         class="barContainer "
-        transform="translate(0.625, -40)"
+        transform="translate(0.625, -0)"
       >
         <rect
           class="background-false animate-background"
           fill="#E0E0E0"
-          height="120"
+          height="60"
+          rx="4"
           width="2.5000000000000004"
           x="0"
           y="0"
@@ -101,12 +102,13 @@ exports[`Bar component test should correctly render Bar with isSwitching 1`] = `
     <g>
       <g
         class="barContainer "
-        transform="translate(0.625, -40)"
+        transform="translate(0.625, -0)"
       >
         <rect
           class="background-true animate-background"
           fill="#E0E0E0"
-          height="120"
+          height="60"
+          rx="4"
           width="2.5000000000000004"
           x="0"
           y="0"
@@ -196,12 +198,13 @@ exports[`Bar component test should correctly render Bar with showCompare 1`] = `
     <g>
       <g
         class="barContainer "
-        transform="translate(0.625, -40)"
+        transform="translate(0.625, -0)"
       >
         <rect
           class="background-true animate-background"
           fill="#E0E0E0"
-          height="120"
+          height="60"
+          rx="4"
           width="2.5000000000000004"
           x="0"
           y="0"
@@ -325,12 +328,13 @@ exports[`Bar component test should correctly render Electricity Bar 1`] = `
     <g>
       <g
         class="barContainer "
-        transform="translate(0.625, -40)"
+        transform="translate(0.625, -0)"
       >
         <rect
           class="background-true animate-background"
           fill="#E0E0E0"
-          height="120"
+          height="60"
+          rx="4"
           width="2.5000000000000004"
           x="0"
           y="0"
@@ -420,12 +424,13 @@ exports[`Bar component test should correctly render Gas Bar 1`] = `
     <g>
       <g
         class="barContainer "
-        transform="translate(0.625, -40)"
+        transform="translate(0.625, -0)"
       >
         <rect
           class="background-true animate-background"
           fill="#E0E0E0"
-          height="120"
+          height="60"
+          rx="4"
           width="2.5000000000000004"
           x="0"
           y="0"
@@ -515,12 +520,13 @@ exports[`Bar component test should correctly render Multifluid Bar 1`] = `
     <g>
       <g
         class="barContainer "
-        transform="translate(0.625, -40)"
+        transform="translate(0.625, -0)"
       >
         <rect
           class="background-true animate-background"
           fill="#E0E0E0"
-          height="120"
+          height="60"
+          rx="4"
           width="2.5000000000000004"
           x="0"
           y="0"
@@ -610,12 +616,13 @@ exports[`Bar component test should correctly render Water Bar 1`] = `
     <g>
       <g
         class="barContainer "
-        transform="translate(0.625, -40)"
+        transform="translate(0.625, -0)"
       >
         <rect
           class="background-true animate-background"
           fill="#E0E0E0"
-          height="120"
+          height="60"
+          rx="4"
           width="2.5000000000000004"
           x="0"
           y="0"
diff --git a/src/components/Charts/__snapshots__/BarChart.spec.tsx.snap b/src/components/Charts/__snapshots__/BarChart.spec.tsx.snap
index 45fe525808ed90497b9b74c7a6f3614148a5cc14..c6af42875458301c8adbc51a3011bb55921575f4 100644
--- a/src/components/Charts/__snapshots__/BarChart.spec.tsx.snap
+++ b/src/components/Charts/__snapshots__/BarChart.spec.tsx.snap
@@ -93,12 +93,13 @@ exports[`BarChart component should render correctly 1`] = `
       <g>
         <g
           class="barContainer "
-          transform="translate(33.43750000000003, -40)"
+          transform="translate(33.43750000000003, -0)"
         >
           <rect
             class="background-true animate-background"
             fill="#E0E0E0"
-            height="430"
+            height="370"
+            rx="4"
             width="133.75"
             x="0"
             y="0"
@@ -181,12 +182,13 @@ exports[`BarChart component should render correctly 1`] = `
       <g>
         <g
           class="barContainer "
-          transform="translate(200.62500000000003, -40)"
+          transform="translate(200.62500000000003, -0)"
         >
           <rect
             class="background-true animate-background"
             fill="#E0E0E0"
-            height="430"
+            height="370"
+            rx="4"
             width="133.75"
             x="0"
             y="0"
@@ -269,12 +271,13 @@ exports[`BarChart component should render correctly 1`] = `
       <g>
         <g
           class="barContainer "
-          transform="translate(367.8125, -40)"
+          transform="translate(367.8125, -0)"
         >
           <rect
             class="background-true animate-background"
             fill="#E0E0E0"
-            height="430"
+            height="370"
+            rx="4"
             width="133.75"
             x="0"
             y="0"