diff --git a/apps/www/.vitepress/theme/style.css b/apps/www/.vitepress/theme/style.css
index d8386c9f..71dad42e 100644
--- a/apps/www/.vitepress/theme/style.css
+++ b/apps/www/.vitepress/theme/style.css
@@ -28,6 +28,7 @@
 		--ring: 240 5% 64.9%;
 		--radius: 0.5rem;
 
+		--vis-secondary-color: 160 81% 40%;
 		--vis-font-family: inherit !important;
 		--vis-area-stroke-width: 2px !important;
 		--vis-donut-central-label-text-color: hsl(var(--muted-foreground)) !important;
diff --git a/apps/www/src/content/docs/charts/area.md b/apps/www/src/content/docs/charts/area.md
index ac22285c..abbaf504 100644
--- a/apps/www/src/content/docs/charts/area.md
+++ b/apps/www/src/content/docs/charts/area.md
@@ -4,8 +4,7 @@ description: Displays a callout for user attention.
 label: Alpha
 ---
 
-
-<ComponentPreview name="AreaChartDemo"  /> 
+<ComponentPreview name="AreaChartDemo"  />
 
 ## Installation
 
@@ -13,7 +12,6 @@ label: Alpha
   Only works with Vue >3.3
 </Callout>
 
-
 <Steps>
 
 ### Run the following command
@@ -26,10 +24,11 @@ npx shadcn-vue@latest add chart-area
 
 Add the following tooltip styling to your `tailwind.css` file:
 
