diff --git a/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx b/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx index 42c68ffd089..d451df09bd2 100644 --- a/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx +++ b/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx @@ -82,12 +82,10 @@ export class HorizontalAxisGridLines extends React.Component<{ render(): JSX.Element { const { horizontalAxis, strokeWidth } = this.props const { bounds } = this - const axis = horizontalAxis.clone() - axis.range = bounds.xRange() return ( - {axis.getTickValues().map((t, i) => { + {horizontalAxis.getTickValues().map((t, i) => { const color = t.faint ? FAINT_TICK_COLOR : t.solid @@ -97,9 +95,9 @@ export class HorizontalAxisGridLines extends React.Component<{ return ( { render(): JSX.Element { const { bounds, horizontalAxis, strokeWidth } = this.props - const axis = horizontalAxis.clone() - axis.range = bounds.xRange() return ( d.value < 0) - .map((d) => this.formatValue(d).width) - ) ?? 0 - return longestNegativeLabel + labelToTextPadding + const labelAndValueWidths = this.series + .filter((d) => d.value < 0) + .map((d) => { + const labelWidth = Bounds.forText( + d.seriesName, + this.legendLabelStyle + ).width + const valueWidth = this.formatValue(d).width + return labelWidth + valueWidth + labelToTextPadding + }) + + return max(labelAndValueWidths) ?? 0 } @computed private get x0(): number { @@ -264,8 +269,7 @@ export class DiscreteBarChart @computed private get xRange(): [number, number] { return [ this.boundsWithoutColorLegend.left + - this.seriesLegendWidth + - this.leftValueLabelWidth, + Math.max(this.seriesLegendWidth, this.leftValueLabelWidth), this.boundsWithoutColorLegend.right - this.rightValueLabelWidth, ] } @@ -296,7 +300,7 @@ export class DiscreteBarChart @computed private get innerBounds(): Bounds { return this.boundsWithoutColorLegend - .padLeft(this.seriesLegendWidth + this.leftValueLabelWidth) + .padLeft(Math.max(this.seriesLegendWidth, this.leftValueLabelWidth)) .padBottom(this.showHorizontalAxis ? this.yAxis.height : 0) .padRight(this.rightValueLabelWidth) }