diff --git a/src/components/ButtonDialog.vue b/src/components/ButtonDialog.vue
index 5ecb4a3..5ada4fb 100644
--- a/src/components/ButtonDialog.vue
+++ b/src/components/ButtonDialog.vue
@@ -14,7 +14,6 @@ import {
   Card,
   CardContent,
   CardDescription,
-  CardFooter,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
diff --git a/src/components/ui/chart-bar/BarChart.vue b/src/components/ui/chart-bar/BarChart.vue
index bfaa601..27725d1 100644
--- a/src/components/ui/chart-bar/BarChart.vue
+++ b/src/components/ui/chart-bar/BarChart.vue
@@ -1,86 +1,122 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
-import type { BulletLegendItemInterface } from '@unovis/ts'
-import { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'
-import { Axis, GroupedBar, StackedBar } from '@unovis/ts'
-import { type Component, computed, ref } from 'vue'
-import { useMounted } from '@vueuse/core'
-import type { BaseChartProps } from '.'
-import { ChartCrosshair, ChartLegend, defaultColors } from '@/components/ui/chart'
-import { cn } from '@/lib/utils'
+import type { BulletLegendItemInterface } from "@unovis/ts";
+import {
+  VisAxis,
+  VisGroupedBar,
+  VisStackedBar,
+  VisXYContainer,
+} from "@unovis/vue";
+import { Axis, GroupedBar, StackedBar } from "@unovis/ts";
+import { type Component, computed, ref } from "vue";
+import { useMounted } from "@vueuse/core";
+import type { BaseChartProps } from ".";
+import {
+  ChartCrosshair,
+  ChartLegend,
+  defaultColors,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
 
-const props = withDefaults(defineProps<BaseChartProps<T> & {
-  /**
-   * Render custom tooltip component.
-   */
-  customTooltip?: Component
-  /**
-   * Change the type of the chart
-   * @default "grouped"
-   */
-  type?: 'stacked' | 'grouped'
-  /**
-   * Rounded bar corners
-   * @default 0
-   */
-  roundedCorners?: number
-}>(), {
-  type: 'grouped',
-  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
-  filterOpacity: 0.2,
-  roundedCorners: 0,
-  showXAxis: true,
-  showYAxis: true,
-  showTooltip: true,
-  showLegend: true,
-  showGridLine: true,
-})
+const props = withDefaults(
+  defineProps<
+    BaseChartProps<T> & {
+      /**
+       * Render custom tooltip component.
+       */
+      customTooltip?: Component;
+      /**
+       * Change the type of the chart
+       * @default "grouped"
+       */
+      type?: "stacked" | "grouped";
+      /**
+       * Rounded bar corners
+       * @default 0
+       */
+      roundedCorners?: number;
+    }
+  >(),
+  {
+    type: "grouped",
+    margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+    filterOpacity: 0.2,
+    roundedCorners: 0,
+    showXAxis: true,
+    showYAxis: true,
+    showTooltip: true,
+    showLegend: true,
+    showGridLine: true,
+  },
+);
 const emits = defineEmits<{
-  legendItemClick: [d: BulletLegendItemInterface, i: number]
-}>()
+  legendItemClick: [d: BulletLegendItemInterface, i: number];
+}>();
 
-type KeyOfT = Extract<keyof T, string>
-type Data = typeof props.data[number]
+type KeyOfT = Extract<keyof T, string>;
+type Data = (typeof props.data)[number];
 
-const index = computed(() => props.index as KeyOfT)
-const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
-const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
-  name: category,
-  color: colors.value[i],
-  inactive: false,
-})))
+const index = computed(() => props.index as KeyOfT);
+const colors = computed(() =>
+  props.colors?.length ? props.colors : defaultColors(props.categories.length),
+);
+const legendItems = ref<BulletLegendItemInterface[]>(
+  props.categories.map((category, i) => ({
+    name: category,
+    color: colors.value[i],
+    inactive: false,
+  })),
+);
 
-const isMounted = useMounted()
+const isMounted = useMounted();
 
 function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
-  emits('legendItemClick', d, i)
+  emits("legendItemClick", d, i);
 }
 
