diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/AbstractStackedChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/AbstractStackedChart.tsx
index 066b183437c..9004f813505 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/AbstractStackedChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/AbstractStackedChart.tsx
@@ -143,6 +143,10 @@ export class AbstractStackedChart
         return this.props.bounds ?? DEFAULT_BOUNDS
     }
 
+    @computed get isStatic(): boolean {
+        return this.manager.isStatic ?? false
+    }
+
     @computed get fontSize(): number {
         return this.manager.fontSize ?? BASE_FONT_SIZE
     }
diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
index 88b5bfc9c1f..e4cadcec2c5 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
@@ -61,8 +61,8 @@ interface AreasProps extends React.SVGAttributes<SVGGElement> {
     seriesArr: readonly StackedSeries<Time>[]
     focusedSeriesNames: SeriesName[]
     hoveredAreaName?: SeriesName
-    onAreaMouseEnter: (seriesName: SeriesName) => void
-    onAreaMouseLeave: () => void
+    onAreaMouseEnter?: (seriesName: SeriesName) => void
+    onAreaMouseLeave?: () => void
 }
 
 const BLUR_COLOR = "#ddd"
@@ -175,7 +175,7 @@ class Areas extends React.Component<AreasProps> {
 
             return (
                 <path
-                    id={makeIdForHumanConsumption("area", series.seriesName)}
+                    id={makeIdForHumanConsumption(series.seriesName)}
                     className={makeSafeForCSS(series.seriesName) + "-area"}
                     key={series.seriesName + "-area"}
                     strokeLinecap="round"
@@ -184,10 +184,10 @@ class Areas extends React.Component<AreasProps> {
                     fillOpacity={opacity}
                     clipPath={this.props.clipPath}
                     onMouseEnter={(): void => {
-                        this.props.onAreaMouseEnter(series.seriesName)
+                        this.props.onAreaMouseEnter?.(series.seriesName)
                     }}
                     onMouseLeave={(): void => {
-                        this.props.onAreaMouseLeave()
+                        this.props.onAreaMouseLeave?.()
                     }}
                 />
             )
@@ -208,10 +208,7 @@ class Areas extends React.Component<AreasProps> {
 
             return (
                 <path
-                    id={makeIdForHumanConsumption(
-                        "border",
-                        placedSeries.seriesName
-                    )}
+                    id={makeIdForHumanConsumption(placedSeries.seriesName)}
                     className={
                         makeSafeForCSS(placedSeries.seriesName) + "-border"
                     }
@@ -230,10 +227,10 @@ class Areas extends React.Component<AreasProps> {
                     fill="none"
                     clipPath={this.props.clipPath}
                     onMouseEnter={(): void => {
-                        this.props.onAreaMouseEnter(placedSeries.seriesName)
+                        this.props.onAreaMouseEnter?.(placedSeries.seriesName)
                     }}
                     onMouseLeave={(): void => {
-                        this.props.onAreaMouseLeave()
+                        this.props.onAreaMouseLeave?.()
                     }}
                 />
             )
@@ -241,24 +238,13 @@ class Areas extends React.Component<AreasProps> {
     }
 
     render(): React.ReactElement {
-        const { dualAxis } = this.props
-        const { horizontalAxis, verticalAxis } = dualAxis
-
         return (
             <g
                 className="Areas"
                 id={makeIdForHumanConsumption("stacked-areas")}
             >
-                <rect
-                    x={horizontalAxis.range[0]}
-                    y={verticalAxis.range[1]}
-                    width={horizontalAxis.range[1] - horizontalAxis.range[0]}
-                    height={verticalAxis.range[0] - verticalAxis.range[1]}
-                    opacity={0}
-                    fill="rgba(255,255,255,0)"
-                />
-                {this.areas}
-                {this.borders}
+                <g id={makeIdForHumanConsumption("areas")}>{this.areas}</g>
+                <g id={makeIdForHumanConsumption("borders")}>{this.borders}</g>
             </g>
         )
     }
@@ -593,14 +579,11 @@ export class StackedAreaChart
         )
     }
 
-    render(): React.ReactElement {
-        const { manager, bounds, dualAxis, renderUid, series } = this
-        const { target } = this.tooltipState
-        const showLegend = this.manager.showLegend
-
-        const dualAxisComponent = (
+    renderAxis(): React.ReactElement {
+        const { manager } = this
+        return (
             <DualAxisComponent
-                dualAxis={dualAxis}
+                dualAxis={this.dualAxis}
                 showTickMarks={true}
                 labelColor={manager.secondaryColorInStaticCharts}
                 lineWidth={
@@ -611,18 +594,30 @@ export class StackedAreaChart
                 detailsMarker={manager.detailsMarkerInSvg}
             />
         )
+    }
 
-        if (this.failMessage)
-            return (
-                <g className="StackedArea">
-                    {dualAxisComponent}
-                    <NoDataModal
-                        manager={this.manager}
-                        bounds={dualAxis.bounds}
-                        message={this.failMessage}
-                    />
-                </g>
-            )
+    renderLegend(): React.ReactElement | void {
+        if (!this.manager.showLegend) return
+        return <LineLegend manager={this} />
+    }
+
+    renderStatic(): React.ReactElement {
+        return (
+            <>
+                {this.renderAxis()}
+                {this.renderLegend()}
+                <Areas
+                    dualAxis={this.dualAxis}
+                    seriesArr={this.series}
+                    focusedSeriesNames={this.focusedSeriesNames}
+                />
+            </>
+        )
+    }
+
+    renderInteractive(): React.ReactElement {
+        const { bounds, dualAxis, renderUid, series } = this
+        const { target } = this.tooltipState
 
         const clipPath = makeClipPath(renderUid, {
             ...bounds,
@@ -633,7 +628,6 @@ export class StackedAreaChart
         return (
             <g
                 ref={this.base}
-                id={makeIdForHumanConsumption("stacked-area-chart")}
                 className="StackedArea"
                 onMouseLeave={this.onCursorLeave}
                 onTouchEnd={this.onCursorLeave}
@@ -648,9 +642,9 @@ export class StackedAreaChart
                     whole charting area, including the axis, the entity labels, and the whitespace next to them.
                     We need these to be able to show the tooltip for the first/last year even if the mouse is outside the charting area. */}
                 </rect>
-                {dualAxisComponent}
+                {this.renderAxis()}
                 <g clipPath={clipPath.id}>
-                    {showLegend && <LineLegend manager={this} />}
+                    {this.renderLegend()}
                     <Areas
                         dualAxis={dualAxis}
                         seriesArr={series}
@@ -666,6 +660,24 @@ export class StackedAreaChart
         )
     }
 
+    render(): React.ReactElement {
+        if (this.failMessage)
+            return (
+                <g className="StackedArea">
+                    {this.renderAxis()}
+                    <NoDataModal
+                        manager={this.manager}
+                        bounds={this.dualAxis.bounds}
+                        message={this.failMessage}
+                    />
+                </g>
+            )
+
+        return this.manager.isStatic
+            ? this.renderStatic()
+            : this.renderInteractive()
+    }
+
     @computed get lineLegendX(): number {
         return this.legendDimensions
             ? this.bounds.right - this.legendDimensions.width
diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx
index 64b433470eb..8815c60b367 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx
@@ -13,6 +13,7 @@ import {
     min,
     max,
     partition,
+    makeIdForHumanConsumption,
 } from "@ourworldindata/utils"
 import { DualAxisComponent } from "../axis/AxisViews"
 import { NoDataModal } from "../noDataModal/NoDataModal"
@@ -49,12 +50,13 @@ import {
 } from "./StackedUtils"
 import { makeClipPath } from "../chart/ChartUtils"
 import { ColorScaleConfigDefaults } from "../color/ColorScaleConfig"
-import { ColumnTypeMap } from "@ourworldindata/core-table"
+import { ColumnTypeMap, CoreColumn } from "@ourworldindata/core-table"
 import { HorizontalCategoricalColorLegend } from "../horizontalColorLegend/HorizontalColorLegends"
 import { CategoricalBin, ColorScaleBin } from "../color/ColorScaleBin"
 import { AxisConfig } from "../axis/AxisConfig.js"
 
 interface StackedBarSegmentProps extends React.SVGAttributes<SVGGElement> {
+    id: string
     bar: StackedPoint<Time>
     series: StackedSeries<Time>
     color: string
@@ -117,6 +119,7 @@ class StackedBarSegment extends React.Component<StackedBarSegmentProps> {
 
         return (
             <rect
+                id={this.props.id}
                 ref={this.base}
                 x={xOffset}
                 y={yPos}
@@ -317,12 +320,17 @@ export class StackedBarChart
         return new HorizontalCategoricalColorLegend({ manager: this })
     }
 
+    @computed get formatColumn(): CoreColumn {
+        // we can just use the first column for formatting, b/c we assume all columns have same type
+        return this.yColumns[0]
+    }
+
     @computed get tooltip(): React.ReactElement | undefined {
         const {
             tooltipState: { target, position, fading },
-            yColumns,
             series,
             hoveredTick,
+            formatColumn,
         } = this
 
         const { bar: hoverBar, series: hoverSeries } = target ?? {}
@@ -333,8 +341,7 @@ export class StackedBarChart
             hoverTime = hoveredTick.time
         } else return
 
-        const formatColumn = yColumns[0], // we can just use the first column for formatting, b/c we assume all columns have same type
-            { unit, shortUnit } = formatColumn
+        const { unit, shortUnit } = formatColumn
 
         const totalValue = sum(
             series.map(
@@ -445,56 +452,117 @@ export class StackedBarChart
         this.tooltipState.target = null
     }
 
-    render(): React.ReactElement {
+    renderLegend(): React.ReactElement | void {
         const {
-            manager,
-            dualAxis,
-            renderUid,
-            bounds,
-            tooltip,
-            barWidth,
-            tooltipState: { target },
+            manager: { showLegend },
+            showHorizontalLegend,
         } = this
-        const { series } = this
-        const { innerBounds, verticalAxis, horizontalAxis } = dualAxis
 
-        const dualAxisComponent = (
+        if (!showLegend) return
+
+        return showHorizontalLegend ? (
+            <HorizontalCategoricalColorLegend manager={this} />
+        ) : (
+            <VerticalColorLegend manager={this} />
+        )
+    }
+
+    renderAxis(): React.ReactElement {
+        const { manager } = this
+
+        const lineWidth = manager.isStaticAndSmall
+            ? GRAPHER_AXIS_LINE_WIDTH_THICK
+            : GRAPHER_AXIS_LINE_WIDTH_DEFAULT
+
+        return (
             <DualAxisComponent
-                dualAxis={dualAxis}
+                dualAxis={this.dualAxis}
                 showTickMarks={true}
                 labelColor={manager.secondaryColorInStaticCharts}
-                lineWidth={
-                    manager.isStaticAndSmall
-                        ? GRAPHER_AXIS_LINE_WIDTH_THICK
-                        : GRAPHER_AXIS_LINE_WIDTH_DEFAULT
-                }
+                lineWidth={lineWidth}
                 detailsMarker={manager.detailsMarkerInSvg}
             />
         )
+    }
 
-        if (this.failMessage)
-            return (
-                <g
-                    className="StackedBarChart"
-                    width={bounds.width}
-                    height={bounds.height}
-                >
-                    {dualAxisComponent}
-                    <NoDataModal
-                        manager={this.manager}
-                        bounds={dualAxis.innerBounds}
-                        message={this.failMessage}
-                    />
-                </g>
-            )
+    renderBars(): React.ReactElement {
+        const {
+            dualAxis,
+            barWidth,
+            tooltipState: { target },
+        } = this
+        const { verticalAxis, horizontalAxis } = dualAxis
 
-        const clipPath = makeClipPath(renderUid, innerBounds)
+        return (
+            <>
+                {this.series.map((series, index) => {
+                    const isLegendHovered = this.hoverKeys.includes(
+                        series.seriesName
+                    )
+                    const opacity =
+                        isLegendHovered || this.hoverKeys.length === 0
+                            ? GRAPHER_AREA_OPACITY_DEFAULT
+                            : 0.2
+
+                    return (
+                        <g
+                            key={index}
+                            id={makeIdForHumanConsumption(series.seriesName)}
+                            className={
+                                makeSafeForCSS(series.seriesName) + "-segments"
+                            }
+                        >
+                            {series.points.map((bar, index) => {
+                                const xPos =
+                                    horizontalAxis.place(bar.position) -
+                                    this.barWidth / 2
+                                const barOpacity =
+                                    bar === target?.bar ? 1 : opacity
+
+                                return (
+                                    <StackedBarSegment
+                                        key={index}
+                                        id={makeIdForHumanConsumption(
+                                            this.formatColumn.formatTime(
+                                                bar.time
+                                            )
+                                        )}
+                                        bar={bar}
+                                        color={bar.color ?? series.color}
+                                        xOffset={xPos}
+                                        opacity={barOpacity}
+                                        yAxis={verticalAxis}
+                                        series={series}
+                                        onBarMouseOver={this.onBarMouseOver}
+                                        onBarMouseLeave={this.onBarMouseLeave}
+                                        barWidth={barWidth}
+                                    />
+                                )
+                            })}
+                        </g>
+                    )
+                })}
+            </>
+        )
+    }
 
-        const legend = this.showHorizontalLegend ? (
-            <HorizontalCategoricalColorLegend manager={this} />
-        ) : (
-            <VerticalColorLegend manager={this} />
+    renderStatic(): React.ReactElement {
+        return (
+            <>
+                {this.renderAxis()}
+                <g id={makeIdForHumanConsumption("bars")}>
+                    {this.renderBars()}
+                </g>
+                {this.renderLegend()}
+            </>
         )
+    }
+
+    renderInteractive(): React.ReactElement {
+        const { dualAxis, renderUid, bounds } = this
+        const { innerBounds } = dualAxis
+
+        const clipPath = makeClipPath(renderUid, innerBounds)
 
         return (
             <g
@@ -504,7 +572,6 @@ export class StackedBarChart
                 onMouseMove={this.onMouseMove}
             >
                 {clipPath.element}
-
                 <rect
                     x={bounds.left}
                     y={bounds.top}
@@ -513,60 +580,36 @@ export class StackedBarChart
                     opacity={0}
                     fill="rgba(255,255,255,0)"
                 />
+                {this.renderAxis()}
+                <g clipPath={clipPath.id}>{this.renderBars()}</g>
+                {this.renderLegend()}
+                {this.tooltip}
+            </g>
+        )
+    }
 
-                {dualAxisComponent}
-
-                <g clipPath={clipPath.id}>
-                    {series.map((series, index) => {
-                        const isLegendHovered = this.hoverKeys.includes(
-                            series.seriesName
-                        )
-                        const opacity =
-                            isLegendHovered || this.hoverKeys.length === 0
-                                ? GRAPHER_AREA_OPACITY_DEFAULT
-                                : 0.2
-
-                        return (
-                            <g
-                                key={index}
-                                className={
-                                    makeSafeForCSS(series.seriesName) +
-                                    "-segments"
-                                }
-                            >
-                                {series.points.map((bar, index) => {
-                                    const xPos =
-                                        horizontalAxis.place(bar.position) -
-                                        this.barWidth / 2
-                                    const barOpacity =
-                                        bar === target?.bar ? 1 : opacity
-
-                                    return (
-                                        <StackedBarSegment
-                                            key={index}
-                                            bar={bar}
-                                            color={bar.color ?? series.color}
-                                            xOffset={xPos}
-                                            opacity={barOpacity}
-                                            yAxis={verticalAxis}
-                                            series={series}
-                                            onBarMouseOver={this.onBarMouseOver}
-                                            onBarMouseLeave={
-                                                this.onBarMouseLeave
-                                            }
-                                            barWidth={barWidth}
-                                        />
-                                    )
-                                })}
-                            </g>
-                        )
-                    })}
+    render(): React.ReactElement {
+        const { dualAxis, bounds } = this
+
+        if (this.failMessage)
+            return (
+                <g
+                    className="StackedBarChart"
+                    width={bounds.width}
+                    height={bounds.height}
+                >
+                    {this.renderAxis()}
+                    <NoDataModal
+                        manager={this.manager}
+                        bounds={dualAxis.innerBounds}
+                        message={this.failMessage}
+                    />
                 </g>
+            )
 
-                {this.manager.showLegend && legend}
-                {tooltip}
-            </g>
-        )
+        return this.manager.isStatic
+            ? this.renderStatic()
+            : this.renderInteractive()
     }
 
     @computed get categoryLegendY(): number {