From b3d61fd478406b5a9511af3a58a778ba312a6709 Mon Sep 17 00:00:00 2001
From: TheRillJon <jon.walls@rilldata.com>
Date: Tue, 28 Apr 2026 20:58:49 +0100
Subject: [PATCH] Add support for standard Title and Description fields to
 custom charts

---
 .../custom-chart/CanvasCustomChart.svelte     | 34 ++++++++++++++-----
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/web-common/src/features/canvas/components/charts/custom-chart/CanvasCustomChart.svelte b/web-common/src/features/canvas/components/charts/custom-chart/CanvasCustomChart.svelte
index a967fc4b826..98841ec971b 100644
--- a/web-common/src/features/canvas/components/charts/custom-chart/CanvasCustomChart.svelte
+++ b/web-common/src/features/canvas/components/charts/custom-chart/CanvasCustomChart.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import ComponentHeader from "@rilldata/web-common/features/canvas/ComponentHeader.svelte";
   import CustomChartRenderer from "@rilldata/web-common/features/components/charts/custom/CustomChartRenderer.svelte";
   import { onDestroy } from "svelte";
   import AgenticChartPrompt from "./AgenticChartPrompt.svelte";
@@ -16,17 +17,34 @@
 
   $: hasValidSpec = component.isValid($specStore);
   $: hasContent = component.hasContent($specStore);
+
+  $: ({
+    title,
+    description,
+    show_description_as_tooltip,
+    time_filters,
+    dimension_filters,
+  } = $specStore);
 </script>
 
 {#if hasValidSpec || hasContent}
-  <CustomChartRenderer
-    name={component.id}
-    spec={$specStore.vega_spec}
-    whereFilter={$timeAndFilterStore?.where}
-    timeRange={$timeAndFilterStore?.timeRange}
-    metricsSQL={$specStore.metrics_sql}
-    showDataTable={editable}
-  />
+  <div class="size-full flex flex-col overflow-hidden">
+    <ComponentHeader
+      {title}
+      {description}
+      showDescriptionAsTooltip={show_description_as_tooltip}
+      filters={{ time_filters, dimension_filters }}
+      {component}
+    />
+    <CustomChartRenderer
+      name={component.id}
+      spec={$specStore.vega_spec}
+      whereFilter={$timeAndFilterStore?.where}
+      timeRange={$timeAndFilterStore?.timeRange}
+      metricsSQL={$specStore.metrics_sql}
+      showDataTable={editable}
+    />
+  </div>
 {:else}
   <AgenticChartPrompt {component} />
 {/if}