✨ (slope) prevent x-label and entity labels from overlapping

owid · Dec 2, 2024 · 9f42d9c · 9f42d9c
1 parent 80185ab
commit 9f42d9c
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
@@ -373,7 +373,10 @@ export class LineLegend extends React.Component<LineLegendProps> {
             const labelFragments = excludeUndefined([
                 { text: label.label, fontWeight },
                 label.formattedValue
-                    ? { text: label.formattedValue }
+                    ? {
+                          text: label.formattedValue,
+                          preferLineBreakOverWrapping: true,
+                      }
                     : undefined,
             ])
             const textWrap = new TextWrapGroup({

diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -1001,7 +1001,7 @@ export class SlopeChart
                 labelSeries={this.lineLegendSeriesRight}
                 yAxis={this.yAxis}
                 x={this.xRange[1] + LINE_LEGEND_PADDING}
-                yRange={[this.bounds.top, this.bounds.bottom]}
+                yRange={[this.bounds.top, this.bounds.bottom - BOTTOM_PADDING]}
                 maxWidth={this.maxLineLegendWidth}
                 xAnchor="start"
                 verticalAlign={VerticalAlign.top}
@@ -1037,7 +1037,7 @@ export class SlopeChart
                 labelSeries={this.lineLegendSeriesLeft}
                 yAxis={this.yAxis}
                 x={this.xRange[0] - LINE_LEGEND_PADDING}
-                yRange={[this.bounds.top, this.bounds.bottom]}
+                yRange={[this.bounds.top, this.bounds.bottom - BOTTOM_PADDING]}
                 maxWidth={this.maxLineLegendWidth}
                 xAnchor="end"
                 verticalAlign={VerticalAlign.top}