🐛 (discrete bar) zero line obscured part of the data bars (#3996)

owid · Oct 3, 2024 · 04c589b · 04c589b
1 parent 215ea00
commit 04c589b
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 15 deletions.
diff --git a/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx b/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx
@@ -138,12 +138,28 @@ export class HorizontalAxisZeroLine extends React.Component<{
     horizontalAxis: HorizontalAxis
     bounds: Bounds
     strokeWidth?: number
+    align?: HorizontalAlign
 }> {
     render(): React.ReactElement {
-        const { bounds, horizontalAxis, strokeWidth } = this.props
+        const {
+            bounds,
+            horizontalAxis,
+            align = HorizontalAlign.center,
+            strokeWidth = 1,
+        } = this.props
         const axis = horizontalAxis.clone()
         axis.range = bounds.xRange()
 
+        // the zero line is either drawn at the center of the zero tick
+        // or at the edge of the tick, either to the left or to the right
+        const offset =
+            align === HorizontalAlign.center
+                ? 0
+                : align === HorizontalAlign.right
+                  ? -strokeWidth / 2
+                  : strokeWidth / 2
+        const x = axis.place(0) + offset
+
         return (
             <g
                 id={makeIdForHumanConsumption("vertical-zero-line")}
@@ -154,9 +170,9 @@ export class HorizontalAxisZeroLine extends React.Component<{
                 )}
             >
                 <line
-                    x1={axis.place(0)}
+                    x1={x.toFixed(2)}
                     y1={bounds.bottom.toFixed(2)}
-                    x2={axis.place(0)}
+                    x2={x.toFixed(2)}
                     y2={bounds.top.toFixed(2)}
                     stroke={SOLID_TICK_COLOR}
                     strokeWidth={strokeWidth}

diff --git a/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx
@@ -469,6 +469,21 @@ export class DiscreteBarChart
                         />
                     </>
                 )}
+                {!this.isLogScale && (
+                    <HorizontalAxisZeroLine
+                        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
+                        }
+                    />
+                )}
                 {sizedSeries.map((series) => {
                     // Todo: add a "placedSeries" getter to get the transformed series, then just loop over the placedSeries and render a bar for each
                     const isNegative = series.value < 0
@@ -560,13 +575,6 @@ export class DiscreteBarChart
 
                     return result
                 })}
-                {!this.isLogScale && (
-                    <HorizontalAxisZeroLine
-                        horizontalAxis={yAxis}
-                        bounds={innerBounds}
-                        strokeWidth={axisLineWidth}
-                    />
-                )}
             </g>
         )
     }

diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
@@ -720,6 +720,14 @@ export class StackedDiscreteBarChart
                         />
                     </>
                 )}
+                <HorizontalAxisZeroLine
+                    horizontalAxis={yAxis}
+                    bounds={innerBounds}
+                    strokeWidth={axisLineWidth}
+                    // moves the zero line a little to the left to avoid
+                    // overlap with the bars
+                    align={HorizontalAlign.right}
+                />
                 {this.showLegend && (
                     <HorizontalCategoricalColorLegend manager={this} />
                 )}
@@ -733,11 +741,6 @@ export class StackedDiscreteBarChart
                         <g>{nodes.map((node) => renderRow(node))}</g>
                     )}
                 </NodeGroup>
-                <HorizontalAxisZeroLine
-                    horizontalAxis={yAxis}
-                    bounds={innerBounds}
-                    strokeWidth={axisLineWidth}
-                />
                 {this.Tooltip}
             </g>
         )