diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 6eb871b3..22a85eb7 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -31,6 +31,13 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/AlertDialogDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/AlertDialogDemo.vue"],
     },
+    "AreaChartCustomTooltip": {
+      name: "AreaChartCustomTooltip",
+      type: "components:example",
+      registryDependencies: ["chart-area"],
+      component: () => import("../src/lib/registry/default/example/AreaChartCustomTooltip.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/AreaChartCustomTooltip.vue"],
+    },
     "AreaChartDemo": {
       name: "AreaChartDemo",
       type: "components:example",
@@ -38,6 +45,13 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/AreaChartDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/AreaChartDemo.vue"],
     },
+    "AreaChartSparkline": {
+      name: "AreaChartSparkline",
+      type: "components:example",
+      registryDependencies: ["chart-area"],
+      component: () => import("../src/lib/registry/default/example/AreaChartSparkline.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/AreaChartSparkline.vue"],
+    },
     "AspectRatioDemo": {
       name: "AspectRatioDemo",
       type: "components:example",
@@ -80,6 +94,13 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/BadgeSecondaryDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/BadgeSecondaryDemo.vue"],
     },
+    "BarChartCustomTooltip": {
+      name: "BarChartCustomTooltip",
+      type: "components:example",
+      registryDependencies: ["chart-bar"],
+      component: () => import("../src/lib/registry/default/example/BarChartCustomTooltip.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/BarChartCustomTooltip.vue"],
+    },
     "BarChartDemo": {
       name: "BarChartDemo",
       type: "components:example",
@@ -87,6 +108,20 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/BarChartDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/BarChartDemo.vue"],
     },
+    "BarChartRounded": {
+      name: "BarChartRounded",
+      type: "components:example",
+      registryDependencies: ["chart-bar"],
+      component: () => import("../src/lib/registry/default/example/BarChartRounded.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/BarChartRounded.vue"],
+    },
+    "BarChartStacked": {
+      name: "BarChartStacked",
+      type: "components:example",
+      registryDependencies: ["chart-bar"],
+      component: () => import("../src/lib/registry/default/example/BarChartStacked.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/BarChartStacked.vue"],
+    },
     "BreadcrumbDemo": {
       name: "BreadcrumbDemo",
       type: "components:example",
@@ -402,6 +437,13 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/ContextMenuDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/ContextMenuDemo.vue"],
     },
+    "CustomChartTooltip": {
+      name: "CustomChartTooltip",
+      type: "components:example",
+      registryDependencies: ["card"],
+      component: () => import("../src/lib/registry/default/example/CustomChartTooltip.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/CustomChartTooltip.vue"],
+    },
     "DataTableColumnPinningDemo": {
       name: "DataTableColumnPinningDemo",
       type: "components:example",
@@ -486,6 +528,20 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/DialogScrollOverlayDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/DialogScrollOverlayDemo.vue"],
     },
+    "DonutChartColor": {
+      name: "DonutChartColor",
+      type: "components:example",
+      registryDependencies: ["chart-donut"],
+      component: () => import("../src/lib/registry/default/example/DonutChartColor.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/DonutChartColor.vue"],
+    },
+    "DonutChartCustomTooltip": {
+      name: "DonutChartCustomTooltip",
+      type: "components:example",
+      registryDependencies: ["chart-donut"],
+      component: () => import("../src/lib/registry/default/example/DonutChartCustomTooltip.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/DonutChartCustomTooltip.vue"],
+    },
     "DonutChartDemo": {
       name: "DonutChartDemo",
       type: "components:example",
@@ -493,6 +549,13 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/DonutChartDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/DonutChartDemo.vue"],
     },
+    "DonutChartPie": {
+      name: "DonutChartPie",
+      type: "components:example",
+      registryDependencies: ["chart-donut"],
+      component: () => import("../src/lib/registry/default/example/DonutChartPie.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/DonutChartPie.vue"],
+    },
     "DrawerDemo": {
       name: "DrawerDemo",
       type: "components:example",
@@ -598,6 +661,13 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/LabelDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/LabelDemo.vue"],
     },