-const VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)
-const selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)
+const VisBarComponent = computed(() =>
+  props.type === "grouped" ? VisGroupedBar : VisStackedBar,
+);
+const selectorsBar = computed(() =>
+  props.type === "grouped"
+    ? GroupedBar.selectors.bar
+    : StackedBar.selectors.bar,
+);
 </script>
 
 <template>
-  <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" />
+  <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
       :data="data"
       :style="{ height: isMounted ? '100%' : 'auto' }"
       :margin="margin"
     >
-      <ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :custom-tooltip="customTooltip" :index="index" />
+      <ChartCrosshair
+        v-if="showTooltip"
+        :colors="colors"
+        :items="legendItems"
+        :custom-tooltip="customTooltip"
+        :index="index"
+      />
 
       <VisBarComponent
-        :x="(d: Data, i: number) => i"
-        :y="categories.map(category => (d: Data) => d[category]) "
+        :x="(_: Data, i: number) => i"
+        :y="categories.map((category) => (d: Data) => d[category])"
         :color="colors"
         :rounded-corners="roundedCorners"
         :bar-padding="0.05"
         :attributes="{
           [selectorsBar]: {
-            opacity: (d: Data, i:number) => {
-              const pos = i % categories.length
-              return legendItems[pos]?.inactive ? filterOpacity : 1
+            opacity: (_: Data, i: number) => {
+              const pos = i % categories.length;
+              return legendItems[pos]?.inactive ? filterOpacity : 1;
             },
           },
         }"
diff --git a/src/components/ui/chart-donut/DonutChart.vue b/src/components/ui/chart-donut/DonutChart.vue
index be22422..115e3fc 100644
--- a/src/components/ui/chart-donut/DonutChart.vue
+++ b/src/components/ui/chart-donut/DonutChart.vue
@@ -1,67 +1,95 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
-import { VisDonut, VisSingleContainer } from '@unovis/vue'
-import { Donut } from '@unovis/ts'
-import { type Component, computed, ref } from 'vue'
-import { useMounted } from '@vueuse/core'
-import type { BaseChartProps } from '.'
-import { ChartSingleTooltip, defaultColors } from '@/components/ui/chart'
-import { cn } from '@/lib/utils'
+import { VisDonut, VisSingleContainer } from "@unovis/vue";
+import { Donut } from "@unovis/ts";
+import { type Component, computed, ref } from "vue";
+import { useMounted } from "@vueuse/core";
+import type { BaseChartProps } from ".";
+import { ChartSingleTooltip, defaultColors } from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
 
-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 type of the chart
-   * @default "donut"
-   */
-  type?: 'donut' | 'pie'
-  /**
-   * Function to sort the segment
-   */
-  sortFunction?: (a: any, b: any) => number | undefined
-  /**
-   * Controls the formatting for the label.
-   */
-  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string
-  /**
-   * Render custom tooltip component.
-   */
-  customTooltip?: Component
-}>(), {
-  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
-  sortFunction: () => undefined,
-  valueFormatter: (tick: number) => `${tick}`,
-  type: 'donut',
-  filterOpacity: 0.2,
-  showTooltip: true,
-  showLegend: true,
-})
+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 type of the chart
+       * @default "donut"
+       */
+      type?: "donut" | "pie";
+      /**
+       * Function to sort the segment
+       */
+      sortFunction?: (a: any, b: any) => number | undefined;
+      /**
+       * Controls the formatting for the label.
+       */
+      valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string;
+      /**
+       * Render custom tooltip component.
+       */
+      customTooltip?: Component;
+    }
+  >(),
+  {
+    margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+    sortFunction: () => undefined,
+    valueFormatter: (tick: number) => `${tick}`,
+    type: "donut",
+    filterOpacity: 0.2,
+    showTooltip: true,
+    showLegend: true,
+  },
+);
 
-type KeyOfT = Extract<keyof T, string>
-type Data = typeof props.data[number]
+type KeyOfT = Extract<keyof T, string>;
+type Data = (typeof props.data)[number];
 
-const category = computed(() => props.category as KeyOfT)
-const index = computed(() => props.index as KeyOfT)
+const category = computed(() => props.category as KeyOfT);
+const index = computed(() => props.index as KeyOfT);
 
