From db81b6c17508ff465ba5c742da7330154c29d655 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 16 Apr 2024 12:09:17 +0800
Subject: [PATCH] chore: arrange interface, expose margin, slot

---
 apps/www/.vitepress/theme/config/docs.ts      |  4 +
 apps/www/src/content/docs/charts/area.md      |  2 +-
 apps/www/src/content/docs/charts/bar.md       |  2 +-
 apps/www/src/content/docs/charts/donut.md     |  2 +-
 apps/www/src/content/docs/charts/guide.md     |  3 +
 apps/www/src/content/docs/charts/line.md      |  2 +-
 .../default/ui/chart-area/AreaChart.vue       | 61 ++--------------
 .../default/ui/chart-bar/BarChart.vue         | 61 ++--------------
 .../default/ui/chart-donut/DonutChart.vue     | 35 ++-------
 .../default/ui/chart-line/LineChart.vue       | 62 ++--------------
 .../lib/registry/default/ui/chart/index.ts    |  2 +
 .../registry/default/ui/chart/interface.ts    | 64 ++++++++++++++++
 .../registry/new-york/example/CardStats.vue   | 55 +++++++++-----
 .../new-york/ui/chart-area/AreaChart.vue      | 63 ++--------------
 .../new-york/ui/chart-bar/BarChart.vue        | 73 ++++---------------
 .../new-york/ui/chart-donut/DonutChart.vue    | 37 ++--------
 .../new-york/ui/chart-line/LineChart.vue      | 67 ++---------------
 .../lib/registry/new-york/ui/chart/index.ts   |  2 +
 .../registry/new-york/ui/chart/interface.ts   | 64 ++++++++++++++++
 19 files changed, 234 insertions(+), 427 deletions(-)
 create mode 100644 apps/www/src/content/docs/charts/guide.md
 create mode 100644 apps/www/src/lib/registry/default/ui/chart/interface.ts
 create mode 100644 apps/www/src/lib/registry/new-york/ui/chart/interface.ts

