diff --git a/web/src/components/ChartSectionCard.tsx b/web/src/components/ChartSectionCard.tsx
index e7c9e341c..2a4b6e209 100644
--- a/web/src/components/ChartSectionCard.tsx
+++ b/web/src/components/ChartSectionCard.tsx
@@ -10,6 +10,7 @@ import { cn } from 'cn';
import { Button } from '@/components/ui/button';
import { fetchApiText, type ChartSection, type ChartSpec, type Manifest } from '../api';
import { downloadCsvText } from '../csv';
+import { chartViewName } from '../format';
import { usePrintMode } from '../printContext';
import { ChartSectionTitle } from './charts/leading';
import { CopyLinkButton } from './CopyLinkButton';
@@ -66,7 +67,7 @@ function Figure({
return (
- Loading chart: {chart.title} ({active.label})…
+ Loading chart: {chartViewName(chart.title, active.label)}…
}
>
diff --git a/web/src/components/InteractiveChart.tsx b/web/src/components/InteractiveChart.tsx
index daf298de9..2d0713da7 100644
--- a/web/src/components/InteractiveChart.tsx
+++ b/web/src/components/InteractiveChart.tsx
@@ -8,6 +8,7 @@ import { RotateCwIcon } from 'lucide-react';
import { Button } from '@/components/ui/button';
import type { ChartDocument, ChartVariant, Manifest } from '../api';
import { fetchChartDocument } from '../chartData';
+import { chartViewName } from '../format';
import { EventsView } from './charts/EventsView';
import { MatrixView } from './charts/MatrixView';
import { NetworkView } from './charts/NetworkView';
@@ -83,7 +84,7 @@ export default function InteractiveChart({
data-print-pending
className="flex h-[340px] items-center justify-center text-sm text-muted-foreground"
>
- Loading interactive chart: {title} ({variant.label})…
+ Loading interactive chart: {chartViewName(title, variant.label)}…
>
);
@@ -96,7 +97,7 @@ export default function InteractiveChart({
data-print-error
className="print-chart-status mb-4 flex flex-wrap items-center gap-3 rounded-lg border p-4 text-sm"
>
- Could not load chart data: {title} ({variant.label}).
+ Could not load chart data: {chartViewName(title, variant.label)}.