diff --git a/app/assets/javascripts/behaviors/components/json_chart.vue b/app/assets/javascripts/behaviors/components/json_chart.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4d43181eb2d21f742d25a40ce663009c45cdf074
--- /dev/null
+++ b/app/assets/javascripts/behaviors/components/json_chart.vue
@@ -0,0 +1,209 @@
+<script>
+import {
+  GlAreaChart,
+  GlBarChart,
+  GlColumnChart,
+  GlLineChart,
+  GlChart,
+  GlChartSeriesLabel,
+} from '@gitlab/ui/src/charts';
+import { GlAlert } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
+
+import { s__ } from '~/locale';
+
+const CHART_TYPE_MAPPING = {
+  line: 'GlLineChart',
+  area: 'GlAreaChart',
+  bar: 'GlBarChart',
+  column: 'GlColumnChart',
+  scatter: 'GlChart',
+  bubble: 'GlChart',
+  pie: 'GlChart',
+  doughnut: 'GlChart',
+  radar: 'GlChart',
+  heatmap: 'GlChart',
+  sunburst: 'GlChart',
+  treemap: 'GlChart',
+  gauge: 'GlChart',
+  sparkline: 'GlLineChart',
+};
+
+export default {
+  directives: {
+    SafeHtml,
+  },
+  components: {
+    GlAreaChart,
+    GlBarChart,
+    GlColumnChart,
+    GlLineChart,
+    GlChart,
+    GlChartSeriesLabel,
+    GlAlert,
+  },
+  props: {
+    chartType: {
+      type: String,
+      required: true,
+    },
+    chartConfig: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      error: null,
+      chartId: `chart-${Math.random().toString(36).substr(2, 9)}`,
+      focusedDataIndex: -1,
+    };
+  },
+  computed: {
+    componentName() {
+      return CHART_TYPE_MAPPING[this.chartType] || 'GlChart';
+    },
+    chartData() {
+      try {
+        return this.transformData();
+      } catch (e) {
+        this.error = this.$options.i18n.dataTransformError;
+        return [];
+      }
+    },
+    hasValidData() {
+      if (!this.chartData) return false;
+
+      if (Array.isArray(this.chartData)) {
+        return this.chartData.length > 0;
+      }
+
+      if (this.chartData.datasets) {
+        return this.chartData.datasets.length > 0;
+      }
+
+      return Object.keys(this.chartData).length > 0;
+    },
+  },
+  mounted() {
+    this.validateConfig();
+  },
+  methods: {
+    validateConfig() {
+      if (!this.chartType) {
+        this.error = this.$options.i18n.missingChartType;
+        return;
+      }
+
+      if (!CHART_TYPE_MAPPING[this.chartType]) {
+        this.error = this.$options.i18n.unsupportedChartType;
+        return;
+      }
+
+      if (!this.chartConfig.data) {
+        this.error = this.$options.i18n.missingData;
+      }
+    },
+    transformData() {
+      switch (this.chartType) {
+        case 'line':
+        case 'area':
+          return this.transformLineAreaData();
+        default:
+          this.error = this.$options.i18n.unsupportedChartType;
+          return {};
+      }
+    },
+    transformLineAreaData() {
+      return {
+        showLegend: true,
+        option: this.chartConfig.option,
+        data: this.chartConfig.data,
+      };
+    },
+    onChartError() {
+      this.error = this.$options.i18n.renderError;
+    },
+  },
+  i18n: {
+    missingChartType: s__('Charts|Chart type is required'),
+    unsupportedChartType: s__('Charts|Unsupported chart type'),
+    missingData: s__('Charts|Chart data is required'),
+    dataTransformError: s__('Charts|Failed to transform chart data'),
+    renderError: s__('Charts|Failed to render chart'),
+    noData: s__('Charts|No data available'),
+  },
+  // safeHtmlConfig: {
+  //   ...defaultConfig,
+  //   FORBID_ATTR: [...defaultConfig.FORBID_ATTR, 'class', 'style'],
+  //   ALLOW_DATA_ATTR: false,
+  // },
+};
+</script>
+
+<template>
+  <div class="gl-chart-renderer">
+    <gl-alert v-if="error" variant="danger" :dismissible="false" class="gl-mb-3" role="alert">
+      {{ error }}
+    </gl-alert>
+
+    <div v-else-if="!hasValidData" class="gl-py-6 gl-text-center">
+      <p class="gl-text-gray-500" role="status" aria-live="polite">{{ $options.i18n.noData }}</p>
+    </div>
+
+    <div v-else class="gl-chart-container">
+      <!-- Chart visualization -->
+      <div
+        :id="chartId"
+        ref="chartContainer"
+        class="gl-chart-wrapper"
+        role="img"
+        tabindex="0"
+        @focus="focusedDataIndex = 0"
+      >
+        <component
+          :is="componentName"
+          ref="chart"
+          v-bind="chartData"
+          height="auto"
+          responsive
+          class="gl-chart-component"
+          @error="onChartError"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.gl-chart-renderer {
+  max-width: 100%;
+  margin: 1rem 0;
+}
+
+.gl-chart-wrapper {
+  position: relative;
+  outline: none;
+  border-radius: 4px;
+}
+
+.gl-chart-wrapper:focus {
+  outline: 2px solid #1f75cb;
+  outline-offset: 2px;
+}
+
+.gl-chart-wrapper:focus-visible {
+  outline: 2px solid #1f75cb;
+  outline-offset: 2px;
+}
+
+.gl-chart-component {
+  min-height: 300px;
+}
+
+@media (max-width: 768px) {
+  .gl-chart-component {
+    min-height: 200px;
+  }
+}
+</style>
diff --git a/app/assets/javascripts/behaviors/markdown/render_gfm.js b/app/assets/javascripts/behaviors/markdown/render_gfm.js
index fbc4fcdcd394a0394cfb9a4dc9130de55b0cd9a8..515c734ea1e02d9035993c069bd08f48fcb79e43 100644
--- a/app/assets/javascripts/behaviors/markdown/render_gfm.js
+++ b/app/assets/javascripts/behaviors/markdown/render_gfm.js
@@ -5,6 +5,7 @@ import renderMath from './render_math';
 import renderSandboxedMermaid from './render_sandboxed_mermaid';
 import { renderGlql } from './render_glql';
 import { renderJSONTable, renderJSONTableHTML } from './render_json_table';
