diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.tsx index a5862b3172..9041e4ee8f 100644 --- a/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.tsx +++ b/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.tsx @@ -1,5 +1,5 @@ import React from "react" -import { Bounds } from "@ourworldindata/utils" +import { Bounds, HorizontalAlign } from "@ourworldindata/utils" import { GRAPHER_FONT_SCALE_11, GRAPHER_FONT_SCALE_12, @@ -9,10 +9,12 @@ import { GRAPHER_LIGHT_TEXT } from "../color/ColorConstants" export function NoDataSection({ seriesNames, bounds, + align = HorizontalAlign.left, baseFontSize = 16, }: { seriesNames: string[] bounds: Bounds + align?: HorizontalAlign baseFontSize?: number }): React.ReactElement { { @@ -30,7 +32,8 @@ export function NoDataSection({ className="NoDataSection" {...bounds.toProps()} style={{ - textAlign: "right", + textAlign: + align === HorizontalAlign.right ? "right" : "left", color: GRAPHER_LIGHT_TEXT, }} > diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx index 3d01ce3607..b713209ebf 100644 --- a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx +++ b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx @@ -35,6 +35,7 @@ import { VerticalAlign, FacetStrategy, InteractionState, + HorizontalAlign, } from "@ourworldindata/types" import { ChartInterface } from "../chart/ChartInterface" import { ChartManager } from "../chart/ChartManager" @@ -1127,6 +1128,7 @@ export class SlopeChart )