diff --git a/packages/@ourworldindata/grapher/src/axis/Axis.ts b/packages/@ourworldindata/grapher/src/axis/Axis.ts index 443fa0a7c77..5ea5b84f8a3 100644 --- a/packages/@ourworldindata/grapher/src/axis/Axis.ts +++ b/packages/@ourworldindata/grapher/src/axis/Axis.ts @@ -179,6 +179,10 @@ abstract class AbstractAxis { return Math.min(this.range[1], this.range[0]) } + @computed get rangeCenter(): number { + return this.rangeMin + this.rangeSize / 2 + } + /** The number of ticks we should _aim_ to show, not necessarily a strict target. */ @computed private get totalTicksTarget(): number { // Chose 1.8 here by trying a bunch of different faceted charts and figuring out what diff --git a/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx b/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx index 987019ea8a5..03d0efb3b4a 100644 --- a/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx +++ b/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx @@ -210,9 +210,11 @@ export class VerticalAxisComponent extends React.Component<{ {labelTextWrap && labelTextWrap.render( - -bounds.centerY - labelTextWrap.width / 2, + -verticalAxis.rangeCenter - labelTextWrap.width / 2, bounds.left, - { transform: "rotate(-90)" } + { + transform: "rotate(-90)", + } )} {tickLabels.map((label, i) => { const { y, xAlign, yAlign, formattedValue } = label @@ -294,7 +296,7 @@ export class HorizontalAxisComponent extends React.Component<{ {label && label.render( - bounds.centerX - label.width / 2, + axis.rangeCenter - label.width / 2, labelYPosition )} {tickMarks}