+import { renderJSONChart } from './render_json_chart';
 import { addAriaLabels } from './accessibility';
 
 function initPopovers(elements) {
@@ -29,6 +30,7 @@ export function renderGFM(element) {
     mermaidEls,
     tableEls,
     tableHTMLEls,
+    chartEls,
     glqlEls,
     userEls,
     popoverEls,
@@ -40,6 +42,7 @@ export function renderGFM(element) {
     '.js-render-mermaid',
     '[data-canonical-lang="json"][data-lang-params~="table"]',
     'table[data-table-fields]',
+    '[data-canonical-lang="json"][data-lang-params~="chart"]',
     '[data-canonical-lang="glql"]',
     '.gfm-project_member',
     '.gfm-issue, .gfm-work_item, .gfm-merge_request, .gfm-epic, .gfm-milestone',
@@ -52,6 +55,7 @@ export function renderGFM(element) {
   renderSandboxedMermaid(mermaidEls);
   renderJSONTable(tableEls.map((e) => e.parentNode));
   renderJSONTableHTML(tableHTMLEls);
+  renderJSONChart(chartEls.map((e) => e.parentNode));
   highlightCurrentUser(userEls);
   initPopovers(popoverEls);
   addAriaLabels(taskListCheckboxEls);
diff --git a/app/assets/javascripts/behaviors/markdown/render_json_chart.js b/app/assets/javascripts/behaviors/markdown/render_json_chart.js
new file mode 100644
index 0000000000000000000000000000000000000000..c00a53f2ab755ef220a322e4d3cd2b4d1b2f9355
--- /dev/null
+++ b/app/assets/javascripts/behaviors/markdown/render_json_chart.js
@@ -0,0 +1,86 @@
+// Follows the example of `render_json_table.js` in order to detect
+// and render json data as various types of charts. The intent is to
+// support the same json structure as our GitLab UI chart components, such as
+// https://design.gitlab.com/storybook/?path=/docs/charts-line-chart--docs
+//
+// Example markdown:
+//
+// ```json:chart
+// {
+//   "type" : "line",
+//   "data" : [
+//     {"name" : "First Series",
+//      "data" : [
+//        ["Mon",1220],["Tue",932],["Wed",901],["Thu",934],["Fri",1290],["Sat",1330],["Sun",1320]
+//      ]
+//     }
+//   ],
+//   "option": {"xAxis":{"name":"Time","type":"category"}}
+// }
+// ```
+
+import { memoize } from 'lodash';
+import Vue from 'vue';
+import { __ } from '~/locale';
+import { createAlert } from '~/alert';
+
+// Async import component since we might not need it...
+const JSONChart = memoize(
+  () => import(/* webpackChunkName: 'gfm_json_chart' */ '../components/json_chart.vue'),
+);
+
+const mountParseError = (element) => {
+  // Let the error container be a sibling to the element.
+  // Otherwise, dismissing the alert causes the copy button to be misplaced.
+  const container = document.createElement('div');
+  element.insertAdjacentElement('beforebegin', container);
+
+  // We need to create a child element with a known selector for `createAlert`
+  const el = document.createElement('div');
+  el.classList.add('js-json-chart-error');
+
+  container.insertAdjacentElement('afterbegin', el);
+
+  return createAlert({
+    message: __('Unable to parse JSON'),
+    variant: 'warning',
+    parent: container,
+    containerSelector: '.js-json-chart-error',
+  });
+};
+
+const mountJSONChartVueComponent = (userData, element) => {
+  const container = document.createElement('div');
+
+  element.classList.add('js-json-chart');
+  element.replaceChildren(container);
+
+  const props = {
+    chartType: userData.type,
+    chartConfig: userData,
+  };
+
+  return new Vue({
+    el: container,
+    render(h) {
+      return h(JSONChart, { props });
+    },
+  });
+};
+
+const renderChart = (element) => {
+  // Avoid rendering multiple times
+  if (!element || element.classList.contains('js-json-chart')) {
+    return;
+  }
+
+  try {
+    mountJSONChartVueComponent(JSON.parse(element.textContent), element);
+  } catch (e) {
+    mountParseError(element);
+  }
+};
+
+export const renderJSONChart = (elements) => {
+  elements.forEach(renderChart);
+};