✨ (discrete bar) thin zero line (#4372)

owid · Jan 3, 2025 · daf1174 · daf1174
1 parent 0fbc2ea
commit daf1174
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx
@@ -498,8 +498,8 @@ export class DiscreteBarChart
         const { manager, yAxis, innerBounds } = this
 
         const axisLineWidth = manager.isStaticAndSmall
-            ? GRAPHER_AXIS_LINE_WIDTH_THICK
-            : GRAPHER_AXIS_LINE_WIDTH_DEFAULT
+            ? 0.5 * GRAPHER_AXIS_LINE_WIDTH_THICK
+            : 0.5 * GRAPHER_AXIS_LINE_WIDTH_DEFAULT
 
         return (
             <>
@@ -512,6 +512,14 @@ export class DiscreteBarChart
                         horizontalAxis={yAxis}
                         bounds={innerBounds}
                         strokeWidth={axisLineWidth}
+                        // if the chart doesn't have negative values, then we
+                        // move the zero line a little to the left to avoid
+                        // overlap with the bars
+                        align={
+                            this.hasNegative
+                                ? HorizontalAlign.center
+                                : HorizontalAlign.right
+                        }
                     />
                 )}
                 {this.renderBars()}

diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
@@ -713,7 +713,7 @@ export class StackedDiscreteBarChart
                 <HorizontalAxisZeroLine
                     horizontalAxis={yAxis}
                     bounds={innerBounds}
-                    strokeWidth={axisLineWidth}
+                    strokeWidth={0.5 * axisLineWidth}
                     // moves the zero line a little to the left to avoid
                     // overlap with the bars
                     align={HorizontalAlign.right}