+    "LineChartCustomTooltip": {
+      name: "LineChartCustomTooltip",
+      type: "components:example",
+      registryDependencies: ["chart-line"],
+      component: () => import("../src/lib/registry/default/example/LineChartCustomTooltip.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/LineChartCustomTooltip.vue"],
+    },
     "LineChartDemo": {
       name: "LineChartDemo",
       type: "components:example",
@@ -605,6 +675,13 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/LineChartDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/LineChartDemo.vue"],
     },
+    "LineChartSparkline": {
+      name: "LineChartSparkline",
+      type: "components:example",
+      registryDependencies: ["chart-line"],
+      component: () => import("../src/lib/registry/default/example/LineChartSparkline.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/LineChartSparkline.vue"],
+    },
     "MenubarDemo": {
       name: "MenubarDemo",
       type: "components:example",
@@ -1299,6 +1376,13 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/AlertDialogDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/AlertDialogDemo.vue"],
     },
+    "AreaChartCustomTooltip": {
+      name: "AreaChartCustomTooltip",
+      type: "components:example",
+      registryDependencies: ["chart-area"],
+      component: () => import("../src/lib/registry/new-york/example/AreaChartCustomTooltip.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/AreaChartCustomTooltip.vue"],
+    },
     "AreaChartDemo": {
       name: "AreaChartDemo",
       type: "components:example",
@@ -1306,6 +1390,13 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/AreaChartDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/AreaChartDemo.vue"],
     },
+    "AreaChartSparkline": {
+      name: "AreaChartSparkline",
+      type: "components:example",
+      registryDependencies: ["chart-area"],
+      component: () => import("../src/lib/registry/new-york/example/AreaChartSparkline.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/AreaChartSparkline.vue"],
+    },
     "AspectRatioDemo": {
       name: "AspectRatioDemo",
       type: "components:example",
@@ -1348,6 +1439,13 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/BadgeSecondaryDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/BadgeSecondaryDemo.vue"],
     },
+    "BarChartCustomTooltip": {
+      name: "BarChartCustomTooltip",
+      type: "components:example",
+      registryDependencies: ["chart-bar"],
+      component: () => import("../src/lib/registry/new-york/example/BarChartCustomTooltip.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/BarChartCustomTooltip.vue"],
+    },
     "BarChartDemo": {
       name: "BarChartDemo",
       type: "components:example",
@@ -1355,6 +1453,20 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/BarChartDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/BarChartDemo.vue"],
     },
+    "BarChartRounded": {
+      name: "BarChartRounded",
+      type: "components:example",
+      registryDependencies: ["chart-bar"],
+      component: () => import("../src/lib/registry/new-york/example/BarChartRounded.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/BarChartRounded.vue"],
+    },
+    "BarChartStacked": {
+      name: "BarChartStacked",
+      type: "components:example",
+      registryDependencies: ["chart-bar"],
+      component: () => import("../src/lib/registry/new-york/example/BarChartStacked.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/BarChartStacked.vue"],
+    },
     "BreadcrumbDemo": {
       name: "BreadcrumbDemo",
       type: "components:example",
@@ -1670,6 +1782,13 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/ContextMenuDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/ContextMenuDemo.vue"],
     },
+    "CustomChartTooltip": {
+      name: "CustomChartTooltip",
+      type: "components:example",
+      registryDependencies: ["card"],
+      component: () => import("../src/lib/registry/new-york/example/CustomChartTooltip.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/CustomChartTooltip.vue"],
+    },
     "DataTableColumnPinningDemo": {
       name: "DataTableColumnPinningDemo",
       type: "components:example",
@@ -1754,6 +1873,20 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/DialogScrollOverlayDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/DialogScrollOverlayDemo.vue"],
     },
+    "DonutChartColor": {
+      name: "DonutChartColor",
+      type: "components:example",
+      registryDependencies: ["chart-donut"],
+      component: () => import("../src/lib/registry/new-york/example/DonutChartColor.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/DonutChartColor.vue"],
+    },
+    "DonutChartCustomTooltip": {
+      name: "DonutChartCustomTooltip",
+      type: "components:example",
+      registryDependencies: ["chart-donut"],
+      component: () => import("../src/lib/registry/new-york/example/DonutChartCustomTooltip.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/DonutChartCustomTooltip.vue"],
+    },
     "DonutChartDemo": {
       name: "DonutChartDemo",
       type: "components:example",
@@ -1761,6 +1894,13 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/DonutChartDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/DonutChartDemo.vue"],
     },
