diff --git a/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue b/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue
index 6cf40329ff..01fd31f79e 100644
--- a/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue
+++ b/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue
@@ -68,6 +68,7 @@
               {{ i18n.t('csvExport.exportButton') }}
             </span>
           </KDropdownItem>
+          <slot name="menu-items" />
         </template>
       </KDropdown>
       <!-- Keep outside of dropdown, so we can independently affect its visibility -->
@@ -230,6 +231,11 @@ const props = defineProps({
     required: false,
     default: false,
   },
+  showMenu: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 })
 
 const emit = defineEmits<{
@@ -361,7 +367,7 @@ const showChartHeader = computed(() => {
   return (hasValidChartData.value && resultSetTruncated.value && maxEntitiesShown.value) || props.chartTitle || (props.allowCsvExport && hasValidChartData.value)
 })
 
-const hasMenuOptions = computed(() => (props.allowCsvExport && hasValidChartData.value) || !!props.goToExplore)
+const hasMenuOptions = computed(() => (props.allowCsvExport && hasValidChartData.value) || !!props.goToExplore || props.showMenu)
 
 const timeSeriesGranularity = computed<GranularityValues>(() => {
 
diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
index 9b3323ebeb..e603e58700 100644
--- a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
+++ b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
@@ -13,6 +13,7 @@
         :class="{ 'custom-styling': isToggled}"
         :config="(dashboardConfig as DashboardConfig)"
         :context="context"
+        @edit-tile="onEditTile"
       >
         <template #slot-1>
           <div class="slot-container">
@@ -32,7 +33,7 @@
 </template>
 
 <script setup lang="ts">
-import type { DashboardConfig, DashboardRendererContext, TileConfig } from '../../src'
+import type { DashboardConfig, DashboardRendererContext, TileConfig, TileDefinition, GridTile } from '../../src'
 import { DashboardRenderer } from '../../src'
 import { inject, ref } from 'vue'
 import { ChartMetricDisplay } from '@kong-ui-public/analytics-chart'
@@ -45,6 +46,7 @@ const appLinks: SandboxNavigationItem[] = inject('app-links', [])
 const context: DashboardRendererContext = {
   filters: [],
   refreshInterval: 0,
+  editable: true,
 }
 
 const dashboardConfig: DashboardConfig = {
@@ -239,6 +241,10 @@ const dashboardConfig: DashboardConfig = {
 
 const isToggled = ref(false)
 
+const onEditTile = (tile: GridTile<TileDefinition>) => {
+  console.log('@edit-tile', tile)
+}
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/analytics/dashboard-renderer/src/components/BarChartRenderer.vue b/packages/analytics/dashboard-renderer/src/components/BarChartRenderer.vue
index d7056ead55..b29874dd27 100644
--- a/packages/analytics/dashboard-renderer/src/components/BarChartRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/BarChartRenderer.vue
@@ -1,42 +1,18 @@
+<!-- BarChartRenderer.vue -->
 <template>
-  <QueryDataProvider
-    v-slot="{ data }"
+  <BaseAnalyticsChartRenderer
+    :chart-options="chartOptions"
     :context="context"
+    :extra-props="{ showAnnotations: false }"
+    :height="height"
     :query="query"
     :query-ready="queryReady"
-  >
-    <div class="analytics-chart">
-      <AnalyticsChart
-        :allow-csv-export="chartOptions.allowCsvExport"
-        :chart-data="data"
-        :chart-options="options"
-        :chart-title="chartOptions.chartTitle"
-        legend-position="bottom"
-        :show-annotations="false"
-        :synthetics-data-key="chartOptions.syntheticsDataKey"
-        tooltip-title=""
-      />
-    </div>
-  </QueryDataProvider>
+  />
 </template>
+
 <script setup lang="ts">
+import BaseAnalyticsChartRenderer from './BaseAnalyticsChartRenderer.vue'
 import type { BarChartOptions, RendererProps } from '../types'
-import QueryDataProvider from './QueryDataProvider.vue'
-import { computed } from 'vue'
-import type { AnalyticsChartOptions } from '@kong-ui-public/analytics-chart'
-import { AnalyticsChart } from '@kong-ui-public/analytics-chart'
-
-const props = defineProps<RendererProps<BarChartOptions>>()
 
-const options = computed((): AnalyticsChartOptions => ({
-  type: props.chartOptions.type,
-  stacked: props.chartOptions.stacked,
-  chartDatasetColors: props.chartOptions.chartDatasetColors,
-}))
+defineProps<RendererProps<BarChartOptions>>()
 </script>
-
-<style scoped lang="scss">
-.analytics-chart {
-  height: v-bind('`${height}px`');
-}
-</style>
diff --git a/packages/analytics/dashboard-renderer/src/components/BaseAnalyticsChartRenderer.vue b/packages/analytics/dashboard-renderer/src/components/BaseAnalyticsChartRenderer.vue
new file mode 100644
index 0000000000..65357da1d9
--- /dev/null
+++ b/packages/analytics/dashboard-renderer/src/components/BaseAnalyticsChartRenderer.vue
@@ -0,0 +1,62 @@
+<template>
+  <QueryDataProvider
+    v-slot="{ data }"
+    :context="context"
+    :query="query"
+    :query-ready="queryReady"
+  >
+    <div class="analytics-chart">
+      <AnalyticsChart
+        :allow-csv-export="chartOptions.allowCsvExport"
+        :chart-data="data"
+        :chart-options="options"
+        :chart-title="chartOptions.chartTitle"
+        legend-position="bottom"
+        :show-menu="context.editable"
+        :synthetics-data-key="chartOptions.syntheticsDataKey"
+        tooltip-title=""
+        v-bind="extraProps"
+      >
+        <template
+          v-if="context.editable"
+          #menu-items
+        >
+          <KDropdownItem @click="editTile">
+            {{ i18n.t('renderer.edit') }}
+          </KDropdownItem>
+        </template>
+      </AnalyticsChart>
+    </div>
+  </QueryDataProvider>
+</template>
+
+<script setup lang="ts">
+import type { RendererProps } from '../types'
+import QueryDataProvider from './QueryDataProvider.vue'
+import { computed, defineProps } from 'vue'
+import type { AnalyticsChartOptions } from '@kong-ui-public/analytics-chart'
+import { AnalyticsChart } from '@kong-ui-public/analytics-chart'
+import composables from '../composables'
+
+const props = defineProps<RendererProps<any> & { extraProps?: Record<string, any> }>()
+const emit = defineEmits<{
+  (e: 'edit-tile'): void
+}>()
+const { i18n } = composables.useI18n()
+
+const options = computed((): AnalyticsChartOptions => ({
+  type: props.chartOptions.type,
+  stacked: props.chartOptions.stacked ?? false,
+  chartDatasetColors: props.chartOptions.chartDatasetColors,
+}))
+
+const editTile = () => {
+  emit('edit-tile')
+}
+</script>
+
+<style scoped lang="scss">
+.analytics-chart {
+  height: v-bind('`${height}px`');
+}
+</style>
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
index b037b76ea0..dbd7873f72 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
@@ -26,6 +26,7 @@
           :definition="tile.meta"
           :height="tile.layout.size.rows * (config.tileHeight || DEFAULT_TILE_HEIGHT) + parseInt(KUI_SPACE_70, 10)"
           :query-ready="queryReady"
+          @edit-tile="onEditTile(tile)"
         />
       </template>
     </GridLayout>
@@ -53,6 +54,10 @@ const props = defineProps<{
   config: DashboardConfig,
 }>()
 
+const emit = defineEmits<{
+  (e: 'edit-tile', tile: GridTile<TileDefinition>): void
+}>()
+
 const { i18n } = composables.useI18n()
 
 // Note: queryBridge is not directly used by the DashboardRenderer component.  It is required by many of the
@@ -129,7 +134,7 @@ const gridTiles = computed(() => {
 })
 
 const mergedContext = computed<DashboardRendererContextInternal>(() => {
-  let { tz, refreshInterval } = props.context
+  let { tz, refreshInterval, editable } = props.context
 
   if (!tz) {
     tz = (new Intl.DateTimeFormat()).resolvedOptions().timeZone
@@ -140,17 +145,26 @@ const mergedContext = computed<DashboardRendererContextInternal>(() => {
     refreshInterval = DEFAULT_TILE_REFRESH_INTERVAL_MS
   }
 
+  if (editable === undefined) {
+    editable = false
+  }
+
   return {
     ...props.context,
     tz,
     timeSpec: timeSpec.value,
     refreshInterval,
+    editable,
   }
 })
 
 // Right now, tiles don't have unique keys.  Perhaps in the future they will,
 // and we can use that instead of `index` as the fragment key.
 
+const onEditTile = (tile: GridTile<TileDefinition>) => {
+  emit('edit-tile', tile)
+}
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
index 33ed2b86bf..e39eea638b 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
@@ -4,6 +4,7 @@
       :is="componentData.component"
       v-if="componentData"
       v-bind="componentData.rendererProps"
+      @edit-tile="onEditTile"
     />
   </div>
 </template>
@@ -34,6 +35,10 @@ const props = withDefaults(defineProps<{
   height: DEFAULT_TILE_HEIGHT,
 })
 
+const emit = defineEmits<{
+  (e: 'edit-tile', tile: TileDefinition): void
+}>()
+
 const rendererLookup: Record<DashboardTileType, Component | undefined> = {
   'timeseries_line': TimeseriesChartRenderer,
   'horizontal_bar': BarChartRenderer,
@@ -59,6 +64,10 @@ const componentData = computed(() => {
     },
   }
 })
+
+const onEditTile = () => {
+  emit('edit-tile', props.definition)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/analytics/dashboard-renderer/src/components/GoldenSignalsRenderer.vue b/packages/analytics/dashboard-renderer/src/components/GoldenSignalsRenderer.vue
index 0a594d12ab..b452055b71 100644
--- a/packages/analytics/dashboard-renderer/src/components/GoldenSignalsRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/GoldenSignalsRenderer.vue
@@ -46,18 +46,24 @@ const overrideTimeframe: Ref<Timeframe> = computed(() => {
   return relativePeriod
 })
 
-const options = computed<ProviderProps>(() => ({
-  datasource: props.query?.datasource,
-  overrideTimeframe: overrideTimeframe.value,
-  tz: props.context.tz,
-  additionalFilter: props.context.filters as ExploreFilter[], // TODO: Decide how to handle metric card filters.
-  longCardTitles: props.chartOptions.longCardTitles,
-  containerTitle: props.chartOptions.chartTitle,
-  description: props.chartOptions.description,
-  percentileLatency: props.chartOptions.percentileLatency,
-  refreshInterval: props.context.refreshInterval,
-  queryReady: props.queryReady,
-}))
+const options = computed<ProviderProps>(() => {
+  const datasource = props.query?.datasource
+  if (datasource && datasource !== 'advanced' && datasource !== 'basic') {
+    throw new Error(`Invalid datasource value: ${datasource}`)
+  }
+  return {
+    datasource: props.query?.datasource,
+    overrideTimeframe: overrideTimeframe.value,
+    tz: props.context.tz,
+    additionalFilter: props.context.filters as ExploreFilter[], // TODO: Decide how to handle metric card filters.
+    longCardTitles: props.chartOptions.longCardTitles,
+    containerTitle: props.chartOptions.chartTitle,
+    description: props.chartOptions.description,
+    percentileLatency: props.chartOptions.percentileLatency,
+    refreshInterval: props.context.refreshInterval,
+    queryReady: props.queryReady,
+  }
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/packages/analytics/dashboard-renderer/src/components/TimeseriesChartRenderer.vue b/packages/analytics/dashboard-renderer/src/components/TimeseriesChartRenderer.vue
index b06132f240..71c57f717f 100644
--- a/packages/analytics/dashboard-renderer/src/components/TimeseriesChartRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/TimeseriesChartRenderer.vue
@@ -1,48 +1,17 @@
+<!-- TimeseriesChartRenderer.vue -->
 <template>
-  <QueryDataProvider
-    v-slot="{ data }"
+  <BaseAnalyticsChartRenderer
+    :chart-options="chartOptions"
     :context="context"
+    :height="height"
     :query="query"
     :query-ready="queryReady"
-  >
-    <div class="analytics-chart">
-      <AnalyticsChart
-        :allow-csv-export="chartOptions.allowCsvExport"
-        :chart-data="data"
-        :chart-options="options"
-        :chart-title="chartOptions.chartTitle"
-        legend-position="bottom"
-        :synthetics-data-key="chartOptions.syntheticsDataKey"
-        tooltip-title=""
-      />
-    </div>
-  </QueryDataProvider>
+  />
 </template>
-<script setup lang="ts">
-import type { RendererProps, TimeseriesChartOptions } from '../types'
-import QueryDataProvider from './QueryDataProvider.vue'
-import { computed } from 'vue'
-import type { AnalyticsChartOptions } from '@kong-ui-public/analytics-chart'
-import { AnalyticsChart } from '@kong-ui-public/analytics-chart'
-
-const props = defineProps<RendererProps<TimeseriesChartOptions>>()
 
-const options = computed((): AnalyticsChartOptions => {
-  // Default `stacked` to false.
-  const stacked = props.chartOptions.stacked ?? false
+<script setup lang="ts">
+import BaseAnalyticsChartRenderer from './BaseAnalyticsChartRenderer.vue'
+import type { TimeseriesChartOptions, RendererProps } from '../types'
 
-  // Note that `fill` and `stacked` are linked; it's not possible to have a non-filled stacked chart.
-  // This matches our intuitions about how these charts work.
-  return {
-    type: props.chartOptions.type,
-    stacked,
-    chartDatasetColors: props.chartOptions.chartDatasetColors,
-  }
-})
+defineProps<RendererProps<TimeseriesChartOptions>>()
 </script>
-
-<style scoped lang="scss">
-.analytics-chart {
-  height: v-bind('`${height}px`');
-}
-</style>
diff --git a/packages/analytics/dashboard-renderer/src/locales/en.json b/packages/analytics/dashboard-renderer/src/locales/en.json
index b823239c6d..b41b0e493d 100644
--- a/packages/analytics/dashboard-renderer/src/locales/en.json
+++ b/packages/analytics/dashboard-renderer/src/locales/en.json
@@ -5,7 +5,8 @@
       "24h": "Last 24-Hour Summary",
       "7d": "Last 7-Day Summary",
       "30d": "Last 30-Day Summary"
-    }
+    },
+    "edit": "Edit"
   },
   "queryDataProvider": {
     "timeRangeExceeded":  "The time range for this report is outside of your organization's data retention period"
diff --git a/packages/analytics/dashboard-renderer/src/types/dashboard-renderer-types.ts b/packages/analytics/dashboard-renderer/src/types/dashboard-renderer-types.ts
index a1fac860ce..974298e930 100644
--- a/packages/analytics/dashboard-renderer/src/types/dashboard-renderer-types.ts
+++ b/packages/analytics/dashboard-renderer/src/types/dashboard-renderer-types.ts
@@ -22,6 +22,7 @@ export interface DashboardRendererContext {
   timeSpec?: TimeRangeV4
   tz?: string
   refreshInterval?: number
+  editable?: boolean
 }
 
 type FromSchemaWithOptions<T extends JSONSchema> = FromSchema<T, { keepDefaultedPropertiesOptional: true }>