diff --git a/package.json b/package.json
index 7f6eaa38..95ec1715 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@outerbase/astra-ui",
-  "version": "0.8.11",
+  "version": "0.8.16",
   "type": "module",
   "main": "dist/js/index.js",
   "module": "dist/js/index.js",
diff --git a/src/components/charts/chart.ts b/src/components/charts/chart.ts
index ca2cad07..6f8e7190 100644
--- a/src/components/charts/chart.ts
+++ b/src/components/charts/chart.ts
@@ -13,7 +13,15 @@ import { ClassifiedElement } from '../classified-element.js'
 
 // import * as echarts from 'echarts'
 import { BarChart, FunnelChart, HeatmapChart, LineChart, PieChart, RadarChart, ScatterChart } from 'echarts/charts'
-import { DatasetComponent, LegendComponent, TitleComponent, TooltipComponent, TransformComponent } from 'echarts/components'
+import {
+  CalendarComponent,
+  DatasetComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  TransformComponent,
+  VisualMapComponent,
+} from 'echarts/components'
 import * as echarts from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import type {
@@ -45,6 +53,8 @@ echarts.use([
   PieChart,
   RadarChart,
   FunnelChart,
+  VisualMapComponent,
+  CalendarComponent,
 ])
 
 @customElement('astra-chart')
@@ -228,6 +238,9 @@ export default class AstraChart extends ClassifiedElement {
   @property({ type: Number, attribute: 'min-x' }) minX?: number
   @property({ type: Number, attribute: 'max-x' }) maxX?: number
 
+  // custom echarts options
+  @property({ type: Object, attribute: 'custom' }) custom?: EChartsOption
+
   @query('#chart') private chartDiv!: HTMLDivElement
 
   private chartInstance?: echarts.ECharts
@@ -274,6 +287,12 @@ export default class AstraChart extends ClassifiedElement {
       }
     }
 
+    if (_changedProperties.has('custom')) {
+      if (this.chartInstance) {
+        this.chartInstance.setOption(this.getChartOptions(), true)
+      }
+    }
+
     if (_changedProperties.has('theme') || _changedProperties.has('colorTheme')) {
       this.applyTheme()
     }
@@ -342,27 +361,26 @@ export default class AstraChart extends ClassifiedElement {
   }
 
   private getChartOptions(): EChartsOption {
+    const source = this.data?.layers?.[0]?.result ?? []
+
+    // dimensions + source
+    const dataset = {
+      source,
+    }
+
+    // short-circuit use custom config, if any
+    if (this.custom) {
+      return { dataset, ...this.custom }
+    }
+
     const colorValues = this.getColorValues()
-    const datasetSource = this.data?.layers?.[0]?.result ?? []
-
-    // Transform the datasetSource into a format suitable for eCharts by mapping over each item
-    // and reducing columns to a record with column names as keys and corresponding item values.
-    const formattedSource: Record<string, unknown>[] = datasetSource.map((item) =>
-      this.columns.reduce(
-        (acc, column) => {
-          acc[column] = item[column]
-          return acc
-        },
-        {} as Record<string, unknown>
-      )
-    )
     const isTall = (this.chartHeight ?? 0) > 150
     const gridLineColors = this.theme === 'dark' ? '#FFFFFF08' : '#00000010'
     const axisLineColors = this.theme === 'dark' ? '#FFFFFF15' : '#00000020'
 
     // Determine if the X axis data is a date
-    const isXAxisDate = !!(this.columns[0] && formattedSource.some((item) => isDate(item[this.columns[0]] as string)))
-    const isYAxisDate = !!(this.columns[1] && formattedSource.some((item) => isDate(item[this.columns[1]] as string)))
+    const isXAxisDate = !!(this.columns[0] && source.some((item) => isDate(item[this.columns[0]] as string)))
+    const isYAxisDate = !!(this.columns[1] && source.some((item) => isDate(item[this.columns[1]] as string)))
 
     if (this.type === 'radar') {
       return {
@@ -374,7 +392,7 @@ export default class AstraChart extends ClassifiedElement {
           type: 'radar',
           data: [
             {
-              value: formattedSource.map((item) => Number(item[col])), // throws away precision of bigint?!
+              value: source.map((item) => Number(item[col])), // throws away precision of bigint?!
               name: col,
               itemStyle: {
                 color: this.yAxisColors?.[col] || colorValues[index % colorValues.length],
@@ -391,10 +409,7 @@ export default class AstraChart extends ClassifiedElement {
 
     const options: EChartsOption = {
       // backgroundColor: this.getBackgroundColor(),
-      dataset: {
-        dimensions: this.columns,
-        source: formattedSource,
-      },
+      dataset,
       tooltip: {
         trigger: this.type === 'scatter' ? 'item' : 'axis',
         borderColor: gridLineColors, // fix issue where 'item' tooltips were a different color than the rest (maybe it matched the series color)
diff --git a/src/pages/components/calendar.astro b/src/pages/components/calendar.astro
new file mode 100644
index 00000000..8a35d91d
--- /dev/null
+++ b/src/pages/components/calendar.astro
@@ -0,0 +1,426 @@
+---
+import AstraComposedChart from '../../components/charts/composed'
+import Layout from '../../layouts/Layout.astro'
+
+const result = [
+  ['2016-01-01', 4020],
+  ['2016-01-02', 5174],
+  ['2016-01-03', 6823],
+  ['2016-01-04', 1892],
+  ['2016-01-05', 1938],
+  ['2016-01-06', 1324],
+  ['2016-01-07', 2307],
+  ['2016-01-08', 3704],
+  ['2016-01-09', 275],
+  ['2016-01-10', 6866],
+  ['2016-01-11', 3973],
+  ['2016-01-12', 5261],
+  ['2016-01-13', 8563],
+  ['2016-01-14', 1717],
+  ['2016-01-15', 4763],
+  ['2016-01-16', 8170],
+  ['2016-01-17', 5806],
+  ['2016-01-18', 506],
+  ['2016-01-19', 7722],
+  ['2016-01-20', 2706],
+  ['2016-01-21', 814],
+  ['2016-01-22', 6481],
+  ['2016-01-23', 7057],
+  ['2016-01-24', 1686],
+  ['2016-01-25', 1693],
+  ['2016-01-26', 8529],
+  ['2016-01-27', 3017],
+  ['2016-01-28', 2267],
+  ['2016-01-29', 9807],
+  ['2016-01-30', 727],
+  ['2016-01-31', 4556],
+  ['2016-02-01', 1487],
+  ['2016-02-02', 7142],
+  ['2016-02-03', 5359],
+  ['2016-02-04', 4335],
+  ['2016-02-05', 2206],
+  ['2016-02-06', 4312],
+  ['2016-02-07', 6446],
+  ['2016-02-08', 2744],
+  ['2016-02-09', 5155],
+  ['2016-02-10', 8820],
+  ['2016-02-11', 4783],
+  ['2016-02-12', 5187],
+  ['2016-02-13', 8904],
+  ['2016-02-14', 6896],
+  ['2016-02-15', 9196],
+  ['2016-02-16', 4694],
+  ['2016-02-17', 5903],
+  ['2016-02-18', 9083],
+  ['2016-02-19', 5135],
+  ['2016-02-20', 7644],
+  ['2016-02-21', 5540],
+  ['2016-02-22', 4849],
+  ['2016-02-23', 8602],
+  ['2016-02-24', 7114],
+  ['2016-02-25', 321],
+  ['2016-02-26', 8913],
+  ['2016-02-27', 1636],
+  ['2016-02-28', 3550],
+  ['2016-02-29', 1911],
+  ['2016-03-01', 9413],
+  ['2016-03-02', 9692],
+  ['2016-03-03', 2642],
+  ['2016-03-04', 9288],
+  ['2016-03-05', 8852],
+  ['2016-03-06', 2796],
+  ['2016-03-07', 7433],
+  ['2016-03-08', 7495],
+  ['2016-03-09', 9596],
+  ['2016-03-10', 9214],
+  ['2016-03-11', 3192],
+  ['2016-03-12', 3859],
+  ['2016-03-13', 5303],
+  ['2016-03-14', 4551],
+  ['2016-03-15', 9209],
+  ['2016-03-16', 9579],
+  ['2016-03-17', 6779],
+  ['2016-03-18', 5507],
+  ['2016-03-19', 7371],
+  ['2016-03-20', 2353],
+  ['2016-03-21', 4431],
+  ['2016-03-22', 4710],
+  ['2016-03-23', 7828],
+  ['2016-03-24', 3110],
+  ['2016-03-25', 4236],
+  ['2016-03-26', 285],
+  ['2016-03-27', 8896],
+  ['2016-03-28', 2323],
+  ['2016-03-29', 2041],
+  ['2016-03-30', 5893],
+  ['2016-03-31', 3409],
+  ['2016-04-01', 6168],
+  ['2016-04-02', 4198],
+  ['2016-04-03', 1338],
+  ['2016-04-04', 5204],
+  ['2016-04-05', 4383],
+  ['2016-04-06', 9718],
+  ['2016-04-07', 1113],
+  ['2016-04-08', 8609],
+  ['2016-04-09', 9757],
+  ['2016-04-10', 1460],
+  ['2016-04-11', 9414],
+  ['2016-04-12', 4422],
+  ['2016-04-13', 3968],
+  ['2016-04-14', 6419],
+  ['2016-04-15', 7997],
+  ['2016-04-16', 184],
+  ['2016-04-17', 1274],
+  ['2016-04-18', 5024],
+  ['2016-04-19', 710],
+  ['2016-04-20', 6431],
+  ['2016-04-21', 7264],
+  ['2016-04-22', 654],
+  ['2016-04-23', 6896],
+  ['2016-04-24', 1717],
+  ['2016-04-25', 4471],
+  ['2016-04-26', 3807],
+  ['2016-04-27', 8596],
+  ['2016-04-28', 2705],
+  ['2016-04-29', 3490],
+  ['2016-04-30', 24],
+  ['2016-05-01', 3474],
+  ['2016-05-02', 3665],
+  ['2016-05-03', 762],
+  ['2016-05-04', 2732],
+  ['2016-05-05', 2672],
+  ['2016-05-06', 6145],
+  ['2016-05-07', 8625],
+  ['2016-05-08', 8399],
+  ['2016-05-09', 8529],
+  ['2016-05-10', 1496],
+  ['2016-05-11', 7672],
+  ['2016-05-12', 5214],
+  ['2016-05-13', 4510],
+  ['2016-05-14', 1199],
+  ['2016-05-15', 4709],
+  ['2016-05-16', 1913],
+  ['2016-05-17', 9789],
+  ['2016-05-18', 922],
+  ['2016-05-19', 671],
+  ['2016-05-20', 4091],
+  ['2016-05-21', 4447],
+  ['2016-05-22', 4788],
+  ['2016-05-23', 8894],
+  ['2016-05-24', 3068],
+  ['2016-05-25', 1697],
+  ['2016-05-26', 2477],
+  ['2016-05-27', 531],
+  ['2016-05-28', 3476],
+  ['2016-05-29', 8212],
+  ['2016-05-30', 9132],
+  ['2016-05-31', 5814],
+  ['2016-06-01', 8506],
+  ['2016-06-02', 3047],
+  ['2016-06-03', 4068],
+  ['2016-06-04', 2134],
+  ['2016-06-05', 1068],
+  ['2016-06-06', 3112],
+  ['2016-06-07', 2701],
+  ['2016-06-08', 9792],
+  ['2016-06-09', 9720],
+  ['2016-06-10', 6999],
+  ['2016-06-11', 6737],
+  ['2016-06-12', 8164],
+  ['2016-06-13', 7820],
+  ['2016-06-14', 3019],
+  ['2016-06-15', 8736],
+  ['2016-06-16', 4015],
+  ['2016-06-17', 9359],
+  ['2016-06-18', 6274],
+  ['2016-06-19', 5637],
+  ['2016-06-20', 2228],
+  ['2016-06-21', 7234],
+  ['2016-06-22', 3900],
+  ['2016-06-23', 4433],
+  ['2016-06-24', 5878],
+  ['2016-06-25', 468],
+  ['2016-06-26', 6874],
+  ['2016-06-27', 1012],
+  ['2016-06-28', 4026],
+  ['2016-06-29', 7198],
+  ['2016-06-30', 7939],
+  ['2016-07-01', 4559],
+  ['2016-07-02', 7855],
+  ['2016-07-03', 8489],
+  ['2016-07-04', 4564],
+  ['2016-07-05', 3084],
+  ['2016-07-06', 5963],
+  ['2016-07-07', 2008],
+  ['2016-07-08', 4877],
+  ['2016-07-09', 624],
+  ['2016-07-10', 3663],
+  ['2016-07-11', 8068],
+  ['2016-07-12', 472],
+  ['2016-07-13', 5102],
+  ['2016-07-14', 1340],
+  ['2016-07-15', 587],
+  ['2016-07-16', 1929],
+  ['2016-07-17', 8148],
+  ['2016-07-18', 5075],
+  ['2016-07-19', 5879],
+  ['2016-07-20', 3714],
+  ['2016-07-21', 4244],
+  ['2016-07-22', 6986],
+  ['2016-07-23', 8434],
+  ['2016-07-24', 1080],
+  ['2016-07-25', 1667],
+  ['2016-07-26', 2667],
+  ['2016-07-27', 6825],
+  ['2016-07-28', 1351],
+  ['2016-07-29', 8714],
+  ['2016-07-30', 77],
+  ['2016-07-31', 1013],
+  ['2016-08-01', 999],
+  ['2016-08-02', 4292],
+  ['2016-08-03', 5065],
+  ['2016-08-04', 285],
+  ['2016-08-05', 816],
+  ['2016-08-06', 3548],
+  ['2016-08-07', 5588],
+  ['2016-08-08', 1182],
+  ['2016-08-09', 819],
+  ['2016-08-10', 5157],
+  ['2016-08-11', 8775],
+  ['2016-08-12', 5524],
+  ['2016-08-13', 2426],
+  ['2016-08-14', 7869],
+  ['2016-08-15', 8835],
+  ['2016-08-16', 942],
+  ['2016-08-17', 3587],
+  ['2016-08-18', 7732],
+  ['2016-08-19', 2925],
+  ['2016-08-20', 2982],
+  ['2016-08-21', 1879],
+  ['2016-08-22', 3221],
+  ['2016-08-23', 9040],
+  ['2016-08-24', 7699],
+  ['2016-08-25', 2531],
+  ['2016-08-26', 8610],
+  ['2016-08-27', 7686],
+  ['2016-08-28', 1151],
+  ['2016-08-29', 1248],
+  ['2016-08-30', 7563],
+  ['2016-08-31', 3633],
+  ['2016-09-01', 6063],
+  ['2016-09-02', 6503],
+  ['2016-09-03', 3407],
+  ['2016-09-04', 5676],
+  ['2016-09-05', 9372],
+  ['2016-09-06', 2141],
+  ['2016-09-07', 4900],
+  ['2016-09-08', 1683],
+  ['2016-09-09', 1870],
+  ['2016-09-10', 6903],
+  ['2016-09-11', 9949],
+  ['2016-09-12', 2227],
+  ['2016-09-13', 4855],
+  ['2016-09-14', 4612],
+  ['2016-09-15', 6045],
+  ['2016-09-16', 9372],
+  ['2016-09-17', 8945],
+  ['2016-09-18', 5014],
+  ['2016-09-19', 5877],
+  ['2016-09-20', 9957],
+  ['2016-09-21', 3244],
+  ['2016-09-22', 9897],
+  ['2016-09-23', 2811],
+  ['2016-09-24', 8518],
+  ['2016-09-25', 4211],
+  ['2016-09-26', 1681],
+  ['2016-09-27', 2613],
+  ['2016-09-28', 704],
+  ['2016-09-29', 1408],
+  ['2016-09-30', 5136],
+  ['2016-10-01', 5396],
+  ['2016-10-02', 1482],
+  ['2016-10-03', 2648],
+  ['2016-10-04', 4388],
+  ['2016-10-05', 8836],
+  ['2016-10-06', 7392],
+  ['2016-10-07', 1697],
+  ['2016-10-08', 7766],
+  ['2016-10-09', 6099],
+  ['2016-10-10', 6319],
+  ['2016-10-11', 4547],
+  ['2016-10-12', 1478],
+  ['2016-10-13', 9018],
+  ['2016-10-14', 6231],
+  ['2016-10-15', 8981],
+  ['2016-10-16', 8742],
+  ['2016-10-17', 5143],
+  ['2016-10-18', 2012],
+  ['2016-10-19', 7736],
+  ['2016-10-20', 5954],
+  ['2016-10-21', 6136],
+  ['2016-10-22', 1826],
+  ['2016-10-23', 1892],
+  ['2016-10-24', 3483],
+  ['2016-10-25', 2539],
+  ['2016-10-26', 5631],
+  ['2016-10-27', 5716],
+  ['2016-10-28', 5097],
+  ['2016-10-29', 6651],
+  ['2016-10-30', 2676],
+  ['2016-10-31', 3732],
+  ['2016-11-01', 1107],
+  ['2016-11-02', 3190],
+  ['2016-11-03', 4216],
+  ['2016-11-04', 9566],
+  ['2016-11-05', 7108],
+  ['2016-11-06', 9770],
+  ['2016-11-07', 9111],
+  ['2016-11-08', 1386],
+  ['2016-11-09', 5430],
+  ['2016-11-10', 2204],
+  ['2016-11-11', 330],
+  ['2016-11-12', 9186],
+  ['2016-11-13', 8724],
+  ['2016-11-14', 3912],
+  ['2016-11-15', 5633],
+  ['2016-11-16', 5932],
+  ['2016-11-17', 2898],
+  ['2016-11-18', 1764],
+  ['2016-11-19', 5543],
+  ['2016-11-20', 2899],
+  ['2016-11-21', 2762],
+  ['2016-11-22', 2042],
+  ['2016-11-23', 8991],
+  ['2016-11-24', 3762],
+  ['2016-11-25', 1905],
+  ['2016-11-26', 7992],
+  ['2016-11-27', 4676],
+  ['2016-11-28', 5713],
+  ['2016-11-29', 3103],
+  ['2016-11-30', 6417],
+  ['2016-12-01', 6705],
+  ['2016-12-02', 5782],
+  ['2016-12-03', 1923],
+  ['2016-12-04', 9955],
+  ['2016-12-05', 365],
+  ['2016-12-06', 2184],
+  ['2016-12-07', 2479],
+  ['2016-12-08', 9595],
+  ['2016-12-09', 3597],
+  ['2016-12-10', 6775],
+  ['2016-12-11', 4525],
+  ['2016-12-12', 6324],
+  ['2016-12-13', 8549],
+  ['2016-12-14', 4857],
+  ['2016-12-15', 1615],
+  ['2016-12-16', 8268],
+  ['2016-12-17', 64],
+  ['2016-12-18', 1289],
+  ['2016-12-19', 287],
+  ['2016-12-20', 9348],
+  ['2016-12-21', 994],
+  ['2016-12-22', 3562],
+  ['2016-12-23', 9514],
+  ['2016-12-24', 3832],
+  ['2016-12-25', 8492],
+  ['2016-12-26', 1051],
+  ['2016-12-27', 3158],
+  ['2016-12-28', 836],
+  ['2016-12-29', 9369],
+  ['2016-12-30', 8983],
+  ['2016-12-31', 4483],
+]
+
+// our existing format
+const data = {
+  layers: [
+    {
+      type: 'heatmap',
+      coordinateSystem: 'calendar',
+      result,
+    },
+  ],
+}
+
+// the new customized options
+const option = {
+  title: {
+    top: 30,
+    left: 'center',
+    text: 'Daily Step Count',
+  },
+  tooltip: {},
+  visualMap: {
+    min: 0,
+    max: 10000,
+    type: 'piecewise',
+    orient: 'horizontal',
+    left: 'center',
+    top: 65,
+  },
+  calendar: {
+    top: 120,
+    left: 30,
+    right: 30,
+    cellSize: ['auto', 13],
+    range: '2016',
+    itemStyle: {
+      borderWidth: 0.5,
+    },
+    yearLabel: {
+      show: false,
+    },
+  },
+  series: {
+    type: 'heatmap',
+    coordinateSystem: 'calendar',
+  },
+}
+---
+
+<Layout title="Astra-UI - Chart Component">
+  <div class="w-full h-[440px]">
+    <!-- @ts-ignore attributes -->
+    <AstraComposedChart custom={option} header="Header" subheader="Subheader" data={data} theme="dark" client:only="lit" />
+  </div>
+</Layout>
diff --git a/src/pages/components/heatmap.astro b/src/pages/components/heatmap.astro
new file mode 100644
index 00000000..cfa161df
--- /dev/null
+++ b/src/pages/components/heatmap.astro
@@ -0,0 +1,106 @@
+---
+import AstraComposedChart from '../../components/charts/composed'
+import Layout from '../../layouts/Layout.astro'
+
+// prettier-ignore
+// data for chart
+const result = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]]
+    .map(function (item) {
+    return [item[1], item[0], item[2] || '-'];
+});
+
+// our existing format
+const data = {
+  layers: [
+    {
+      type: 'heatmap',
+      result,
+    },
+  ],
+}
+
+// the new customized options
+const option = {
+  tooltip: {
+    position: 'top',
+  },
+  grid: {
+    height: '50%',
+    top: '10%',
+  },
+  xAxis: {
+    type: 'category',
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    splitArea: {
+      show: true, // Show grid markings
+    },
+  },
+  yAxis: {
+    type: 'category',
+    data: [
+      '12a',
+      '1a',
+      '2a',
+      '3a',
+      '4a',
+      '5a',
+      '6a',
+      '7a',
+      '8a',
+      '9a',
+      '10a',
+      '11a',
+      '12p',
+      '1p',
+      '2p',
+      '3p',
+      '4p',
+      '5p',
+      '6p',
+      '7p',
+      '8p',
+      '9p',
+      '10p',
+      '11p',
+    ],
+    splitArea: {
+      show: true,
+    },
+  },
+  visualMap: {
+    min: 0,
+    max: 10,
+    calculable: true,
+    orient: 'horizontal',
+    left: 'center',
+    bottom: '15%',
+  },
+  series: [
+    {
+      name: 'Heatmap Data',
+      type: 'heatmap',
+      encode: {
+        x: 0, // Use the first column in `source` for the x-axis
+        y: 1, // Use the second column in `source` for the y-axis
+        value: 2, // Use the third column in `source` for the cell value
+      },
+      label: {
+        show: true, // Display values inside cells
+      },
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowColor: 'rgba(0, 0, 0, 0.5)',
+        },
+      },
+    },
+  ],
+}
+---
+
+<Layout title="Astra-UI - Chart Component">
+  <div class="w-full h-[440px]">
+    <!-- @ts-ignore attributes -->
+    <AstraComposedChart custom={option} header="Header" subheader="Subheader" data={data} theme="dark" client:only="lit" />
+  </div>
+</Layout>
diff --git a/src/types.ts b/src/types.ts
index 77455993..de7e33f0 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -319,12 +319,7 @@ export type ChartTypeV3 =
   | 'radar'
   | 'funnel'
   | 'pie'
-// | 'smoothLine'
-// | 'stackedBar'
-// | 'candlestick'
-// | 'stepLine'
-// | 'stackedHorizontalBar'
-
+  | 'custom'
 export type DashboardV3ChartLegend = 'none' | 'top' | 'bottom' | 'left' | 'right'
 export type DashboardV3ChartLabelDisplayX = 'auto' | '0' | '45' | '90' | 'hidden'
 export type DashboardV3ChartLabelDisplayY = 'left' | 'right' | 'hidden'
@@ -387,6 +382,8 @@ export type DashboardV3ChartOptions = {
   gradientStop?: string
   // text color
   foreground?: string
+  // echarts custom json
+  echartOptions?: string // JSON.stringified object matching `EChartsOption`
 }
 
 export type DashboardV3Highlight = {