-```css 
+```css
 @layer base {
   :root {
     /* ... */
+    --vis-secondary-color: 160 81% 40%;
     --vis-tooltip-background-color: none !important;
     --vis-tooltip-border-color: none !important;
     --vis-tooltip-text-color: none !important;
@@ -38,7 +37,5 @@ Add the following tooltip styling to your `tailwind.css` file:
     --vis-tooltip-padding: none !important;
   }
 ```
-  
+
 </Steps>
-
-
diff --git a/apps/www/src/content/docs/charts/bar.md b/apps/www/src/content/docs/charts/bar.md
index 5c260a3e..095916e8 100644
--- a/apps/www/src/content/docs/charts/bar.md
+++ b/apps/www/src/content/docs/charts/bar.md
@@ -4,8 +4,7 @@ description: Displays a callout for user attention.
 label: Alpha
 ---
 
-
-<ComponentPreview name="BarChartDemo"  /> 
+<ComponentPreview name="BarChartDemo"  />
 
 ## Installation
 
@@ -25,10 +24,11 @@ npx shadcn-vue@latest add chart-bar
 
 Add the following tooltip styling to your `tailwind.css` file:
 
-```css 
+```css
 @layer base {
   :root {
     /* ... */
+    --vis-secondary-color: 160 81% 40%;
     --vis-tooltip-background-color: none !important;
     --vis-tooltip-border-color: none !important;
     --vis-tooltip-text-color: none !important;
@@ -37,7 +37,5 @@ Add the following tooltip styling to your `tailwind.css` file:
     --vis-tooltip-padding: none !important;
   }
 ```
-  
+
 </Steps>
-
-
diff --git a/apps/www/src/content/docs/charts/donut.md b/apps/www/src/content/docs/charts/donut.md
index 204b8e98..c8bb4b08 100644
--- a/apps/www/src/content/docs/charts/donut.md
+++ b/apps/www/src/content/docs/charts/donut.md
@@ -4,8 +4,7 @@ description: Displays a callout for user attention.
 label: Alpha
 ---
 
-
-<ComponentPreview name="DonutChartDemo"  /> 
+<ComponentPreview name="DonutChartDemo"  />
 
 ## Installation
 
@@ -13,7 +12,6 @@ label: Alpha
 Only works with Vue >3.3
 </Callout>
 
-
 <Steps>
 
 ### Run the following command
@@ -26,10 +24,11 @@ npx shadcn-vue@latest add chart-donut
 
 Add the following tooltip styling to your `tailwind.css` file:
 
-```css 
+```css
 @layer base {
   :root {
     /* ... */
+    --vis-secondary-color: 160 81% 40%;
     --vis-tooltip-background-color: none !important;
     --vis-tooltip-border-color: none !important;
     --vis-tooltip-text-color: none !important;
@@ -38,7 +37,5 @@ Add the following tooltip styling to your `tailwind.css` file:
     --vis-tooltip-padding: none !important;
   }
 ```
-  
+
 </Steps>
-
-
diff --git a/apps/www/src/content/docs/charts/line.md b/apps/www/src/content/docs/charts/line.md
index a415433d..e0768147 100644
--- a/apps/www/src/content/docs/charts/line.md
+++ b/apps/www/src/content/docs/charts/line.md
@@ -4,8 +4,7 @@ description: Displays a callout for user attention.
 label: Alpha
 ---
 
-
-<ComponentPreview name="LineChartDemo"  /> 
+<ComponentPreview name="LineChartDemo"  />
 
 ## Installation
 
@@ -25,10 +24,11 @@ npx shadcn-vue@latest add chart-line
 
 Add the following tooltip styling to your `tailwind.css` file:
 
-```css 
+```css
 @layer base {
   :root {
     /* ... */
+    --vis-secondary-color: 160 81% 40%;
     --vis-tooltip-background-color: none !important;
     --vis-tooltip-border-color: none !important;
     --vis-tooltip-text-color: none !important;
@@ -37,7 +37,5 @@ Add the following tooltip styling to your `tailwind.css` file:
     --vis-tooltip-padding: none !important;
   }
 ```
-  
+
 </Steps>
-
-
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 9b975ef9..3db304ba 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
@@ -77,6 +77,10 @@ const props = withDefaults(defineProps<{
   showGradiant: true,
 })
 
+const emits = defineEmits<{
+  legendItemClick: [d: BulletLegendItemInterface, i: number]
+}>()
+
 type KeyOfT = Extract<keyof T, string>
 type Data = typeof props.data[number]
 
@@ -92,7 +96,7 @@ const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((categ
 const isMounted = useMounted()
 
 function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
-  // do something when clicked on legend
+  emits('legendItemClick', d, i)
 }
 </script>
 
@@ -129,7 +133,9 @@ function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
           }"
           :opacity="legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1"
         />
+      </template>
 
+      <template v-for="(category, i) in categories" :key="category">
         <VisLine
           :x="(d: Data, i: number) => i"
           :y="(d: Data) => d[category]"
diff --git a/apps/www/src/lib/registry/default/ui/chart/ChartCrosshair.vue b/apps/www/src/lib/registry/default/ui/chart/ChartCrosshair.vue
index 82ec3fdd..a1aa6630 100644
--- a/apps/www/src/lib/registry/default/ui/chart/ChartCrosshair.vue
+++ b/apps/www/src/lib/registry/default/ui/chart/ChartCrosshair.vue
@@ -3,7 +3,7 @@ import { VisCrosshair, VisTooltip } from '@unovis/vue'
 import type { BulletLegendItemInterface } from '@unovis/ts'
 import { omit } from '@unovis/ts'
 import { createApp, watch } from 'vue'
-import { ChartTooltip } from '@/lib/registry/default/ui/chart'
+import { ChartTooltip } from '@/lib/registry/new-york/ui/chart'
 
 const props = withDefaults(defineProps<{
   colors: string[]
@@ -30,9 +30,13 @@ function template(d: any) {
     return componentDiv.innerHTML
   }
 }
+
+function color(d: unknown, i: number) {
+  return props.colors[i] ?? 'transparent'
+}
 </script>
 
 <template>
   <VisTooltip :horizontal-shift="20" :vertical-shift="20" />
-  <VisCrosshair :color="colors" :template="template" />
+  <VisCrosshair :template="template" :color="color" />
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/chart/ChartLegend.vue b/apps/www/src/lib/registry/default/ui/chart/ChartLegend.vue
index df3fd9ff..9a959b56 100644
--- a/apps/www/src/lib/registry/default/ui/chart/ChartLegend.vue
+++ b/apps/www/src/lib/registry/default/ui/chart/ChartLegend.vue
@@ -10,7 +10,7 @@ const props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>()
 })
 
 const emits = defineEmits<{
-  legendItemClick: [d: BulletLegendItemInterface, i: number]
+  'legendItemClick': [d: BulletLegendItemInterface, i: number]
   'update:items': [payload: BulletLegendItemInterface[]]
 }>()
 
@@ -21,7 +21,6 @@ onMounted(() => {
   nextTick(() => {
     const elements = elRef.value?.querySelectorAll(selector)
     const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')
-    console.log(elements, classes)
     elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))
   })
 })
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 e336de57..49228ca1 100644
--- a/apps/www/src/lib/registry/default/ui/chart/index.ts
+++ b/apps/www/src/lib/registry/default/ui/chart/index.ts
@@ -3,8 +3,6 @@ export { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'
 export { default as ChartLegend } from './ChartLegend.vue'
 export { default as ChartCrosshair } from './ChartCrosshair.vue'
 
-const SECONDARY_COLOR = '153 48% 49%'
-
 export function defaultColors(count: number = 3) {
   const quotient = Math.floor(count / 2)
   const remainder = count % 2
@@ -13,6 +11,6 @@ export function defaultColors(count: number = 3) {
   const secondaryCount = quotient
   return [
     ...Array.from(Array(primaryCount).keys()).map(i => `hsl(var(--primary) / ${1 - (1 / primaryCount) * i})`),
-    ...Array.from(Array(secondaryCount).keys()).map(i => `hsl(${SECONDARY_COLOR} / ${1 - (1 / secondaryCount) * i})`),
+    ...Array.from(Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),
   ]
 }
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 4510170a..4b67dc7f 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
@@ -77,6 +77,10 @@ const props = withDefaults(defineProps<{
   showGradiant: true,
 })
 
+const emits = defineEmits<{
+  legendItemClick: [d: BulletLegendItemInterface, i: number]
+}>()
+
 type KeyOfT = Extract<keyof T, string>
 type Data = typeof props.data[number]
 
@@ -92,7 +96,7 @@ const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((categ
 const isMounted = useMounted()
 
 function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
-  // do something when clicked on legend
+  emits('legendItemClick', d, i)
 }
 </script>
 
@@ -129,7 +133,9 @@ function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
           }"
           :opacity="legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1"
         />
+      </template>
 
+      <template v-for="(category, i) in categories" :key="category">
         <VisLine
           :x="(d: Data, i: number) => i"
           :y="(d: Data) => d[category]"
diff --git a/apps/www/src/lib/registry/new-york/ui/chart/ChartCrosshair.vue b/apps/www/src/lib/registry/new-york/ui/chart/ChartCrosshair.vue
index aa1c2668..a1aa6630 100644
--- a/apps/www/src/lib/registry/new-york/ui/chart/ChartCrosshair.vue
+++ b/apps/www/src/lib/registry/new-york/ui/chart/ChartCrosshair.vue
@@ -30,9 +30,13 @@ function template(d: any) {
     return componentDiv.innerHTML
   }
 }
+
+function color(d: unknown, i: number) {
+  return props.colors[i] ?? 'transparent'
+}
 </script>
 
 <template>
   <VisTooltip :horizontal-shift="20" :vertical-shift="20" />
-  <VisCrosshair :template="template" />
+  <VisCrosshair :template="template" :color="color" />
 </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 e336de57..49228ca1 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
@@ -3,8 +3,6 @@ export { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'
 export { default as ChartLegend } from './ChartLegend.vue'
 export { default as ChartCrosshair } from './ChartCrosshair.vue'
 
-const SECONDARY_COLOR = '153 48% 49%'
-
 export function defaultColors(count: number = 3) {
   const quotient = Math.floor(count / 2)
   const remainder = count % 2
@@ -13,6 +11,6 @@ export function defaultColors(count: number = 3) {
   const secondaryCount = quotient
   return [
     ...Array.from(Array(primaryCount).keys()).map(i => `hsl(var(--primary) / ${1 - (1 / primaryCount) * i})`),
-    ...Array.from(Array(secondaryCount).keys()).map(i => `hsl(${SECONDARY_COLOR} / ${1 - (1 / secondaryCount) * i})`),
+    ...Array.from(Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),
   ]
 }