-const isMounted = useMounted()
-const activeSegmentKey = ref<string>()
-const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))
-const legendItems = computed(() => props.data.map((item, i) => ({
-  name: item[props.index],
-  color: colors.value[i],
-  inactive: false,
-})))
+const isMounted = useMounted();
+const activeSegmentKey = ref<string>();
+const colors = computed(() =>
+  props.colors?.length
+    ? props.colors
+    : defaultColors(
+        props.data.filter((d) => d[props.category]).filter(Boolean).length,
+      ),
+);
+const legendItems = computed(() =>
+  props.data.map((item, i) => ({
+    name: item[props.index],
+    color: colors.value[i],
+    inactive: false,
+  })),
+);
 
-const totalValue = computed(() => props.data.reduce((prev, curr) => {
-  return prev + curr[props.category]
-}, 0))
+const totalValue = computed(() =>
+  props.data.reduce((prev, curr) => {
+    return prev + curr[props.category];
+  }, 0),
+);
 </script>
 
 <template>
   <div :class="cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')">
-    <VisSingleContainer :style="{ height: isMounted ? '100%' : 'auto' }" :margin="{ left: 20, right: 20 }" :data="data">
+    <VisSingleContainer
+      :style="{ height: isMounted ? '100%' : 'auto' }"
+      :margin="{ left: 20, right: 20 }"
+      :data="data"
+    >
       <ChartSingleTooltip
         :selector="Donut.selectors.segment"
         :index="category"
