diff --git a/apps/www/src/content/docs/charts/area.md b/apps/www/src/content/docs/charts/area.md
index 6da49690..6c10af86 100644
--- a/apps/www/src/content/docs/charts/area.md
+++ b/apps/www/src/content/docs/charts/area.md
@@ -41,6 +41,6 @@ We can turn the chart into sparkline chart by hiding axis, gridline and legends.
 
 ### Custom Tooltip
 
-If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition [here](http://localhost:5173/docs/charts/guide.html#custom-tooltip).
+If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition [here](/docs/charts/guide.html#custom-tooltip).
 
 <ComponentPreview name="AreaChartCustomTooltip"  />
diff --git a/apps/www/src/content/docs/charts/bar.md b/apps/www/src/content/docs/charts/bar.md
index 40e86efe..ddce7edf 100644
--- a/apps/www/src/content/docs/charts/bar.md
+++ b/apps/www/src/content/docs/charts/bar.md
@@ -27,4 +27,24 @@ Follow the [guide](/docs/charts/guide.html#installation) to complete the setup.
 
 </Steps>
 
+## API
+
 <!-- @include: @/content/meta/BarChart.md -->
+
+## Example
+
+### Stacked
+
+You can stack the bar chart by settings prop `type` to `stacked`.
+
+<ComponentPreview name="BarChartStacked"  />
+
+### Rounded
+
+<ComponentPreview name="BarChartRounded"  />
+
+### Custom Tooltip
+
+If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition [here](/docs/charts/guide.html#custom-tooltip).
+
+<ComponentPreview name="BarChartCustomTooltip"  />
diff --git a/apps/www/src/content/docs/charts/donut.md b/apps/www/src/content/docs/charts/donut.md
index 236eecad..607c45b7 100644
--- a/apps/www/src/content/docs/charts/donut.md
+++ b/apps/www/src/content/docs/charts/donut.md
@@ -27,4 +27,26 @@ Follow the [guide](/docs/charts/guide.html#installation) to complete the setup.
 
 </Steps>
 
+## API
+
 <!-- @include: @/content/meta/DonutChart.md -->
+
+## Example
+
+### Pie Chart
+
+If you want to render pie chart instead, pass `type` as `pie`.
+
+<ComponentPreview name="DonutChartPie"  />
+
+### Color
+
+We generate colors automatically based on the primary and secondary color and assigned them accordingly. Feel free to pass in your own array of colors.
+
+<ComponentPreview name="DonutChartColor"  />
+
+### Custom Tooltip
+
+If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition [here](/docs/charts/guide.html#custom-tooltip).
+
+<ComponentPreview name="DonutChartCustomTooltip"  />
diff --git a/apps/www/src/content/docs/charts/line.md b/apps/www/src/content/docs/charts/line.md
index 47f130db..7e965ad3 100644
--- a/apps/www/src/content/docs/charts/line.md
+++ b/apps/www/src/content/docs/charts/line.md
@@ -29,7 +29,7 @@ Follow the [guide](/docs/charts/guide.html#installation) to complete the setup.
 
 ## API
 
-<!-- @include: @/content/meta/AreaChart.md -->
+<!-- @include: @/content/meta/LineChart.md -->
 
 ## Example
 
@@ -41,6 +41,6 @@ We can turn the chart into sparkline chart by hiding axis, gridline and legends.
 
 ### Custom Tooltip
 
-If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition [here](http://localhost:5173/docs/charts/guide.html#custom-tooltip).
+If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition [here](/docs/charts/guide.html#custom-tooltip).
 
 <ComponentPreview name="LineChartCustomTooltip"  />
diff --git a/apps/www/src/lib/registry/default/example/BarChartCustomTooltip.vue b/apps/www/src/lib/registry/default/example/BarChartCustomTooltip.vue
new file mode 100644
index 00000000..c450772b
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/BarChartCustomTooltip.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import CustomChartTooltip from './CustomChartTooltip.vue'
+import { BarChart } from '@/lib/registry/default/ui/chart-bar'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <BarChart
+    :data="data"
+    index="name"
+    :categories="['total', 'predicted']"
+    :y-formatter="(tick, i) => {
+      return typeof tick === 'number'
+        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
+        : ''
+    }"
+    :custom-tooltip="CustomChartTooltip"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/default/example/BarChartRounded.vue b/apps/www/src/lib/registry/default/example/BarChartRounded.vue
new file mode 100644
index 00000000..cb3d6226
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/BarChartRounded.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { BarChart } from '@/lib/registry/default/ui/chart-bar'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <BarChart
+    index="name"
+    :data="data"
+    :categories="['total', 'predicted']"
+    :y-formatter="(tick, i) => {
+      return typeof tick === 'number'
+        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
+        : ''
+    }"
+    :rounded-corners="4"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/default/example/BarChartStacked.vue b/apps/www/src/lib/registry/default/example/BarChartStacked.vue
new file mode 100644
index 00000000..b2e7d185
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/BarChartStacked.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { BarChart } from '@/lib/registry/default/ui/chart-bar'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <BarChart
+    index="name"
+    :data="data"
+    :categories="['total', 'predicted']"
+    :y-formatter="(tick, i) => {
+      return typeof tick === 'number'
+        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
+        : ''
+    }"
+    :type="'stacked'"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/default/example/DonutChartColor.vue b/apps/www/src/lib/registry/default/example/DonutChartColor.vue
new file mode 100644
index 00000000..0ae5b157
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/DonutChartColor.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { DonutChart } from '@/lib/registry/new-york/ui/chart-donut'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+
+const valueFormatter = (tick: number | Date) => typeof tick === 'number' ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}` : ''
+</script>
+
+<template>
+  <DonutChart
+    index="name"
+    :category="'total'"
+    :data="data"
+    :value-formatter="valueFormatter"
+    :colors="['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/default/example/DonutChartCustomTooltip.vue b/apps/www/src/lib/registry/default/example/DonutChartCustomTooltip.vue
new file mode 100644
index 00000000..2e927858
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/DonutChartCustomTooltip.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import CustomChartTooltip from './CustomChartTooltip.vue'
+import { DonutChart } from '@/lib/registry/default/ui/chart-donut'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <DonutChart
+    index="name"
+    :category="'total'"
+    :data="data"
+    :custom-tooltip="CustomChartTooltip"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/default/example/DonutChartPie.vue b/apps/www/src/lib/registry/default/example/DonutChartPie.vue
new file mode 100644
index 00000000..cf3de170
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/DonutChartPie.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { DonutChart } from '@/lib/registry/default/ui/chart-donut'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <DonutChart
+    index="name"
+    :category="'total'"
+    :data="data"
+    :type="'pie'"
+  />
+</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 a5d5cdfb..31cd512f 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
@@ -33,7 +33,6 @@ const props = withDefaults(defineProps<BaseChartProps<T> & {
   showLegend: true,
   showGridLine: true,
 })
-
 const emits = defineEmits<{
   legendItemClick: [d: BulletLegendItemInterface, i: number]
 }>()
@@ -61,14 +60,14 @@ const selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.select
 
 <template>
   <div :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')">
-    <ChartLegend v-if="showLegend" v-model:items="legendItems" :custom-tooltip="customTooltip" @legend-item-click="handleLegendItemClick" />
+    <ChartLegend v-if="showLegend" v-model:items="legendItems" @legend-item-click="handleLegendItemClick" />
 
     <VisXYContainer
       :data="data"
       :style="{ height: isMounted ? '100%' : 'auto' }"
       :margin="margin"
     >
-      <ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :index="index" />
+      <ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :custom-tooltip="customTooltip" :index="index" />
 
       <VisBarComponent
         :x="(d: Data, i: number) => i"
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 6090b746..9ab5f652 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
@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
 import { VisDonut, VisSingleContainer } from '@unovis/vue'
 import { Donut } from '@unovis/ts'
-import { type DefineComponent, computed, ref } from 'vue'
+import { type Component, computed, ref } from 'vue'
 import { useMounted } from '@vueuse/core'
 import { type BaseChartProps, ChartSingleTooltip, defaultColors } from '@/lib/registry/default/ui/chart'
 import { cn } from '@/lib/utils'
@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors'
   /**
    * Render custom tooltip component.
    */
-  customTooltip?: DefineComponent
+  customTooltip?: Component
 }>(), {
   margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
   sortFunction: () => undefined,
@@ -75,7 +75,7 @@ const totalValue = computed(() => props.data.reduce((prev, curr) => {
         :color="colors"
         :arc-width="type === 'donut' ? 20 : 0"
         :show-background="false"
-        :central-label="valueFormatter(totalValue)"
+        :central-label="type === 'donut' ? valueFormatter(totalValue) : ''"
         :events="{
           [Donut.selectors.segment]: {
             click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {
diff --git a/apps/www/src/lib/registry/new-york/example/BarChartCustomTooltip.vue b/apps/www/src/lib/registry/new-york/example/BarChartCustomTooltip.vue
new file mode 100644
index 00000000..0e514127
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/BarChartCustomTooltip.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import CustomChartTooltip from './CustomChartTooltip.vue'
+import { BarChart } from '@/lib/registry/new-york/ui/chart-bar'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <BarChart
+    :data="data"
+    index="name"
+    :categories="['total', 'predicted']"
+    :y-formatter="(tick, i) => {
+      return typeof tick === 'number'
+        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
+        : ''
+    }"
+    :custom-tooltip="CustomChartTooltip"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/BarChartRounded.vue b/apps/www/src/lib/registry/new-york/example/BarChartRounded.vue
new file mode 100644
index 00000000..e5e4280d
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/BarChartRounded.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { BarChart } from '@/lib/registry/new-york/ui/chart-bar'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <BarChart
+    index="name"
+    :data="data"
+    :categories="['total', 'predicted']"
+    :y-formatter="(tick, i) => {
+      return typeof tick === 'number'
+        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
+        : ''
+    }"
+    :rounded-corners="4"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/BarChartStacked.vue b/apps/www/src/lib/registry/new-york/example/BarChartStacked.vue
new file mode 100644
index 00000000..c139d47c
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/BarChartStacked.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { BarChart } from '@/lib/registry/new-york/ui/chart-bar'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <BarChart
+    index="name"
+    :data="data"
+    :categories="['total', 'predicted']"
+    :y-formatter="(tick, i) => {
+      return typeof tick === 'number'
+        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
+        : ''
+    }"
+    :type="'stacked'"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/DonutChartColor.vue b/apps/www/src/lib/registry/new-york/example/DonutChartColor.vue
new file mode 100644
index 00000000..0ae5b157
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/DonutChartColor.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { DonutChart } from '@/lib/registry/new-york/ui/chart-donut'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+
+const valueFormatter = (tick: number | Date) => typeof tick === 'number' ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}` : ''
+</script>
+
+<template>
+  <DonutChart
+    index="name"
+    :category="'total'"
+    :data="data"
+    :value-formatter="valueFormatter"
+    :colors="['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/DonutChartCustomTooltip.vue b/apps/www/src/lib/registry/new-york/example/DonutChartCustomTooltip.vue
new file mode 100644
index 00000000..06bca323
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/DonutChartCustomTooltip.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import CustomChartTooltip from './CustomChartTooltip.vue'
+import { DonutChart } from '@/lib/registry/new-york/ui/chart-donut'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <DonutChart
+    index="name"
+    :category="'total'"
+    :data="data"
+    :custom-tooltip="CustomChartTooltip"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/DonutChartPie.vue b/apps/www/src/lib/registry/new-york/example/DonutChartPie.vue
new file mode 100644
index 00000000..9f29aea4
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/DonutChartPie.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { DonutChart } from '@/lib/registry/new-york/ui/chart-donut'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <DonutChart
+    index="name"
+    :category="'total'"
+    :data="data"
+    :type="'pie'"
+  />
+</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 0803142f..516e8b47 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
@@ -61,14 +61,14 @@ const selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.select
 
 <template>
   <div :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')">
-    <ChartLegend v-if="showLegend" v-model:items="legendItems" :custom-tooltip="customTooltip" @legend-item-click="handleLegendItemClick" />
+    <ChartLegend v-if="showLegend" v-model:items="legendItems" @legend-item-click="handleLegendItemClick" />
 
     <VisXYContainer
       :data="data"
       :style="{ height: isMounted ? '100%' : 'auto' }"
       :margin="margin"
     >
-      <ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :index="index" />
+      <ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :custom-tooltip="customTooltip" :index="index" />
 
       <VisBarComponent
         :x="(d: Data, i: number) => i"
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 07edbdc6..21f399b5 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,7 +1,7 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
 import { VisDonut, VisSingleContainer } from '@unovis/vue'
 import { Donut } from '@unovis/ts'
-import { type DefineComponent, computed, ref } from 'vue'
+import { type Component, computed, ref } from 'vue'
 import { useMounted } from '@vueuse/core'
 import { type BaseChartProps, ChartSingleTooltip, defaultColors } from '@/lib/registry/new-york/ui/chart'
 import { cn } from '@/lib/utils'
@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors'
   /**
    * Render custom tooltip component.
    */
-  customTooltip?: DefineComponent
+  customTooltip?: Component
 }>(), {
   margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
   sortFunction: () => undefined,
@@ -75,7 +75,7 @@ const totalValue = computed(() => props.data.reduce((prev, curr) => {
         :color="colors"
         :arc-width="type === 'donut' ? 20 : 0"
         :show-background="false"
-        :central-label="valueFormatter(totalValue)"
+        :central-label="type === 'donut' ? valueFormatter(totalValue) : ''"
         :events="{
           [Donut.selectors.segment]: {
             click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {