✨ (axis) align ticks with domain line on edges

owid · May 21, 2024 · 33bacb2 · 33bacb2
1 parent 96906f9
commit 33bacb2
Showing 1 changed file with 7 additions and 3 deletions.
diff --git a/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx b/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx
@@ -360,7 +360,7 @@ export class HorizontalAxisComponent extends React.Component<{
             preferredAxisPosition,
             labelColor,
             tickColor,
-            tickMarkWidth,
+            tickMarkWidth = 1,
             detailsMarker,
         } = this.props
         const { tickLabels, labelTextWrap: label, labelOffset, orient } = axis
@@ -408,9 +408,13 @@ export class HorizontalAxisComponent extends React.Component<{
                             {showTickMarks && (
                                 <line
                                     x1={axis.place(label.value)}
-                                    y1={tickMarksYPosition}
+                                    y1={tickMarksYPosition - tickMarkWidth / 2}
                                     x2={axis.place(label.value)}
-                                    y2={tickMarksYPosition + tickSize}
+                                    y2={
+                                        tickMarksYPosition -
+                                        tickMarkWidth / 2 +
+                                        tickSize
+                                    }
                                     stroke={SOLID_TICK_COLOR}
                                     strokeWidth={tickMarkWidth}
                                 />