✨ (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}
  />