+    "DonutChartPie": {
+      name: "DonutChartPie",
+      type: "components:example",
+      registryDependencies: ["chart-donut"],
+      component: () => import("../src/lib/registry/new-york/example/DonutChartPie.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/DonutChartPie.vue"],
+    },
     "DrawerDemo": {
       name: "DrawerDemo",
       type: "components:example",
@@ -1866,6 +2006,13 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/LabelDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/LabelDemo.vue"],
     },
+    "LineChartCustomTooltip": {
+      name: "LineChartCustomTooltip",
+      type: "components:example",
+      registryDependencies: ["chart-line"],
+      component: () => import("../src/lib/registry/new-york/example/LineChartCustomTooltip.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/LineChartCustomTooltip.vue"],
+    },
     "LineChartDemo": {
       name: "LineChartDemo",
       type: "components:example",
@@ -1873,6 +2020,13 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/LineChartDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/LineChartDemo.vue"],
     },
+    "LineChartSparkline": {
+      name: "LineChartSparkline",
+      type: "components:example",
+      registryDependencies: ["chart-line"],
+      component: () => import("../src/lib/registry/new-york/example/LineChartSparkline.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/LineChartSparkline.vue"],
+    },
     "MenubarDemo": {
       name: "MenubarDemo",
       type: "components:example",
diff --git a/apps/www/src/public/registry/styles/default/chart-bar.json b/apps/www/src/public/registry/styles/default/chart-bar.json
index aeb05dd6..e3905d42 100644
--- a/apps/www/src/public/registry/styles/default/chart-bar.json
+++ b/apps/www/src/public/registry/styles/default/chart-bar.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "name": "BarChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface, Spacing } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { type Component, computed, ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport { type BaseChartProps, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" :custom-tooltip=\"customTooltip\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface, Spacing } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { type Component, computed, ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport { type BaseChartProps, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/chart-donut.json b/apps/www/src/public/registry/styles/default/chart-donut.json
index 5dc40805..bf3ecd0f 100644
--- a/apps/www/src/public/registry/styles/default/chart-donut.json
+++ b/apps/www/src/public/registry/styles/default/chart-donut.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "name": "DonutChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { Donut } from '@unovis/ts'\nimport { type DefineComponent, computed, ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport { type BaseChartProps, ChartSingleTooltip, defaultColors } from '@/lib/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: DefineComponent\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"valueFormatter(totalValue)\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { Donut } from '@unovis/ts'\nimport { type Component, computed, ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport { type BaseChartProps, ChartSingleTooltip, defaultColors } from '@/lib/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/chart-bar.json b/apps/www/src/public/registry/styles/new-york/chart-bar.json
index a030e379..8a33d773 100644
--- a/apps/www/src/public/registry/styles/new-york/chart-bar.json
+++ b/apps/www/src/public/registry/styles/new-york/chart-bar.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "name": "BarChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface, Spacing } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { type Component, computed, ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport { type BaseChartProps, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" :custom-tooltip=\"customTooltip\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface, Spacing } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { type Component, computed, ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport { type BaseChartProps, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/chart-donut.json b/apps/www/src/public/registry/styles/new-york/chart-donut.json
index 9ee023c8..5482628d 100644
--- a/apps/www/src/public/registry/styles/new-york/chart-donut.json
+++ b/apps/www/src/public/registry/styles/new-york/chart-donut.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "name": "DonutChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { Donut } from '@unovis/ts'\nimport { type DefineComponent, computed, ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport { type BaseChartProps, ChartSingleTooltip, defaultColors } from '@/lib/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: DefineComponent\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"valueFormatter(totalValue)\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { Donut } from '@unovis/ts'\nimport { type Component, computed, ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport { type BaseChartProps, ChartSingleTooltip, defaultColors } from '@/lib/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",