diff --git a/apps/www/.vitepress/theme/config/docs.ts b/apps/www/.vitepress/theme/config/docs.ts
index 50646c63..8f73376c 100644
--- a/apps/www/.vitepress/theme/config/docs.ts
+++ b/apps/www/.vitepress/theme/config/docs.ts
@@ -125,6 +125,10 @@ export const docsConfig: DocsConfig = {
       title: 'Charts',
       label: 'Alpha',
       items: [
+        {
+          title: 'Guide',
+          href: '/docs/charts/guide',
+        },
         {
           title: 'Area',
           href: '/docs/charts/area',
diff --git a/apps/www/src/content/docs/charts/area.md b/apps/www/src/content/docs/charts/area.md
index abbaf504..ae4c6acd 100644
--- a/apps/www/src/content/docs/charts/area.md
+++ b/apps/www/src/content/docs/charts/area.md
@@ -1,6 +1,6 @@
 ---
 title: Area
-description: Displays a callout for user attention.
+description: An area chart visually represents data over time, displaying trends and patterns through filled-in areas under a line graph.
 label: Alpha
 ---
 
diff --git a/apps/www/src/content/docs/charts/bar.md b/apps/www/src/content/docs/charts/bar.md
index 095916e8..906c7eef 100644
--- a/apps/www/src/content/docs/charts/bar.md
+++ b/apps/www/src/content/docs/charts/bar.md
@@ -1,6 +1,6 @@
 ---
 title: Bar
-description: Displays a callout for user attention.
+description: An line chart visually represents data using rectangular bars of varying lengths to compare quantities across different categories or groups.
 label: Alpha
 ---
 
diff --git a/apps/www/src/content/docs/charts/donut.md b/apps/www/src/content/docs/charts/donut.md
index c8bb4b08..ba4425c4 100644
--- a/apps/www/src/content/docs/charts/donut.md
+++ b/apps/www/src/content/docs/charts/donut.md
@@ -1,6 +1,6 @@
 ---
 title: Donut
-description: Displays a callout for user attention.
+description: An line chart visually represents data in a circular form, similar to a pie chart but with a central void, emphasizing proportions within categories.
 label: Alpha
 ---
 
diff --git a/apps/www/src/content/docs/charts/guide.md b/apps/www/src/content/docs/charts/guide.md
new file mode 100644
index 00000000..46bca4e4
--- /dev/null
+++ b/apps/www/src/content/docs/charts/guide.md
@@ -0,0 +1,3 @@
+chartinggg
+
+hihi
diff --git a/apps/www/src/content/docs/charts/line.md b/apps/www/src/content/docs/charts/line.md
index e0768147..1c222675 100644
--- a/apps/www/src/content/docs/charts/line.md
+++ b/apps/www/src/content/docs/charts/line.md
@@ -1,6 +1,6 @@
 ---
 title: Line
-description: Displays a callout for user attention.
+description: An line chart  visually displays data points connected by straight lines, illustrating trends or relationships over a continuous axis.
 label: Alpha
 ---
 
diff --git a/apps/www/src/lib/registry/default/ui/chart-area/AreaChart.vue b/apps/www/src/lib/registry/default/ui/chart-area/AreaChart.vue
index 3db304ba..723fcd52 100644
--- a/apps/www/src/lib/registry/default/ui/chart-area/AreaChart.vue
+++ b/apps/www/src/lib/registry/default/ui/chart-area/AreaChart.vue
@@ -4,64 +4,10 @@ import { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
 import { Area, Axis, Line } from '@unovis/ts'
 import { computed, ref } from 'vue'
 import { useMounted } from '@vueuse/core'
-import { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'
+import { type BaseChartProps, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<{
-  /**
-   * The source data, in which each entry is a dictionary.
-   */
-  data: T[]
-  /**
-   * Select the categories from your data. Used to populate the legend and toolip.
-   */
-  categories: KeyOfT[]
-  /**
-   * Sets the key to map the data to the axis.
-   */
-  index: KeyOfT
-  /**
-   * Change the default colors.
-   */
-  colors?: string[]
-  /**
-   * Change the opacity of the non-selected field
-   * @default 0.2
-   */
-  filterOpacity?: number
-  /**
-   * Function to format X label
-   */
-  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
-  /**
-   * Function to format Y label
-   */
-  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
-  /**
-   * Controls the visibility of the X axis.
-   * @default true
-   */
-  showXAxis?: boolean
-  /**
-   * Controls the visibility of the Y axis.
-   * @default true
-   */
-  showYAxis?: boolean
-  /**
-   * Controls the visibility of tooltip.
-   * @default true
-   */
-  showTooltip?: boolean
-  /**
-   * Controls the visibility of legend.
-   * @default true
-   */
-  showLegend?: boolean
-  /**
-   * Controls the visibility of gridline.
-   * @default true
-   */
-  showGridLine?: boolean
+const props = withDefaults(defineProps<BaseChartProps<T> & {
   /**
    * Controls the visibility of gradient.
    * @default true
@@ -69,6 +15,7 @@ const props = withDefaults(defineProps<{
   showGradiant?: boolean
 }>(), {
   filterOpacity: 0.2,
+  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
   showXAxis: true,
   showYAxis: true,
   showTooltip: true,
@@ -170,6 +117,8 @@ function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
         }"
         tick-text-color="hsl(var(--muted-foreground))"
       />
+
+      <slot />
     </VisXYContainer>
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/chart-bar/BarChart.vue b/apps/www/src/lib/registry/default/ui/chart-bar/BarChart.vue
index 3fd4abd8..16299e1b 100644
--- a/apps/www/src/lib/registry/default/ui/chart-bar/BarChart.vue
+++ b/apps/www/src/lib/registry/default/ui/chart-bar/BarChart.vue
@@ -4,71 +4,18 @@ import { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/v
 import { Axis, GroupedBar, StackedBar } from '@unovis/ts'
 import { computed, ref } from 'vue'
 import { useMounted } from '@vueuse/core'
-import { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'
+import { type BaseChartProps, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<{
-  /**
-   * The source data, in which each entry is a dictionary.
-   */
-  data: T[]
-  /**
-   * Select the categories from your data. Used to populate the legend and toolip.
-   */
-  categories: Array<KeyOfT>
-  /**
-   * Sets the key to map the data to the axis.
-   */
-  index: KeyOfT
-  /**
-   * Change the default colors.
-   */
-  colors?: string[]
-  /**
-   * Change the opacity of the non-selected field
-   * @default 0.2
-   */
-  filterOpacity?: number
+const props = withDefaults(defineProps<BaseChartProps<T> & {
   /**
    * Change the type of the chart
    * @default "grouped"
    */
   type?: 'stacked' | 'grouped'
-  /**
-   * Function to format X label
-   */
-  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
-  /**
-   * Function to format Y label
-   */
-  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
-  /**
-   * Controls the visibility of the X axis.
-   * @default true
-   */
-  showXAxis?: boolean
-  /**
-   * Controls the visibility of the Y axis.
-   * @default true
-   */
-  showYAxis?: boolean
-  /**
-   * Controls the visibility of tooltip.
-   * @default true
-   */
-  showTooltip?: boolean
-  /**
-   * Controls the visibility of legend.
-   * @default true
-   */
-  showLegend?: boolean
-  /**
-   * Controls the visibility of gridline.
-   * @default true
-   */
-  showGridLine?: boolean
 }>(), {
   type: 'grouped',
+  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
   filterOpacity: 0.2,
   showXAxis: true,
   showYAxis: true,
@@ -147,6 +94,8 @@ const selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.select
         }"
         tick-text-color="hsl(var(--muted-foreground))"
       />
+
+      <slot />
     </VisXYContainer>
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/chart-donut/DonutChart.vue b/apps/www/src/lib/registry/default/ui/chart-donut/DonutChart.vue
index 5107e461..06bb5b4c 100644
--- a/apps/www/src/lib/registry/default/ui/chart-donut/DonutChart.vue
+++ b/apps/www/src/lib/registry/default/ui/chart-donut/DonutChart.vue
@@ -3,36 +3,19 @@ import { VisDonut, VisSingleContainer } from '@unovis/vue'
 import { Donut } from '@unovis/ts'
 import { computed, ref } from 'vue'
 import { useMounted } from '@vueuse/core'
-import { ChartSingleTooltip, defaultColors } from '@/lib/registry/default/ui/chart'
+import { type BaseChartProps, ChartSingleTooltip, defaultColors } from '@/lib/registry/default/ui/chart'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<{
-  /**
-   * The source data, in which each entry is a dictionary.
-   */
-  data: T[]
-  /**
-   * Sets the key to map the data to the chart.
-   */
-  index: KeyOfT
+const props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {
   /**
    * Sets the name of the key containing the quantitative chart values.
    */
   category: KeyOfT
-  /**
-   * Change the default colors.
-   */
-  colors?: string[]
   /**
    * Change the type of the chart
    * @default "donut"
    */
   type?: 'donut' | 'pie'
-  /**
-   * Change the opacity of the non-selected field
-   * @default 0.2
-   */
-  filterOpacity?: number
   /**
    * Function to sort the segment
    */
@@ -41,17 +24,9 @@ const props = withDefaults(defineProps<{
    * Controls the formatting for the label.
    */
   valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string
-  /**
-   * Controls the visibility of tooltip.
-   * @default true
-   */
-  showTooltip?: boolean
-  /**
-   * Controls the visibility of legend.
-   * @default true
-   */
-  showLegend?: boolean
+
 }>(), {
+  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
   sortFunction: () => undefined,
   valueFormatter: (tick: number) => `${tick}`,
   type: 'donut',
@@ -113,6 +88,8 @@ const totalValue = computed(() => props.data.reduce((prev, curr) => {
           },
         }"
       />
+
+      <slot />
     </VisSingleContainer>
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/chart-line/LineChart.vue b/apps/www/src/lib/registry/default/ui/chart-line/LineChart.vue
index 9ceda215..02b385d2 100644
--- a/apps/www/src/lib/registry/default/ui/chart-line/LineChart.vue
+++ b/apps/www/src/lib/registry/default/ui/chart-line/LineChart.vue
@@ -4,66 +4,12 @@ import { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
 import { Axis, Line } from '@unovis/ts'
 import { computed, ref } from 'vue'
 import { useMounted } from '@vueuse/core'
-import { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'
+import { type BaseChartProps, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<{
-  /**
-   * The source data, in which each entry is a dictionary.
-   */
-  data: T[]
-  /**
-   * Select the categories from your data. Used to populate the legend and toolip.
-   */
-  categories: KeyOfT[]
-  /**
-   * Sets the key to map the data to the axis.
-   */
-  index: KeyOfT
-  /**
-   * Change the default colors.
-   */
-  colors?: string[]
-  /**
-   * Change the opacity of the non-selected field
-   * @default 0.2
-   */
-  filterOpacity?: number
-  /**
-   * Function to format X label
-   */
-  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
-  /**
-   * Function to format Y label
-   */
-  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
-  /**
-   * Controls the visibility of the X axis.
-   * @default true
-   */
-  showXAxis?: boolean
-  /**
-   * Controls the visibility of the Y axis.
-   * @default true
-   */
-  showYAxis?: boolean
-  /**
-   * Controls the visibility of tooltip.
-   * @default true
-   */
-  showTooltip?: boolean
-  /**
-   * Controls the visibility of legend.
-   * @default true
-   */
-  showLegend?: boolean
-  /**
-   * Controls the visibility of gridline.
-   * @default true
-   */
-  showGridLine?: boolean
-}>(), {
+const props = withDefaults(defineProps<BaseChartProps<T>>(), {
   filterOpacity: 0.2,
+  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
   showXAxis: true,
   showYAxis: true,
   showTooltip: true,
@@ -140,6 +86,8 @@ function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
         }"
         tick-text-color="hsl(var(--muted-foreground))"
       />
+
+      <slot />
     </VisXYContainer>
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/chart/index.ts b/apps/www/src/lib/registry/default/ui/chart/index.ts
index 49228ca1..af10d249 100644
--- a/apps/www/src/lib/registry/default/ui/chart/index.ts
+++ b/apps/www/src/lib/registry/default/ui/chart/index.ts
@@ -14,3 +14,5 @@ export function defaultColors(count: number = 3) {
     ...Array.from(Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),
   ]
 }
+
+export * from './interface'
diff --git a/apps/www/src/lib/registry/default/ui/chart/interface.ts b/apps/www/src/lib/registry/default/ui/chart/interface.ts
new file mode 100644
index 00000000..c3838afc
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/chart/interface.ts
@@ -0,0 +1,64 @@
+import type { Spacing } from '@unovis/ts'
+
+type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>
+
+export interface BaseChartProps<T extends Record<string, any>> {
+  /**
+   * The source data, in which each entry is a dictionary.
+   */
+  data: T[]
+  /**
+   * Select the categories from your data. Used to populate the legend and toolip.
+   */
+  categories: KeyOf<T>[]
+  /**
+   * Sets the key to map the data to the axis.
+   */
+  index: KeyOf<T>
+  /**
+   * Change the default colors.
+   */
+  colors?: string[]
+  /**
+   * Margin of each the container
+   */
+  margin?: Spacing
+  /**
+   * Change the opacity of the non-selected field
+   * @default 0.2
+   */
+  filterOpacity?: number
+  /**
+   * Function to format X label
+   */
+  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
+  /**
+   * Function to format Y label
+   */
+  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
+  /**
+   * Controls the visibility of the X axis.
+   * @default true
+   */
+  showXAxis?: boolean
+  /**
+   * Controls the visibility of the Y axis.
+   * @default true
+   */
+  showYAxis?: boolean
+  /**
+   * Controls the visibility of tooltip.
+   * @default true
+   */
+  showTooltip?: boolean
+  /**
+   * Controls the visibility of legend.
+   * @default true
+   */
+  showLegend?: boolean
+  /**
+   * Controls the visibility of gridline.
+   * @default true
+   */
+  showGridLine?: boolean
+}
diff --git a/apps/www/src/lib/registry/new-york/example/CardStats.vue b/apps/www/src/lib/registry/new-york/example/CardStats.vue
index 89c1ebb3..cfb00c9f 100644
--- a/apps/www/src/lib/registry/new-york/example/CardStats.vue
+++ b/apps/www/src/lib/registry/new-york/example/CardStats.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { VisLine, VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue'
+import { VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue'
 import { Card, CardContent, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
+import { LineChart } from '@/lib/registry/new-york/ui/chart-line'
+import { BarChart } from '@/lib/registry/new-york/ui/chart-bar'
 
 type Data = typeof data[number]
 const data = [
@@ -13,9 +15,6 @@ const data = [
   { revenue: 11244, subscription: 278 },
   { revenue: 26475, subscription: 189 },
 ]
-
-const lineX = (d: Data, i: number) => i
-const lineY = (d: Data) => d.revenue
 </script>
 
 <template>
@@ -35,18 +34,27 @@ const lineY = (d: Data) => d.revenue
         </p>
 
         <div class="h-20">
-          <VisXYContainer
-            height="80px"
-            :data="data" :margin="{
-              top: 5,
-              right: 10,
-              left: 10,
-              bottom: 0,
-            }"
+          <LineChart
+            class="h-[80px]"
+            :data="data"
+            :margin="{ top: 5, right: 10, left: 10, bottom: 0 }"
+            :categories="['revenue']"
+            :index="'revenue'"
+            :show-grid-line="false"
+            :show-legend="false"
+            :show-tooltip="false"
+            :show-x-axis="false"
+            :show-y-axis="false"
           >
-            <VisLine :x="lineX" :y="lineY" color="hsl(var(--primary))" />
-            <VisScatter :x="lineX" :y="lineY" :size="6" stroke-color="hsl(var(--primary))" :stroke-width="2" color="white" />
-          </VisXYContainer>
+            <VisScatter
+              color="white"
+              stroke-color="hsl(var(--primary))"
+              :x="(d: Data, i: number) => i"
+              :y="(d: Data) => d.revenue"
+              :size="6"
+              :stroke-width="2"
+            />
+          </LineChart>
         </div>
       </CardContent>
     </Card>
@@ -66,16 +74,27 @@ const lineY = (d: Data) => d.revenue
         </p>
 
         <div class="mt-4 h-20">
-          <VisXYContainer
+          <BarChart
+            class="h-[80px]"
+            :data="data"
+            :categories="['subscription']"
+            :index="'subscription'"
+            :show-grid-line="false"
+            :show-legend="false"
+            :show-x-axis="false"
+            :show-y-axis="false"
+            :show-tooltip="false"
+          />
+          <!-- <VisXYContainer
             height="80px" :data="data"
           >
             <VisStackedBar
-              :x="lineX"
+              :x="(d: Data, i:number) => i"
               :y="(d: Data) => d.subscription"
               :bar-padding="0.1"
               :rounded-corners="0" color="hsl(var(--primary))"
             />
-          </VisXYContainer>
+          </VisXYContainer> -->
         </div>
       </CardContent>
     </Card>
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue b/apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue
index 4b67dc7f..47fb9e0c 100644
--- a/apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue
+++ b/apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue
@@ -1,67 +1,13 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
-import type { BulletLegendItemInterface } from '@unovis/ts'
+import type { BulletLegendItemInterface, Spacing } from '@unovis/ts'
 import { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
 import { Area, Axis, Line } from '@unovis/ts'
 import { computed, ref } from 'vue'
 import { useMounted } from '@vueuse/core'
-import { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'
+import { type BaseChartProps, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<{
-  /**
-   * The source data, in which each entry is a dictionary.
-   */
-  data: T[]
-  /**
-   * Select the categories from your data. Used to populate the legend and toolip.
-   */
-  categories: KeyOfT[]
-  /**
-   * Sets the key to map the data to the axis.
-   */
-  index: KeyOfT
-  /**
-   * Change the default colors.
-   */
-  colors?: string[]
-  /**
-   * Change the opacity of the non-selected field
-   * @default 0.2
-   */
-  filterOpacity?: number
-  /**
-   * Function to format X label
-   */
-  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
-  /**
-   * Function to format Y label
-   */
-  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
-  /**
-   * Controls the visibility of the X axis.
-   * @default true
-   */
-  showXAxis?: boolean
-  /**
-   * Controls the visibility of the Y axis.
-   * @default true
-   */
-  showYAxis?: boolean
-  /**
-   * Controls the visibility of tooltip.
-   * @default true
-   */
-  showTooltip?: boolean
-  /**
-   * Controls the visibility of legend.
-   * @default true
-   */
-  showLegend?: boolean
-  /**
-   * Controls the visibility of gridline.
-   * @default true
-   */
-  showGridLine?: boolean
+const props = withDefaults(defineProps<BaseChartProps<T> & {
   /**
    * Controls the visibility of gradient.
    * @default true
@@ -69,6 +15,7 @@ const props = withDefaults(defineProps<{
   showGradiant?: boolean
 }>(), {
   filterOpacity: 0.2,
+  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
   showXAxis: true,
   showYAxis: true,
   showTooltip: true,
@@ -170,6 +117,8 @@ function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
         }"
         tick-text-color="hsl(var(--muted-foreground))"
       />
+
+      <slot />
     </VisXYContainer>
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-bar/BarChart.vue b/apps/www/src/lib/registry/new-york/ui/chart-bar/BarChart.vue
index 2bd99743..ab6faee1 100644
--- a/apps/www/src/lib/registry/new-york/ui/chart-bar/BarChart.vue
+++ b/apps/www/src/lib/registry/new-york/ui/chart-bar/BarChart.vue
@@ -1,74 +1,21 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
-import type { BulletLegendItemInterface } from '@unovis/ts'
+import type { BulletLegendItemInterface, Spacing } from '@unovis/ts'
 import { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'
 import { Axis, GroupedBar, StackedBar } from '@unovis/ts'
 import { computed, ref } from 'vue'
 import { useMounted } from '@vueuse/core'
-import { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'
+import { type BaseChartProps, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<{
-  /**
-   * The source data, in which each entry is a dictionary.
-   */
-  data: T[]
-  /**
-   * Select the categories from your data. Used to populate the legend and toolip.
-   */
-  categories: Array<KeyOfT>
-  /**
-   * Sets the key to map the data to the axis.
-   */
-  index: KeyOfT
-  /**
-   * Change the default colors.
-   */
-  colors?: string[]
-  /**
-   * Change the opacity of the non-selected field
-   * @default 0.2
-   */
-  filterOpacity?: number
+const props = withDefaults(defineProps<BaseChartProps<T> & {
   /**
    * Change the type of the chart
    * @default "grouped"
    */
   type?: 'stacked' | 'grouped'
-  /**
-   * Function to format X label
-   */
-  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
-  /**
-   * Function to format Y label
-   */
-  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
-  /**
-   * Controls the visibility of the X axis.
-   * @default true
-   */
-  showXAxis?: boolean
-  /**
-   * Controls the visibility of the Y axis.
-   * @default true
-   */
-  showYAxis?: boolean
-  /**
-   * Controls the visibility of tooltip.
-   * @default true
-   */
-  showTooltip?: boolean
-  /**
-   * Controls the visibility of legend.
-   * @default true
-   */
-  showLegend?: boolean
-  /**
-   * Controls the visibility of gridline.
-   * @default true
-   */
-  showGridLine?: boolean
 }>(), {
   type: 'grouped',
+  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
   filterOpacity: 0.2,
   showXAxis: true,
   showYAxis: true,
@@ -106,15 +53,19 @@ const selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.select
   <div :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')">
     <ChartLegend v-if="showLegend" v-model:items="legendItems" @legend-item-click="handleLegendItemClick" />
 
-    <VisXYContainer :style="{ height: isMounted ? '100%' : 'auto' }" :margin="{ left: 20, right: 20 }" :data="data">
+    <VisXYContainer
+      :data="data"
+      :style="{ height: isMounted ? '100%' : 'auto' }"
+      :margin="margin"
+    >
       <ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :index="index" />
 
       <VisBarComponent
         :x="(d: Data, i: number) => i"
         :y="categories.map(category => (d: Data) => d[category]) "
         :color="colors"
-        :rounded-corners="4"
-        :bar-padding="0.1"
+        :rounded-corners="0"
+        :bar-padding="0.05"
         :attributes="{
           [selectorsBar]: {
             opacity: (d: Data, i:number) => {
@@ -147,6 +98,8 @@ const selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.select
         }"
         tick-text-color="hsl(var(--muted-foreground))"
       />
+
+      <slot />
     </VisXYContainer>
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-donut/DonutChart.vue b/apps/www/src/lib/registry/new-york/ui/chart-donut/DonutChart.vue
index 62034837..0764acf6 100644
--- a/apps/www/src/lib/registry/new-york/ui/chart-donut/DonutChart.vue
+++ b/apps/www/src/lib/registry/new-york/ui/chart-donut/DonutChart.vue
@@ -1,38 +1,21 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
 import { VisDonut, VisSingleContainer } from '@unovis/vue'
-import { Donut } from '@unovis/ts'
+import { Donut, type Spacing } from '@unovis/ts'
 import { computed, ref } from 'vue'
 import { useMounted } from '@vueuse/core'
-import { ChartSingleTooltip, defaultColors } from '@/lib/registry/new-york/ui/chart'
+import { type BaseChartProps, ChartSingleTooltip, defaultColors } from '@/lib/registry/new-york/ui/chart'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<{
-  /**
-   * The source data, in which each entry is a dictionary.
-   */
-  data: T[]
-  /**
-   * Sets the key to map the data to the chart.
-   */
-  index: KeyOfT
+const props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {
   /**
    * Sets the name of the key containing the quantitative chart values.
    */
   category: KeyOfT
-  /**
-   * Change the default colors.
-   */
-  colors?: string[]
   /**
    * Change the type of the chart
    * @default "donut"
    */
   type?: 'donut' | 'pie'
-  /**
-   * Change the opacity of the non-selected field
-   * @default 0.2
-   */
-  filterOpacity?: number
   /**
    * Function to sort the segment
    */
@@ -41,17 +24,9 @@ const props = withDefaults(defineProps<{
    * Controls the formatting for the label.
    */
   valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string
-  /**
-   * Controls the visibility of tooltip.
-   * @default true
-   */
-  showTooltip?: boolean
-  /**
-   * Controls the visibility of legend.
-   * @default true
-   */
-  showLegend?: boolean
+
 }>(), {
+  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
   sortFunction: () => undefined,
   valueFormatter: (tick: number) => `${tick}`,
   type: 'donut',
@@ -114,6 +89,8 @@ const totalValue = computed(() => props.data.reduce((prev, curr) => {
           },
         }"
       />
+
+      <slot />
     </VisSingleContainer>
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-line/LineChart.vue b/apps/www/src/lib/registry/new-york/ui/chart-line/LineChart.vue
index 7dac4b14..accab77d 100644
--- a/apps/www/src/lib/registry/new-york/ui/chart-line/LineChart.vue
+++ b/apps/www/src/lib/registry/new-york/ui/chart-line/LineChart.vue
@@ -1,69 +1,14 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
-import type { BulletLegendItemInterface } from '@unovis/ts'
+import { Axis, type BulletLegendItemInterface, Line, type Spacing } from '@unovis/ts'
 import { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
-import { Axis, Line } from '@unovis/ts'
 import { computed, ref } from 'vue'
 import { useMounted } from '@vueuse/core'
-import { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'
+import { type BaseChartProps, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<{
-  /**
-   * The source data, in which each entry is a dictionary.
-   */
-  data: T[]
-  /**
-   * Select the categories from your data. Used to populate the legend and toolip.
-   */
-  categories: KeyOfT[]
-  /**
-   * Sets the key to map the data to the axis.
-   */
-  index: KeyOfT
-  /**
-   * Change the default colors.
-   */
-  colors?: string[]
-  /**
-   * Change the opacity of the non-selected field
-   * @default 0.2
-   */
-  filterOpacity?: number
-  /**
-   * Function to format X label
-   */
-  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
-  /**
-   * Function to format Y label
-   */
-  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
-  /**
-   * Controls the visibility of the X axis.
-   * @default true
-   */
-  showXAxis?: boolean
-  /**
-   * Controls the visibility of the Y axis.
-   * @default true
-   */
-  showYAxis?: boolean
-  /**
-   * Controls the visibility of tooltip.
-   * @default true
-   */
-  showTooltip?: boolean
-  /**
-   * Controls the visibility of legend.
-   * @default true
-   */
-  showLegend?: boolean
-  /**
-   * Controls the visibility of gridline.
-   * @default true
-   */
-  showGridLine?: boolean
-}>(), {
+const props = withDefaults(defineProps<BaseChartProps<T>>(), {
   filterOpacity: 0.2,
+  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
   showXAxis: true,
   showYAxis: true,
   showTooltip: true,
@@ -99,7 +44,7 @@ function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
     <ChartLegend v-if="showLegend" v-model:items="legendItems" @legend-item-click="handleLegendItemClick" />
 
     <VisXYContainer
-      :margin="{ left: 20, right: 20 }"
+      :margin="margin"
       :data="data"
       :style="{ height: isMounted ? '100%' : 'auto' }"
     >
@@ -140,6 +85,8 @@ function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
         }"
         tick-text-color="hsl(var(--muted-foreground))"
       />
+
+      <slot />
     </VisXYContainer>
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/chart/index.ts b/apps/www/src/lib/registry/new-york/ui/chart/index.ts
index 49228ca1..af10d249 100644
--- a/apps/www/src/lib/registry/new-york/ui/chart/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/chart/index.ts
@@ -14,3 +14,5 @@ export function defaultColors(count: number = 3) {
     ...Array.from(Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),
   ]
 }
+
+export * from './interface'
diff --git a/apps/www/src/lib/registry/new-york/ui/chart/interface.ts b/apps/www/src/lib/registry/new-york/ui/chart/interface.ts
new file mode 100644
index 00000000..c3838afc
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/chart/interface.ts
@@ -0,0 +1,64 @@
+import type { Spacing } from '@unovis/ts'
+
+type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>
+
+export interface BaseChartProps<T extends Record<string, any>> {
+  /**
+   * The source data, in which each entry is a dictionary.
+   */
+  data: T[]
+  /**
+   * Select the categories from your data. Used to populate the legend and toolip.
+   */
+  categories: KeyOf<T>[]
+  /**
+   * Sets the key to map the data to the axis.
+   */
+  index: KeyOf<T>
+  /**
+   * Change the default colors.
+   */
+  colors?: string[]
+  /**
+   * Margin of each the container
+   */
+  margin?: Spacing
+  /**
+   * Change the opacity of the non-selected field
+   * @default 0.2
+   */
+  filterOpacity?: number
+  /**
+   * Function to format X label
+   */
+  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
+  /**
+   * Function to format Y label
+   */
+  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
+  /**
+   * Controls the visibility of the X axis.
+   * @default true
+   */
+  showXAxis?: boolean
+  /**
+   * Controls the visibility of the Y axis.
+   * @default true
+   */
+  showYAxis?: boolean
+  /**
+   * Controls the visibility of tooltip.
+   * @default true
+   */
+  showTooltip?: boolean
+  /**
+   * Controls the visibility of legend.
+   * @default true
+   */
+  showLegend?: boolean
+  /**
+   * Controls the visibility of gridline.
+   * @default true
+   */
+  showGridLine?: boolean
+}