✨ add x-axis label to tooltips

owid · Mar 5, 2025 · 93c83ef · 93c83ef
1 parent d26fa4c
commit 93c83ef
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
@@ -671,6 +671,9 @@ export class LineChart
             { unit, shortUnit } = formatColumn,
             { isRelativeMode, startTime } = this.manager
 
+        const title = formattedTime
+        const titleAnnotation = this.xAxis.label ? `(${this.xAxis.label})` : ""
+
         const columns = [formatColumn]
         if (hasColorScale) columns.push(colorColumn)
 
@@ -706,7 +709,8 @@ export class LineChart
                 offsetXDirection="left"
                 offsetX={20}
                 offsetY={-16}
-                title={formattedTime}
+                title={title}
+                titleAnnotation={titleAnnotation}
                 subtitle={subtitle}
                 subtitleFormat={subtitleFormat}
                 footer={footer}

diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
@@ -570,6 +570,9 @@ export class StackedAreaChart extends AbstractStackedChart {
             formattedTime = formatColumn.formatTime(bottomSeriesPoint.position),
             { unit, shortUnit } = formatColumn
 
+        const title = formattedTime
+        const titleAnnotation = this.xAxis.label ? `(${this.xAxis.label})` : ""
+
         const lastStackedPoint = last(series)!.points[hoveredPointIndex]
         if (!lastStackedPoint) return undefined
         const totalValue = lastStackedPoint.value + lastStackedPoint.valueOffset
@@ -594,7 +597,8 @@ export class StackedAreaChart extends AbstractStackedChart {
                 offsetX={20}
                 offsetXDirection="left"
                 style={{ maxWidth: "50%" }}
-                title={formattedTime}
+                title={title}
+                titleAnnotation={titleAnnotation}
                 subtitle={unit !== shortUnit ? unit : undefined}
                 subtitleFormat="unit"
                 footer={footer}

diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx
@@ -346,6 +346,9 @@ export class StackedBarChart
             hoverTime = hoveredTick.time
         } else return
 
+        const title = formatColumn.formatTime(hoverTime)
+        const titleAnnotation = this.xAxis.label ? `(${this.xAxis.label})` : ""
+
         const { unit, shortUnit } = formatColumn
 
         const totalValue = sum(
@@ -393,7 +396,8 @@ export class StackedBarChart
                 style={{ maxWidth: "500px" }}
                 offsetX={20}
                 offsetY={-16}
-                title={formatColumn.formatTime(hoverTime)}
+                title={title}
+                titleAnnotation={titleAnnotation}
                 subtitle={unit !== shortUnit ? unit : undefined}
                 subtitleFormat="unit"
                 footer={footer}