✨ (axis) center-align axis labels (#3665)

owid · May 30, 2024 · 28d89e0 · 28d89e0
1 parent e87713d
commit 28d89e0
Showing 1 changed file with 10 additions and 14 deletions.
diff --git a/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx b/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx
@@ -269,7 +269,7 @@ export class VerticalAxisComponent extends React.Component<{
             >
                 {labelTextWrap &&
                     labelTextWrap.renderSVG(
-                        -verticalAxis.rangeCenter - labelTextWrap.width / 2,
+                        -verticalAxis.rangeCenter,
                         bounds.left,
                         {
                             id: makeIdForHumanConsumption(
@@ -278,6 +278,7 @@ export class VerticalAxisComponent extends React.Component<{
                             textProps: {
                                 transform: "rotate(-90)",
                                 fill: labelColor || GRAPHER_DARK_TEXT,
+                                textAnchor: "middle",
                             },
                             detailsMarker,
                         }
@@ -389,19 +390,14 @@ export class HorizontalAxisComponent extends React.Component<{
                 className="HorizontalAxis"
             >
                 {label &&
-                    label.renderSVG(
-                        axis.rangeCenter - label.width / 2,
-                        labelYPosition,
-                        {
-                            id: makeIdForHumanConsumption(
-                                "horizontal-axis-label"
-                            ),
-                            textProps: {
-                                fill: labelColor || GRAPHER_DARK_TEXT,
-                            },
-                            detailsMarker,
-                        }
-                    )}
+                    label.renderSVG(axis.rangeCenter, labelYPosition, {
+                        id: makeIdForHumanConsumption("horizontal-axis-label"),
+                        textProps: {
+                            fill: labelColor || GRAPHER_DARK_TEXT,
+                            textAnchor: "middle",
+                        },
+                        detailsMarker,
+                    })}
                 {tickLabels.map((label) => {
                     const { x, xAlign, formattedValue } = label
                     return (