@@ -79,15 +107,21 @@ const totalValue = computed(() => props.data.reduce((prev, curr) => {
         :central-label="type === 'donut' ? valueFormatter(totalValue) : ''"
         :events="{
           [Donut.selectors.segment]: {
-            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {
+            click: (
+              d: Data,
+              _: PointerEvent,
+              i: number,
+              elements: HTMLElement[],
+            ) => {
               if (d?.data?.[index] === activeSegmentKey) {
-                activeSegmentKey = undefined
-                elements.forEach(el => el.style.opacity = '1')
-              }
-              else {
-                activeSegmentKey = d?.data?.[index]
-                elements.forEach(el => el.style.opacity = `${filterOpacity}`)
-                elements[i].style.opacity = '1'
+                activeSegmentKey = undefined;
+                elements.forEach((el) => (el.style.opacity = '1'));
+              } else {
+                activeSegmentKey = d?.data?.[index];
+                elements.forEach(
+                  (el) => (el.style.opacity = `${filterOpacity}`),
+                );
+                elements[i].style.opacity = '1';
               }
             },
           },
diff --git a/src/components/ui/chart/ChartCrosshair.vue b/src/components/ui/chart/ChartCrosshair.vue
index 4c47149..b624759 100644
--- a/src/components/ui/chart/ChartCrosshair.vue
+++ b/src/components/ui/chart/ChartCrosshair.vue
@@ -1,40 +1,47 @@
 <script setup lang="ts">
-import { VisCrosshair, VisTooltip } from '@unovis/vue'
-import type { BulletLegendItemInterface } from '@unovis/ts'
-import { omit } from '@unovis/ts'
-import { type Component, createApp } from 'vue'
-import { ChartTooltip } from '.'
+import { VisCrosshair, VisTooltip } from "@unovis/vue";
+import type { BulletLegendItemInterface } from "@unovis/ts";
+import { omit } from "@unovis/ts";
+import { type Component, createApp } from "vue";
+import { ChartTooltip } from ".";
 
-const props = withDefaults(defineProps<{
-  colors: string[]
-  index: string
-  items: BulletLegendItemInterface[]
-  customTooltip?: Component
-}>(), {
-  colors: () => [],
-})
+const props = withDefaults(
+  defineProps<{
+    colors: string[];
+    index: string;
+    items: BulletLegendItemInterface[];
+    customTooltip?: Component;
+  }>(),
+  {
+    colors: () => [],
+  },
+);
 
 // Use weakmap to store reference to each datapoint for Tooltip
-const wm = new WeakMap()
+const wm = new WeakMap();
 function template(d: any) {
   if (wm.has(d)) {
-    return wm.get(d)
-  }
-  else {
-    const componentDiv = document.createElement('div')
-    const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {
-      const legendReference = props.items.find(i => i.name === key)
-      return { ...legendReference, value }
-    })
-    const TooltipComponent = props.customTooltip ?? ChartTooltip
-    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)
-    wm.set(d, componentDiv.innerHTML)
-    return componentDiv.innerHTML
+    return wm.get(d);
+  } else {
+    const componentDiv = document.createElement("div");
+    const omittedData = Object.entries(omit(d, [props.index])).map(
+      ([key, value]) => {
+        const legendReference = props.items.find((i) => i.name === key);
+        return { ...legendReference, value };
+      },
+    );
+    const TooltipComponent = props.customTooltip ?? ChartTooltip;
+    createApp(TooltipComponent, {
+      title: d[props.index].toString(),
+      data: omittedData,
+    }).mount(componentDiv);
+    wm.set(d, componentDiv.innerHTML);
+    return componentDiv.innerHTML;
   }
 }
 
-function color(d: unknown, i: number) {
-  return props.colors[i] ?? 'transparent'
+function color(_: unknown, i: number) {
+  return props.colors[i] ?? "transparent";
 }
 </script>
 
diff --git a/src/components/ui/chart/ChartLegend.vue b/src/components/ui/chart/ChartLegend.vue
index e77b644..0d4769a 100644
--- a/src/components/ui/chart/ChartLegend.vue
+++ b/src/components/ui/chart/ChartLegend.vue
@@ -1,50 +1,64 @@
 <script setup lang="ts">
-import { VisBulletLegend } from '@unovis/vue'
-import type { BulletLegendItemInterface } from '@unovis/ts'
-import { BulletLegend } from '@unovis/ts'
-import { nextTick, onMounted, ref } from 'vue'
-import { buttonVariants } from '@/components/ui/button'
+import { VisBulletLegend } from "@unovis/vue";
+import type { BulletLegendItemInterface } from "@unovis/ts";
+import { BulletLegend } from "@unovis/ts";
+import { nextTick, onMounted, ref } from "vue";
+import { buttonVariants } from "@/components/ui/button";
 
-const props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {
-  items: () => [],
-})
+const props = withDefaults(
+  defineProps<{ items: BulletLegendItemInterface[] }>(),
+  {
+    items: () => [],
+  },
+);
 
 const emits = defineEmits<{
-  'legendItemClick': [d: BulletLegendItemInterface, i: number]
-  'update:items': [payload: BulletLegendItemInterface[]]
-}>()
+  legendItemClick: [d: BulletLegendItemInterface, i: number];
+  "update:items": [payload: BulletLegendItemInterface[]];
+}>();
 
-const elRef = ref<HTMLElement>()
+const elRef = ref<HTMLElement>();
 
 onMounted(() => {
-  const selector = `.${BulletLegend.selectors.item}`
+  const selector = `.${BulletLegend.selectors.item}`;
   nextTick(() => {
-    const elements = elRef.value?.querySelectorAll(selector)
-    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')
-    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))
-  })
-})
+    const elements = elRef.value?.querySelectorAll(selector);
+    const classes = buttonVariants({
+      variant: "ghost",
+      size: "smallIcon",
+    }).split(" ");
+    elements?.forEach((el) =>
+      el.classList.add(...classes, "!inline-flex", "!mr-2"),
+    );
+  });
+});
 
 function onLegendItemClick(d: BulletLegendItemInterface, i: number) {
-  emits('legendItemClick', d, i)
-  const isBulletActive = !props.items[i].inactive
-  const isFilterApplied = props.items.some(i => i.inactive)
+  emits("legendItemClick", d, i);
+  const isBulletActive = !props.items[i].inactive;
+  const isFilterApplied = props.items.some((i) => i.inactive);
   if (isFilterApplied && isBulletActive) {
     // reset filter
-    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))
-  }
-  else {
+    emits(
+      "update:items",
+      props.items.map((item) => ({ ...item, inactive: false })),
+    );
+  } else {
     // apply selection, set other item as inactive
-    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))
+    emits(
+      "update:items",
+      props.items.map((item) =>
+        item.name === d.name
+          ? { ...d, inactive: false }
+          : { ...item, inactive: true },
+      ),
+    );
   }
 }
 </script>
 
 <template>
   <div ref="elRef" class="w-max">
-    <VisBulletLegend
-      :items="items"
-      :on-legend-item-click="onLegendItemClick"
-    />
+    <VisBulletLegend :items="items" :on-legend-item-click="onLegendItemClick" />
   </div>
 </template>
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 87acea3..365058c 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,6 +1,5 @@
 import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-import { camelize, getCurrentInstance, toHandlerKey } from "vue";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));