From ea187c1930ae7d137c4cc64083936f194acfc18e Mon Sep 17 00:00:00 2001
From: moshiur01 <mr.moshiur314@gmail.com>
Date: Tue, 12 Nov 2024 11:52:32 +0600
Subject: [PATCH 1/4] Fixed: Remove defineprops macro imports from
 carouselIndicators component.

---
 src/components/Carousel/CarouselIndicators.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Carousel/CarouselIndicators.vue b/src/components/Carousel/CarouselIndicators.vue
index 68a8bee..798160f 100644
--- a/src/components/Carousel/CarouselIndicators.vue
+++ b/src/components/Carousel/CarouselIndicators.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { defineProps, type HtmlHTMLAttributes } from "vue";
+import { type HtmlHTMLAttributes } from "vue";
 import { cn } from "../../utils/cn";
 import { carouselTheme } from "./carouselTheme";
 import DotButton from "./DotButton.vue";

From cd56296103d21319d4b976d95654d0e2dfa3c797 Mon Sep 17 00:00:00 2001
From: moshiur01 <mr.moshiur314@gmail.com>
Date: Tue, 12 Nov 2024 19:45:51 +0600
Subject: [PATCH 2/4] Fixed: Remove defineprops macro imports from
 carouselIndicators component.

---
 src/components/Calender/CalendarGridBody.vue           | 1 -
 src/components/Calender/CalendarGridHead.vue           | 1 -
 src/components/Carousel/CarouselSlides.vue             | 1 -
 src/components/Popover/PopoverAction.vue               | 1 -
 src/components/RangeCalender/RangeCalendarGridBody.vue | 1 -
 src/components/RangeCalender/RangeCalendarGridHead.vue | 1 -
 src/components/Test/Child.vue                          | 2 +-
 src/components/Tooltip/TooltipAction.vue               | 1 -
 8 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/components/Calender/CalendarGridBody.vue b/src/components/Calender/CalendarGridBody.vue
index 7808dec..64bcc6d 100644
--- a/src/components/Calender/CalendarGridBody.vue
+++ b/src/components/Calender/CalendarGridBody.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { CalendarGridBody, type CalendarGridBodyProps } from "radix-vue";
-import { defineProps } from "vue";
 
 const props = defineProps<CalendarGridBodyProps>();
 </script>
diff --git a/src/components/Calender/CalendarGridHead.vue b/src/components/Calender/CalendarGridHead.vue
index b2d6a36..25fde4e 100644
--- a/src/components/Calender/CalendarGridHead.vue
+++ b/src/components/Calender/CalendarGridHead.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { CalendarGridHead, type CalendarGridHeadProps } from "radix-vue";
-import { defineProps } from "vue";
 
 const props = defineProps<CalendarGridHeadProps>();
 </script>
diff --git a/src/components/Carousel/CarouselSlides.vue b/src/components/Carousel/CarouselSlides.vue
index 50a24fc..3eaff81 100644
--- a/src/components/Carousel/CarouselSlides.vue
+++ b/src/components/Carousel/CarouselSlides.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { defineProps } from "vue";
 import { cn } from "../../utils/cn";
 import { carouselTheme } from "./carouselTheme";
 import type { ClassProps } from "./interface";
diff --git a/src/components/Popover/PopoverAction.vue b/src/components/Popover/PopoverAction.vue
index a8f9fec..a824de9 100644
--- a/src/components/Popover/PopoverAction.vue
+++ b/src/components/Popover/PopoverAction.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { PopoverTrigger, type PopoverTriggerProps } from "radix-vue";
-import { defineProps } from "vue";
 
 const props = defineProps<PopoverTriggerProps>();
 </script>
diff --git a/src/components/RangeCalender/RangeCalendarGridBody.vue b/src/components/RangeCalender/RangeCalendarGridBody.vue
index d0644bb..4e1cebe 100644
--- a/src/components/RangeCalender/RangeCalendarGridBody.vue
+++ b/src/components/RangeCalender/RangeCalendarGridBody.vue
@@ -3,7 +3,6 @@ import {
   RangeCalendarGridBody,
   type RangeCalendarGridBodyProps,
 } from "radix-vue";
-import { defineProps } from "vue";
 
 const props = defineProps<RangeCalendarGridBodyProps>();
 </script>
diff --git a/src/components/RangeCalender/RangeCalendarGridHead.vue b/src/components/RangeCalender/RangeCalendarGridHead.vue
index 2c4fba0..344c5b5 100644
--- a/src/components/RangeCalender/RangeCalendarGridHead.vue
+++ b/src/components/RangeCalender/RangeCalendarGridHead.vue
@@ -3,7 +3,6 @@ import {
   RangeCalendarGridHead,
   type RangeCalendarGridHeadProps,
 } from "radix-vue";
-import { defineProps } from "vue";
 
 const props = defineProps<RangeCalendarGridHeadProps>();
 </script>
diff --git a/src/components/Test/Child.vue b/src/components/Test/Child.vue
index a3891b8..b2f8032 100644
--- a/src/components/Test/Child.vue
+++ b/src/components/Test/Child.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup></script>
 
 <template>
-  <div></div>
+  <div>sfd</div>
 </template>
diff --git a/src/components/Tooltip/TooltipAction.vue b/src/components/Tooltip/TooltipAction.vue
index 816b15e..c6e1c6f 100644
--- a/src/components/Tooltip/TooltipAction.vue
+++ b/src/components/Tooltip/TooltipAction.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { TooltipTrigger, type TooltipTriggerProps } from "radix-vue";
-import { defineProps } from "vue";
 
 const props = defineProps<TooltipTriggerProps>();
 </script>

From e7de11443cd81c5651ee1dde2f468ece297630f2 Mon Sep 17 00:00:00 2001
From: moshiur01 <mr.moshiur314@gmail.com>
Date: Wed, 13 Nov 2024 17:05:43 +0600
Subject: [PATCH 3/4] Removed: Chart component.

---
 Routes/routes.ts                              |  31 -
 .../components/areaChart/DefaultAreaChart.vue | 190 -----
 .../areaChart/DoubleSeriesAreaChart.vue       | 229 ------
 .../components/areaChart/areaChartCode.ts     | 752 ------------------
 .../barChart/ChartWithDoubleData.vue          | 118 ---
 .../components/barChart/DefaultBarChart.vue   | 114 ---
 .../docs/components/barChart/barChartCode.ts  | 191 -----
 .../components/lineChart/DefaultLineChart.vue | 187 -----
 .../lineChart/DoubleLineLineChart.vue         | 224 ------
 .../components/lineChart/lineChartCode.ts     | 735 -----------------
 .../components/pieChart/DefaultPieChart.vue   |  78 --
 .../components/pieChart/DoughnutChart.vue     |  77 --
 .../pieChart/DoughnutChartTwoLevel.vue        |  83 --
 .../components/pieChart/PieChartWithColor.vue |  77 --
 .../docs/components/pieChart/pieChartCode.ts  | 326 --------
 content/docs/components/area-chart.md         |  22 -
 content/docs/components/bar-chart.md          |  22 -
 content/docs/components/line-chart.md         |  21 -
 content/docs/components/pie-chart.md          |  36 -
 src/components/Charts/chart.ts                |  32 -
 src/index.ts                                  |  19 -
 21 files changed, 3564 deletions(-)
 delete mode 100644 components/content/docs/components/areaChart/DefaultAreaChart.vue
 delete mode 100644 components/content/docs/components/areaChart/DoubleSeriesAreaChart.vue
 delete mode 100644 components/content/docs/components/areaChart/areaChartCode.ts
 delete mode 100644 components/content/docs/components/barChart/ChartWithDoubleData.vue
 delete mode 100644 components/content/docs/components/barChart/DefaultBarChart.vue
 delete mode 100644 components/content/docs/components/barChart/barChartCode.ts
 delete mode 100644 components/content/docs/components/lineChart/DefaultLineChart.vue
 delete mode 100644 components/content/docs/components/lineChart/DoubleLineLineChart.vue
 delete mode 100644 components/content/docs/components/lineChart/lineChartCode.ts
 delete mode 100644 components/content/docs/components/pieChart/DefaultPieChart.vue
 delete mode 100644 components/content/docs/components/pieChart/DoughnutChart.vue
 delete mode 100644 components/content/docs/components/pieChart/DoughnutChartTwoLevel.vue
 delete mode 100644 components/content/docs/components/pieChart/PieChartWithColor.vue
 delete mode 100644 components/content/docs/components/pieChart/pieChartCode.ts
 delete mode 100644 content/docs/components/area-chart.md
 delete mode 100644 content/docs/components/bar-chart.md
 delete mode 100644 content/docs/components/line-chart.md
 delete mode 100644 content/docs/components/pie-chart.md
 delete mode 100644 src/components/Charts/chart.ts

diff --git a/Routes/routes.ts b/Routes/routes.ts
index e38f218..1c0ab67 100644
--- a/Routes/routes.ts
+++ b/Routes/routes.ts
@@ -26,13 +26,6 @@ export const docsRoutes = ref<RouterPath[]>([
     tag: false,
     deprecate: false,
   },
-  {
-    id: generatedID.v4(),
-    name: "Area Chart",
-    href: "/docs/components/area-chart",
-    tag: false,
-    deprecate: false,
-  },
   {
     id: generatedID.v4(),
     name: "Avatar",
@@ -48,14 +41,6 @@ export const docsRoutes = ref<RouterPath[]>([
     tag: false,
     deprecate: false,
   },
-  {
-    id: generatedID.v4(),
-    name: "Bar Chart",
-
-    href: "/docs/components/bar-chart",
-    tag: false,
-    deprecate: false,
-  },
   {
     id: generatedID.v4(),
     name: "BreadCrumb",
@@ -148,14 +133,6 @@ export const docsRoutes = ref<RouterPath[]>([
     tag: false,
     deprecate: false,
   },
-  {
-    id: generatedID.v4(),
-    name: "Line Chart",
-
-    href: "/docs/components/line-chart",
-    tag: false,
-    deprecate: false,
-  },
   {
     id: generatedID.v4(),
     name: "Modal",
@@ -187,14 +164,6 @@ export const docsRoutes = ref<RouterPath[]>([
     tag: false,
     deprecate: false,
   },
-  {
-    id: generatedID.v4(),
-    name: "Pie Chart",
-
-    href: "/docs/components/pie-chart",
-    tag: false,
-    deprecate: false,
-  },
   {
     id: generatedID.v4(),
     name: "Popover",
diff --git a/components/content/docs/components/areaChart/DefaultAreaChart.vue b/components/content/docs/components/areaChart/DefaultAreaChart.vue
deleted file mode 100644
index 887c807..0000000
--- a/components/content/docs/components/areaChart/DefaultAreaChart.vue
+++ /dev/null
@@ -1,190 +0,0 @@
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" setup>
-import CodeHighlightWithPreview from "~/components/content/CodeHighlightWithPreview.vue";
-import {
-  CategoryScale,
-  ChartTooltip,
-  Filler,
-  KeepChart,
-  Legend,
-  Line,
-  LinearScale,
-  LineElement,
-  PointElement,
-  Title,
-} from "~/src";
-import { defaultAreaChartCode } from "./areaChartCode";
-
-KeepChart.register(
-  Title,
-  ChartTooltip,
-  Legend,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  PointElement,
-  Filler,
-);
-
-//hover style effect
-const hoverLine = reactive({
-  afterDatasetsDraw(KeepChart: {
-    ctx: any;
-    scales: { x: any; y: any };
-    tooltip: any;
-    chartArea: { top: any; bottom: any };
-  }) {
-    const {
-      ctx,
-      tooltip,
-      chartArea: { top, bottom },
-    } = KeepChart;
-
-    if (tooltip._active && tooltip._active.length) {
-      const activePoint = tooltip._active[0];
-      const xPosition = activePoint.element.x;
-
-      // vertical line visible when hover
-      ctx.save();
-      ctx.beginPath();
-      ctx.lineWidth = 0.5;
-      ctx.strokeStyle = "#afbaca";
-      ctx.moveTo(xPosition, top);
-      ctx.lineTo(xPosition, bottom);
-      ctx.stroke();
-      ctx.closePath();
-
-      //point is visible when hover
-      ctx.beginPath();
-      ctx.arc(activePoint.element.x, activePoint.element.y, 4, 0, Math.PI * 2);
-      ctx.fillStyle = "#1B4DFF";
-      ctx.fill();
-      ctx.closePath();
-    }
-  },
-});
-
-const chartData = reactive({
-  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
-  datasets: [
-    {
-      label: "Price",
-      data: [340, 300, 170, 190, 450, 400, 250, 320, 280],
-
-      //gradient bg color
-      backgroundColor: (context: { chart: { chartArea: any; ctx?: any } }) => {
-        const bgColorStart = "#1b4cff4d";
-        const bgColorEnd = "#1b4cff00";
-
-        if (!context.chart.chartArea) {
-          return;
-        }
-        const {
-          ctx,
-          chartArea: { top, bottom },
-        } = context.chart;
-        const gradientBg = ctx.createLinearGradient(0, top, 0, bottom);
-        gradientBg.addColorStop(0, bgColorStart);
-        gradientBg.addColorStop(1, bgColorEnd);
-        return gradientBg;
-      },
-
-      //border style
-      borderColor: "#1B4DFF",
-      borderWidth: 0.8,
-      hoverBorderWidth: 5,
-      fill: true,
-
-      //remove point radius
-      pointRadius: 0,
-    },
-  ],
-});
-
-const chartOptions = reactive({
-  responsive: true,
-  tension: 0.3,
-
-  plugins: {
-    //title for the chart
-    title: {
-      display: true,
-      text: "Keep Vue Default Area Chart",
-    },
-    legend: {
-      display: false,
-    },
-    tooltip: {
-      displayColors: false,
-      backgroundColor: "#1B4DFF",
-      borderColor: "#FFFFFF",
-      borderWidth: 0.5,
-      interaction: {
-        intersect: false,
-        mode: "index",
-      },
-    },
-  },
-
-  // axis config and style
-  scales: {
-    // x axis options and styles
-    x: {
-      border: {
-        color: "#EBEDF1",
-        width: 2,
-      },
-      grid: {
-        display: false,
-      },
-      ticks: {
-        color: "#afbaca",
-        font: {
-          size: 16,
-        },
-      },
-    },
-
-    // x axis options and styles
-    y: {
-      min: 0,
-      max: 600,
-      border: {
-        color: "#EBEDF1",
-        width: 2,
-      },
-      grid: {
-        display: false,
-      },
-      ticks: {
-        stepSize: 150,
-        color: "#afbaca",
-        font: {
-          size: 16,
-        },
-      },
-    },
-  },
-});
-
-const customHight = ref({
-  height: 400, // custom height
-});
-
-const myStyles = computed(() => ({
-  height: `${customHight.value.height}px`,
-  width: `100%`,
-  //if custom height is provided then the position relative is needed
-  position: "relative",
-}));
-</script>
-<template>
-  <CodeHighlightWithPreview :code="defaultAreaChartCode">
-    <Line
-      id="defaultAreaChart"
-      :options="chartOptions"
-      :data="chartData"
-      :style="myStyles"
-      :plugins="[hoverLine as any]" />
-  </CodeHighlightWithPreview>
-</template>
diff --git a/components/content/docs/components/areaChart/DoubleSeriesAreaChart.vue b/components/content/docs/components/areaChart/DoubleSeriesAreaChart.vue
deleted file mode 100644
index 7f26dcf..0000000
--- a/components/content/docs/components/areaChart/DoubleSeriesAreaChart.vue
+++ /dev/null
@@ -1,229 +0,0 @@
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" setup>
-import CodeHighlightWithPreview from "~/components/content/CodeHighlightWithPreview.vue";
-import {
-  CategoryScale,
-  ChartTooltip,
-  Filler,
-  KeepChart,
-  Legend,
-  Line,
-  LinearScale,
-  LineElement,
-  PointElement,
-  Title,
-} from "~/src";
-import { doubleAreaChartCode } from "./areaChartCode";
-
-KeepChart.register(
-  Title,
-  ChartTooltip,
-  Legend,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  PointElement,
-  Filler,
-);
-
-//hover style effect
-const hoverLine = reactive({
-  afterDatasetsDraw(KeepChart: {
-    ctx: any;
-    scales: { x: any; y: any };
-    tooltip: any;
-    chartArea: { top: any; bottom: any };
-  }) {
-    const {
-      ctx,
-      tooltip,
-      chartArea: { top, bottom },
-    } = KeepChart;
-
-    if (tooltip._active && tooltip._active.length) {
-      const activePoints = tooltip._active;
-      activePoints.forEach((activePoint: any) => {
-        const xPosition = activePoint.element.x;
-
-        // Vertical line visible when hover
-        ctx.save();
-        ctx.beginPath();
-        ctx.lineWidth = 0.5;
-        ctx.strokeStyle = "#afbaca";
-        ctx.moveTo(xPosition, top);
-        ctx.lineTo(xPosition, bottom);
-        ctx.stroke();
-        ctx.closePath();
-
-        // Point is visible when hover
-        ctx.beginPath();
-        ctx.arc(
-          activePoint.element.x,
-          activePoint.element.y,
-          4,
-          0,
-          Math.PI * 2,
-        );
-        ctx.fillStyle = "#1B4DFF";
-        ctx.fill();
-        ctx.closePath();
-      });
-    }
-  },
-});
-
-const chartData = reactive({
-  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
-  datasets: [
-    {
-      label: "Price",
-      data: [340, 300, 170, 190, 450, 400, 250, 320, 280],
-
-      //gradient bg color
-      backgroundColor: (context: { chart: { chartArea: any; ctx?: any } }) => {
-        const bgColorStart = "#1b4cff4d";
-        const bgColorEnd = "#1b4cff00";
-
-        if (!context.chart.chartArea) {
-          return;
-        }
-        const {
-          ctx,
-          chartArea: { top, bottom },
-        } = context.chart;
-        const gradientBg = ctx.createLinearGradient(0, top, 0, bottom);
-        gradientBg.addColorStop(0, bgColorStart);
-        gradientBg.addColorStop(1, bgColorEnd);
-        return gradientBg;
-      },
-
-      //border style
-      borderColor: "blue",
-      borderWidth: 0.8,
-      hoverBorderWidth: 5,
-      fill: true,
-
-      //remove point radius
-      pointRadius: 0,
-    },
-    {
-      label: "amount",
-      data: [200, 180, 300, 230, 100, 200, 220, 240, 70],
-
-      //gradient bg color
-      backgroundColor: (context: { chart: { chartArea: any; ctx?: any } }) => {
-        const bgColorStart = "#1b4cff4d";
-        const bgColorEnd = "#1b4cff00";
-
-        if (!context.chart.chartArea) {
-          return;
-        }
-        const {
-          ctx,
-          chartArea: { top, bottom },
-        } = context.chart;
-        const gradientBg = ctx.createLinearGradient(0, top, 0, bottom);
-        gradientBg.addColorStop(0, bgColorStart);
-        gradientBg.addColorStop(1, bgColorEnd);
-        return gradientBg;
-      },
-
-      //border style
-      borderColor: "blue",
-      borderWidth: 0.8,
-      hoverBorderWidth: 5,
-      fill: true,
-
-      //remove point radius
-      pointRadius: 0,
-    },
-  ],
-});
-
-const chartOptions = reactive({
-  responsive: true,
-  tension: 0.3,
-
-  plugins: {
-    //title for the chart
-    title: {
-      display: true,
-      text: "Keep Vue Double Series Area Chart",
-    },
-    legend: {
-      display: false,
-    },
-    tooltip: {
-      displayColors: false,
-      backgroundColor: "#1B4DFF",
-      borderColor: "#FFFFFF",
-      borderWidth: 0.5,
-      interaction: {
-        intersect: false,
-        mode: "index",
-      },
-    },
-  },
-
-  // axis config and style
-  scales: {
-    // x axis options and styles
-    x: {
-      border: {
-        color: "#EBEDF1",
-        width: 2,
-      },
-      grid: {
-        display: false,
-      },
-      ticks: {
-        color: "#afbaca",
-        font: {
-          size: 16,
-        },
-      },
-    },
-
-    // x axis options and styles
-    y: {
-      min: 0,
-      max: 600,
-      border: {
-        color: "#EBEDF1",
-        width: 2,
-      },
-      grid: {
-        display: false,
-      },
-      ticks: {
-        stepSize: 150,
-        color: "#afbaca",
-        font: {
-          size: 16,
-        },
-      },
-    },
-  },
-});
-
-const customHight = ref({
-  height: 400, // custom height
-});
-
-const myStyles = computed(() => ({
-  height: `${customHight.value.height}px`,
-  width: `100%`,
-  //if custom height is provided then the position relative is needed
-  position: "relative",
-}));
-</script>
-<template>
-  <CodeHighlightWithPreview :code="doubleAreaChartCode">
-    <Line
-      id="hoverLine"
-      :options="chartOptions"
-      :data="chartData"
-      :style="myStyles"
-      :plugins="[hoverLine as any]" />
-  </CodeHighlightWithPreview>
-</template>
diff --git a/components/content/docs/components/areaChart/areaChartCode.ts b/components/content/docs/components/areaChart/areaChartCode.ts
deleted file mode 100644
index 7631dd6..0000000
--- a/components/content/docs/components/areaChart/areaChartCode.ts
+++ /dev/null
@@ -1,752 +0,0 @@
-const defaultAreaChartCode = {
-  "AreaChartComponent.Vue(ts)": `<script setup lang="ts">
-import {
-  CategoryScale,
-  ChartTooltip,
-  Filler,
-  KeepChart,
-  Legend,
-  Line,
-  LinearScale,
-  LineElement,
-  PointElement,
-  Title
-} from 'keep-vue'
-import { reactive } from 'vue'
-
-KeepChart.register(
-  Title,
-  ChartTooltip,
-  Legend,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  PointElement,
-  Filler
-)
-
-//hover style effect
-const hoverLine = reactive({
-  afterDatasetsDraw(KeepChart: {
-    ctx: any
-    scales: { x: any; y: any }
-    tooltip: any
-    chartArea: { top: any; bottom: any }
-  }) {
-    const {
-      ctx,
-      tooltip,
-      chartArea: { top, bottom }
-    } = KeepChart
-
-    if (tooltip?._active && tooltip?._active.length) {
-      const activePoint = tooltip?._active[0]
-      const xPosition = activePoint.element.x
-
-      // vertical line visible when hover
-      ctx.save()
-      ctx.beginPath()
-      ctx.lineWidth = 0.5
-      ctx.strokeStyle = '#afbaca'
-      ctx.moveTo(xPosition, top)
-      ctx.lineTo(xPosition, bottom)
-      ctx.stroke()
-      ctx.closePath()
-
-      //point is visible when hover
-      ctx.beginPath()
-      ctx.arc(activePoint.element.x, activePoint.element.y, 4, 0, Math.PI * 2)
-      ctx.fillStyle = '#1B4DFF'
-      ctx.fill()
-      ctx.closePath()
-    }
-  }
-})
-
-const chartData = reactive({
-  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
-  datasets: [
-    {
-      label: 'Price',
-      data: [340, 300, 170, 190, 450, 400, 250, 320, 280],
-
-      //gradient bg color
-      backgroundColor: (context: { chart: { chartArea: any; ctx?: any } }) => {
-        const bgColorStart = '#1b4cff4d'
-        const bgColorEnd = '#1b4cff00'
-
-        if (!context.chart.chartArea) {
-          return
-        }
-        const {
-          ctx,
-          chartArea: { top, bottom }
-        } = context.chart
-        const gradientBg = ctx.createLinearGradient(0, top, 0, bottom)
-        gradientBg.addColorStop(0, bgColorStart)
-        gradientBg.addColorStop(1, bgColorEnd)
-        return gradientBg
-      },
-
-      //border style
-      borderColor: '#1B4DFF',
-      borderWidth: 0.8,
-      hoverBorderWidth: 5,
-      fill: true,
-
-      //remove point radius
-      pointRadius: 0
-    }
-  ]
-})
-
-const chartOptions = reactive({
-  responsive: true,
-  tension: 0.3,
-
-  plugins: {
-    //title for the chart
-    title: {
-      display: true,
-      text: 'Keep Vue Default Area Chart'
-    },
-    legend: {
-      display: false
-    },
-    tooltip: {
-      displayColors: false,
-      backgroundColor: '#1B4DFF',
-      borderColor: '#FFFFFF',
-      borderWidth: 0.5,
-      interaction: {
-        intersect: false,
-        mode: 'index'
-      }
-    }
-  },
-
-  // axis config and style
-  scales: {
-    // x axis options and styles
-    x: {
-      border: {
-        color: '#EBEDF1',
-        width: 2
-      },
-      grid: {
-        display: false
-      },
-      ticks: {
-        color: '#afbaca',
-        font: {
-          size: 16
-        }
-      }
-    },
-
-    // x axis options and styles
-    y: {
-      min: 0,
-      max: 600,
-      border: {
-        color: '#EBEDF1',
-        width: 2
-      },
-      grid: {
-        display: false
-      },
-      ticks: {
-        stepSize: 150,
-        color: '#afbaca',
-        font: {
-          size: 16
-        }
-      }
-    }
-  }
-})
-</script>
-
-<template>
-  <Line
-    id="defaultAreaChart"
-    :options="chartOptions"
-    :data="chartData"
-    :plugins="[hoverLine as any]"
-  />
-</template>
-`,
-  "AreaChartComponent.Vue(js)": `<script setup>
-import {
-  CategoryScale,
-  ChartTooltip,
-  Filler,
-  KeepChart,
-  Legend,
-  Line,
-  LinearScale,
-  LineElement,
-  PointElement,
-  Title
-} from 'keep-vue'
-import { reactive } from 'vue'
-
-KeepChart.register(
-  Title,
-  ChartTooltip,
-  Legend,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  PointElement,
-  Filler
-)
-
-//hover style effect
-const hoverLine = reactive({
-  afterDatasetsDraw(KeepChart) {
-    const {
-      ctx,
-      tooltip,
-      chartArea: { top, bottom }
-    } = KeepChart
-
-    if (tooltip?._active && tooltip?._active.length) {
-      const activePoint = tooltip?._active[0]
-      const xPosition = activePoint.element.x
-
-      // vertical line visible when hover
-      ctx.save()
-      ctx.beginPath()
-      ctx.lineWidth = 0.5
-      ctx.strokeStyle = '#afbaca'
-      ctx.moveTo(xPosition, top)
-      ctx.lineTo(xPosition, bottom)
-      ctx.stroke()
-      ctx.closePath()
-
-      //point is visible when hover
-      ctx.beginPath()
-      ctx.arc(activePoint.element.x, activePoint.element.y, 4, 0, Math.PI * 2)
-      ctx.fillStyle = '#1B4DFF'
-      ctx.fill()
-      ctx.closePath()
-    }
-  }
-})
-
-const chartData = reactive({
-  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
-  datasets: [
-    {
-      label: 'Price',
-      data: [340, 300, 170, 190, 450, 400, 250, 320, 280],
-
-      //gradient bg color
-      backgroundColor: (context) => {
-        const bgColorStart = '#1b4cff4d'
-        const bgColorEnd = '#1b4cff00'
-
-        if (!context.chart.chartArea) {
-          return
-        }
-        const {
-          ctx,
-          chartArea: { top, bottom }
-        } = context.chart
-        const gradientBg = ctx.createLinearGradient(0, top, 0, bottom)
-        gradientBg.addColorStop(0, bgColorStart)
-        gradientBg.addColorStop(1, bgColorEnd)
-        return gradientBg
-      },
-
-      //border style
-      borderColor: '#1B4DFF',
-      borderWidth: 0.8,
-      hoverBorderWidth: 5,
-      fill: true,
-
-      //remove point radius
-      pointRadius: 0
-    }
-  ]
-})
-
-const chartOptions = reactive({
-  responsive: true,
-  tension: 0.3,
-
-  plugins: {
-    //title for the chart
-    title: {
-      display: true,
-      text: 'Keep Vue Default Area Chart'
-    },
-    legend: {
-      display: false
-    },
-    tooltip: {
-      displayColors: false,
-      backgroundColor: '#1B4DFF',
-      borderColor: '#FFFFFF',
-      borderWidth: 0.5,
-      interaction: {
-        intersect: false,
-        mode: 'index'
-      }
-    }
-  },
-
-  // axis config and style
-  scales: {
-    // x axis options and styles
-    x: {
-      border: {
-        color: '#EBEDF1',
-        width: 2
-      },
-      grid: {
-        display: false
-      },
-      ticks: {
-        color: '#afbaca',
-        font: {
-          size: 16
-        }
-      }
-    },
-
-    // x axis options and styles
-    y: {
-      min: 0,
-      max: 600,
-      border: {
-        color: '#EBEDF1',
-        width: 2
-      },
-      grid: {
-        display: false
-      },
-      ticks: {
-        stepSize: 150,
-        color: '#afbaca',
-        font: {
-          size: 16
-        }
-      }
-    }
-  }
-})
-</script>
-
-<template>
-  <Line id="defaultAreaChart" :options="chartOptions" :data="chartData" :plugins="[hoverLine]" />
-</template>`,
-};
-
-const doubleAreaChartCode = {
-  "AreaChartComponent.Vue(ts)": `<script setup lang="ts">
-import {
-  CategoryScale,
-  ChartTooltip,
-  Filler,
-  KeepChart,
-  Legend,
-  Line,
-  LinearScale,
-  LineElement,
-  PointElement,
-  Title
-} from 'keep-vue'
-import { reactive } from 'vue'
-
-KeepChart.register(
-  Title,
-  ChartTooltip,
-  Legend,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  PointElement,
-  Filler
-)
-
-//hover style effect
-const hoverLine = reactive({
-  afterDatasetsDraw(KeepChart: {
-    ctx: any
-    scales: { x: any; y: any }
-    tooltip: any
-    chartArea: { top: any; bottom: any }
-  }) {
-    const {
-      ctx,
-      tooltip,
-      chartArea: { top, bottom }
-    } = KeepChart
-
-    if (tooltip?._active && tooltip?._active.length) {
-      const activePoints = tooltip?._active
-      activePoints.forEach((activePoint: any) => {
-        const xPosition = activePoint.element.x
-
-        // Vertical line visible when hover
-        ctx.save()
-        ctx.beginPath()
-        ctx.lineWidth = 0.5
-        ctx.strokeStyle = '#afbaca'
-        ctx.moveTo(xPosition, top)
-        ctx.lineTo(xPosition, bottom)
-        ctx.stroke()
-        ctx.closePath()
-
-        // Point is visible when hover
-        ctx.beginPath()
-        ctx.arc(activePoint.element.x, activePoint.element.y, 4, 0, Math.PI * 2)
-        ctx.fillStyle = '#1B4DFF'
-        ctx.fill()
-        ctx.closePath()
-      })
-    }
-  }
-})
-
-const chartData = reactive({
-  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
-  datasets: [
-    {
-      label: 'Price',
-      data: [340, 300, 170, 190, 450, 400, 250, 320, 280],
-
-      //gradient bg color
-      backgroundColor: (context: { chart: { chartArea: any; ctx?: any } }) => {
-        const bgColorStart = '#1b4cff4d'
-        const bgColorEnd = '#1b4cff00'
-
-        if (!context.chart.chartArea) {
-          return
-        }
-        const {
-          ctx,
-          chartArea: { top, bottom }
-        } = context.chart
-        const gradientBg = ctx.createLinearGradient(0, top, 0, bottom)
-        gradientBg.addColorStop(0, bgColorStart)
-        gradientBg.addColorStop(1, bgColorEnd)
-        return gradientBg
-      },
-
-      //border style
-      borderColor: 'blue',
-      borderWidth: 0.8,
-      hoverBorderWidth: 5,
-      fill: true,
-
-      //remove point radius
-      pointRadius: 0
-    },
-    {
-      label: 'amount',
-      data: [200, 180, 300, 230, 100, 200, 220, 240, 70],
-
-      //gradient bg color
-      backgroundColor: (context: { chart: { chartArea: any; ctx?: any } }) => {
-        const bgColorStart = '#1b4cff4d'
-        const bgColorEnd = '#1b4cff00'
-
-        if (!context.chart.chartArea) {
-          return
-        }
-        const {
-          ctx,
-          chartArea: { top, bottom }
-        } = context.chart
-        const gradientBg = ctx.createLinearGradient(0, top, 0, bottom)
-        gradientBg.addColorStop(0, bgColorStart)
-        gradientBg.addColorStop(1, bgColorEnd)
-        return gradientBg
-      },
-
-      //border style
-      borderColor: 'blue',
-      borderWidth: 0.8,
-      hoverBorderWidth: 5,
-      fill: true,
-
-      //remove point radius
-      pointRadius: 0
-    }
-  ]
-})
-
-const chartOptions = reactive({
-  responsive: true,
-  tension: 0.3,
-
-  plugins: {
-    //title for the chart
-    title: {
-      display: true,
-      text: 'Keep Vue Double Series Area Chart'
-    },
-    legend: {
-      display: false
-    },
-    tooltip: {
-      displayColors: false,
-      backgroundColor: '#1B4DFF',
-      borderColor: '#FFFFFF',
-      borderWidth: 0.5,
-      interaction: {
-        intersect: false,
-        mode: 'index'
-      }
-    }
-  },
-
-  // axis config and style
-  scales: {
-    // x axis options and styles
-    x: {
-      border: {
-        color: '#EBEDF1',
-        width: 2
-      },
-      grid: {
-        display: false
-      },
-      ticks: {
-        color: '#afbaca',
-        font: {
-          size: 16
-        }
-      }
-    },
-
-    // x axis options and styles
-    y: {
-      min: 0,
-      max: 600,
-      border: {
-        color: '#EBEDF1',
-        width: 2
-      },
-      grid: {
-        display: false
-      },
-      ticks: {
-        stepSize: 150,
-        color: '#afbaca',
-        font: {
-          size: 16
-        }
-      }
-    }
-  }
-})
-</script>
-<template>
-  <Line id="hoverLine" :options="chartOptions" :data="chartData" :plugins="[hoverLine as any]" />
-</template>
-`,
-  "AreaChartComponent.Vue(js)": `<script setup>
-import {
-  CategoryScale,
-  ChartTooltip,
-  Filler,
-  KeepChart,
-  Legend,
-  Line,
-  LinearScale,
-  LineElement,
-  PointElement,
-  Title
-} from 'keep-vue'
-import { reactive } from 'vue'
-
-KeepChart.register(
-  Title,
-  ChartTooltip,
-  Legend,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  PointElement,
-  Filler
-)
-
-//hover style effect
-const hoverLine = reactive({
-  afterDatasetsDraw(KeepChart) {
-    const {
-      ctx,
-      tooltip,
-      chartArea: { top, bottom }
-    } = KeepChart
-
-    if (tooltip?._active && tooltip?._active.length) {
-      const activePoints = tooltip?._active
-      activePoints.forEach((activePoint) => {
-        const xPosition = activePoint.element.x
-
-        // Vertical line visible when hover
-        ctx.save()
-        ctx.beginPath()
-        ctx.lineWidth = 0.5
-        ctx.strokeStyle = '#afbaca'
-        ctx.moveTo(xPosition, top)
-        ctx.lineTo(xPosition, bottom)
-        ctx.stroke()
-        ctx.closePath()
-
-        // Point is visible when hover
-        ctx.beginPath()
-        ctx.arc(activePoint.element.x, activePoint.element.y, 4, 0, Math.PI * 2)
-        ctx.fillStyle = '#1B4DFF'
-        ctx.fill()
-        ctx.closePath()
-      })
-    }
-  }
-})
-
-const chartData = reactive({
-  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
-  datasets: [
-    {
-      label: 'Price',
-      data: [340, 300, 170, 190, 450, 400, 250, 320, 280],
-
-      //gradient bg color
-      backgroundColor: (context) => {
-        const bgColorStart = '#1b4cff4d'
-        const bgColorEnd = '#1b4cff00'
-
-        if (!context.chart.chartArea) {
-          return
-        }
-        const {
-          ctx,
-          chartArea: { top, bottom }
-        } = context.chart
-        const gradientBg = ctx.createLinearGradient(0, top, 0, bottom)
-        gradientBg.addColorStop(0, bgColorStart)
-        gradientBg.addColorStop(1, bgColorEnd)
-        return gradientBg
-      },
-
-      //border style
-      borderColor: 'blue',
-      borderWidth: 0.8,
-      hoverBorderWidth: 5,
-      fill: true,
-
-      //remove point radius
-      pointRadius: 0
-    },
-    {
-      label: 'amount',
-      data: [200, 180, 300, 230, 100, 200, 220, 240, 70],
-
-      //gradient bg color
-      backgroundColor: (context) => {
-        const bgColorStart = '#1b4cff4d'
-        const bgColorEnd = '#1b4cff00'
-
-        if (!context.chart.chartArea) {
-          return
-        }
-        const {
-          ctx,
-          chartArea: { top, bottom }
-        } = context.chart
-        const gradientBg = ctx.createLinearGradient(0, top, 0, bottom)
-        gradientBg.addColorStop(0, bgColorStart)
-        gradientBg.addColorStop(1, bgColorEnd)
-        return gradientBg
-      },
-
-      //border style
-      borderColor: 'blue',
-      borderWidth: 0.8,
-      hoverBorderWidth: 5,
-      fill: true,
-
-      //remove point radius
-      pointRadius: 0
-    }
-  ]
-})
-
-const chartOptions = reactive({
-  responsive: true,
-  tension: 0.3,
-
-  plugins: {
-    //title for the chart
-    title: {
-      display: true,
-      text: 'Keep Vue Double Series Area Chart'
-    },
-    legend: {
-      display: false
-    },
-    tooltip: {
-      displayColors: false,
-      backgroundColor: '#1B4DFF',
-      borderColor: '#FFFFFF',
-      borderWidth: 0.5,
-      interaction: {
-        intersect: false,
-        mode: 'index'
-      }
-    }
-  },
-
-  // axis config and style
-  scales: {
-    // x axis options and styles
-    x: {
-      border: {
-        color: '#EBEDF1',
-        width: 2
-      },
-      grid: {
-        display: false
-      },
-      ticks: {
-        color: '#afbaca',
-        font: {
-          size: 16
-        }
-      }
-    },
-
-    // x axis options and styles
-    y: {
-      min: 0,
-      max: 600,
-      border: {
-        color: '#EBEDF1',
-        width: 2
-      },
-      grid: {
-        display: false
-      },
-      ticks: {
-        stepSize: 150,
-        color: '#afbaca',
-        font: {
-          size: 16
-        }
-      }
-    }
-  }
-})
-</script>
-<template>
-  <Line id="hoverLine" :options="chartOptions" :data="chartData" :plugins="[hoverLine]" />
-</template>`,
-};
-
-export { defaultAreaChartCode, doubleAreaChartCode };
diff --git a/components/content/docs/components/barChart/ChartWithDoubleData.vue b/components/content/docs/components/barChart/ChartWithDoubleData.vue
deleted file mode 100644
index 058f176..0000000
--- a/components/content/docs/components/barChart/ChartWithDoubleData.vue
+++ /dev/null
@@ -1,118 +0,0 @@
-<script lang="ts" setup>
-import {
-  Bar,
-  BarElement,
-  CategoryScale,
-  ChartTooltip,
-  KeepChart,
-  Legend,
-  LinearScale,
-  Title,
-} from "~/src";
-import { barChartWithDoubleDataCode } from "./barChartCode";
-
-KeepChart.register(
-  Title,
-  ChartTooltip,
-  Legend,
-  BarElement,
-  CategoryScale,
-  LinearScale,
-);
-
-const chartData = reactive({
-  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
-  datasets: [
-    {
-      data: [340, 300, 170, 190, 450, 400],
-      label: "Price",
-      borderRadius: 8,
-      backgroundColor: "#1B4DFF", //single bar color
-    },
-    {
-      data: [140, 200, 120, 130, 120, 213],
-      label: "Price",
-      borderRadius: 8,
-      backgroundColor: "#AEBFFF", //single bar color
-    },
-  ],
-});
-
-const customHeight = reactive({
-  height: 300, // custom height
-});
-
-const myStyles = computed(() => ({
-  //if custom height is provided then the position relative is needed
-  height: `${customHeight.height}px`,
-  width: `100%`,
-  position: "relative",
-}));
-
-const chartOptions = reactive({
-  responsive: true,
-
-  plugins: {
-    title: {
-      display: true,
-      text: "Keep Vue Multiple data Chart",
-    },
-    legend: {
-      display: false,
-    },
-    tooltip: {
-      displayColors: false,
-      backgroundColor: "#1B4DFF",
-      borderColor: "#FFFFFF",
-      borderWidth: 0.5,
-    },
-  },
-  scales: {
-    // x axis options and styles
-    x: {
-      border: {
-        color: "#EBEDF1",
-        width: 2,
-      },
-      grid: {
-        display: false,
-      },
-      ticks: {
-        color: "#afbaca",
-        font: {
-          size: 16,
-        },
-      },
-    },
-
-    // x axis options and styles
-    y: {
-      min: 0,
-      max: 600,
-      border: {
-        color: "#EBEDF1",
-        width: 2,
-      },
-      grid: {
-        display: false,
-      },
-      ticks: {
-        stepSize: 150,
-        color: "#afbaca",
-        font: {
-          size: 16,
-        },
-      },
-    },
-  },
-});
-</script>
-<template>
-  <CodeHighlightWithPreview :code="barChartWithDoubleDataCode">
-    <Bar
-      id="my-chart-id"
-      :options="chartOptions"
-      :data="chartData"
-      :style="myStyles" />
-  </CodeHighlightWithPreview>
-</template>
diff --git a/components/content/docs/components/barChart/DefaultBarChart.vue b/components/content/docs/components/barChart/DefaultBarChart.vue
deleted file mode 100644
index f111111..0000000
--- a/components/content/docs/components/barChart/DefaultBarChart.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<script lang="ts" setup>
-import {
-  Bar,
-  BarElement,
-  CategoryScale,
-  ChartTooltip,
-  KeepChart,
-  Legend,
-  LinearScale,
-  Title,
-} from "~/src";
-import { defaultBarChartCode } from "./barChartCode";
-
-KeepChart.register(
-  Title,
-  ChartTooltip,
-  Legend,
-  BarElement,
-  CategoryScale,
-  LinearScale,
-);
-
-const chartData = reactive({
-  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
-  datasets: [
-    {
-      data: [340, 300, 170, 190, 450, 400, 250, 320, 280],
-      label: "Price",
-      borderRadius: 8,
-      borderColor: "red",
-      backgroundColor: "#1B4DFF", //single bar color
-    },
-  ],
-});
-
-const customHight = reactive({
-  height: 300, // custom height
-});
-
-const myStyles = computed(() => ({
-  //if custom height is provided then the position relative is needed
-  height: `${customHight.height}px`,
-  width: `100%`,
-  position: "relative",
-}));
-
-const chartOptions = reactive({
-  responsive: true,
-
-  plugins: {
-    //title fo the chart
-    title: {
-      display: true,
-      text: "Keep Vue Default Chart",
-    },
-    legend: {
-      display: false,
-    },
-    tooltip: {
-      displayColors: false,
-      backgroundColor: "#1B4DFF",
-      borderColor: "#FFFFFF",
-      borderWidth: 0.5,
-    },
-  },
-  scales: {
-    // x axis options and styles
-    x: {
-      border: {
-        color: "#EBEDF1",
-        width: 2,
-      },
-      grid: {
-        display: false,
-      },
-      ticks: {
-        color: "#afbaca",
-        font: {
-          size: 16,
-        },
-      },
-    },
-
-    // x axis options and styles
-    y: {
-      min: 0,
-      max: 600,
-      border: {
-        color: "#EBEDF1",
-        width: 2,
-      },
-      grid: {
-        display: false,
-      },
-      ticks: {
-        stepSize: 150,
-        color: "#afbaca",
-        font: {
-          size: 16,
-        },
-      },
-    },
-  },
-});
-</script>
-<template>
-  <CodeHighlightWithPreview :code="defaultBarChartCode">
-    <Bar
-      id="my-chart-id"
-      :options="chartOptions"
-      :data="chartData"
-      :style="myStyles" />
-  </CodeHighlightWithPreview>
-</template>
diff --git a/components/content/docs/components/barChart/barChartCode.ts b/components/content/docs/components/barChart/barChartCode.ts
deleted file mode 100644
index c93d439..0000000
--- a/components/content/docs/components/barChart/barChartCode.ts
+++ /dev/null
@@ -1,191 +0,0 @@
-const defaultBarChartCode = {
-  "BarChartComponent.vue": `<script setup>
-import {
-  Bar,
-  BarElement,
-  CategoryScale,
-  ChartTooltip,
-  KeepChart,
-  Legend,
-  LinearScale,
-  Title
-} from 'keep-vue'
-import { ref } from 'vue'
-
-KeepChart.register(Title, ChartTooltip, Legend, BarElement, CategoryScale, LinearScale)
-
-const chartData = ref({
-  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
-  datasets: [
-    {
-      data: [340, 300, 170, 190, 450, 400, 250, 320, 280],
-      label: 'Price',
-      borderRadius: 8,
-      borderColor: 'red',
-      backgroundColor: '#1B4DFF' //single bar color
-    }
-  ]
-})
-
-const chartOptions = ref({
-  responsive: true,
-
-  plugins: {
-    //title fo the chart
-    title: {
-      display: true,
-      text: 'Keep Vue Default Chart'
-    },
-    legend: {
-      display: false
-    },
-    tooltip: {
-      displayColors: false,
-      backgroundColor: '#1B4DFF',
-      borderColor: '#FFFFFF',
-      borderWidth: 0.5
-    }
-  },
-  scales: {
-    // x axis options and styles
-    x: {
-      border: {
-        color: '#EBEDF1',
-        width: 2
-      },
-      grid: {
-        display: false
-      },
-      ticks: {
-        color: '#afbaca',
-        font: {
-          size: 16
-        }
-      }
-    },
-
-    // x axis options and styles
-    y: {
-      min: 0,
-      max: 600,
-      border: {
-        color: '#EBEDF1',
-        width: 2
-      },
-      grid: {
-        display: false
-      },
-      ticks: {
-        stepSize: 150,
-        color: '#afbaca',
-        font: {
-          size: 16
-        }
-      }
-    }
-  }
-})
-</script>
-<template>
-  <Bar id="my-chart-id" :options="chartOptions" :data="chartData" />
-</template>`,
-};
-
-const barChartWithDoubleDataCode = {
-  "BarChartComponent.vue": `<script setup>
-import {
-  Bar,
-  BarElement,
-  CategoryScale,
-  ChartTooltip,
-  KeepChart,
-  Legend,
-  LinearScale,
-  Title
-} from 'keep-vue'
-import { ref } from 'vue'
-
-KeepChart.register(Title, ChartTooltip, Legend, BarElement, CategoryScale, LinearScale)
-
-const chartData = ref({
-  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
-  datasets: [
-    {
-      data: [340, 300, 170, 190, 450, 400],
-      label: 'Price',
-      borderRadius: 8,
-      backgroundColor: '#1B4DFF' //single bar color
-    },
-    {
-      data: [140, 200, 120, 130, 120, 213],
-      label: 'Price',
-      borderRadius: 8,
-      backgroundColor: '#AEBFFF' //single bar color
-    }
-  ]
-})
-
-const chartOptions = ref({
-  responsive: true,
-
-  plugins: {
-    title: {
-      display: true,
-      text: 'Keep Vue Multiple data Chart'
-    },
-    legend: {
-      display: false
-    },
-    tooltip: {
-      displayColors: false,
-      backgroundColor: '#1B4DFF',
-      borderColor: '#FFFFFF',
-      borderWidth: 0.5
-    }
-  },
-  scales: {
-    // x axis options and styles
-    x: {
-      border: {
-        color: '#EBEDF1',
-        width: 2
-      },
-      grid: {
-        display: false
-      },
-      ticks: {
-        color: '#afbaca',
-        font: {
-          size: 16
-        }
-      }
-    },
-
-    // x axis options and styles
-    y: {
-      min: 0,
-      max: 600,
-      border: {
-        color: '#EBEDF1',
-        width: 2
-      },
-      grid: {
-        display: false
-      },
-      ticks: {
-        stepSize: 150,
-        color: '#afbaca',
-        font: {
-          size: 16
-        }
-      }
-    }
-  }
-})
-</script>
-<template>
-  <Bar id="my-chart-id" :options="chartOptions" :data="chartData" />
-</template>`,
-};
-
-export { barChartWithDoubleDataCode, defaultBarChartCode };
diff --git a/components/content/docs/components/lineChart/DefaultLineChart.vue b/components/content/docs/components/lineChart/DefaultLineChart.vue
deleted file mode 100644
index 0fa18be..0000000
--- a/components/content/docs/components/lineChart/DefaultLineChart.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" setup>
-import CodeHighlightWithPreview from "~/components/content/CodeHighlightWithPreview.vue";
-import {
-  CategoryScale,
-  ChartTooltip,
-  KeepChart,
-  Legend,
-  Line,
-  LinearScale,
-  LineElement,
-  PointElement,
-  Title,
-} from "~/src";
-import { defaultLineChartCode } from "./lineChartCode";
-
-KeepChart.register(
-  Title,
-  ChartTooltip,
-  Legend,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  PointElement,
-);
-
-//hover style effect
-const hoverLine = reactive({
-  afterDatasetsDraw(KeepChart: {
-    ctx: any;
-    scales: { x: any; y: any };
-    tooltip: any;
-    chartArea: { top: any; bottom: any };
-  }) {
-    const {
-      ctx,
-      tooltip,
-      chartArea: { top, bottom },
-    } = KeepChart;
-
-    if (tooltip._active && tooltip._active.length) {
-      const activePoint = tooltip._active[0];
-      const xPosition = activePoint.element.x;
-
-      // vertical line visible when hover
-      ctx.save();
-      ctx.beginPath();
-      ctx.lineWidth = 0.5;
-      ctx.strokeStyle = "#afbaca";
-      ctx.moveTo(xPosition, top);
-      ctx.lineTo(xPosition, bottom);
-      ctx.stroke();
-      ctx.closePath();
-
-      //point is visible when hover
-      ctx.beginPath();
-      ctx.arc(activePoint.element.x, activePoint.element.y, 4, 0, Math.PI * 2);
-      ctx.fillStyle = "#1B4DFF";
-      ctx.fill();
-      ctx.closePath();
-    }
-  },
-});
-
-const chartData = reactive({
-  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
-  datasets: [
-    {
-      label: "Price",
-      data: [340, 300, 170, 190, 450, 400, 250, 320, 280],
-
-      //gradient bg color
-      backgroundColor: (context: { chart: { chartArea: any; ctx?: any } }) => {
-        const bgColorStart = "#1b4cff4d";
-        const bgColorEnd = "#1b4cff00";
-
-        if (!context.chart.chartArea) {
-          return;
-        }
-        const {
-          ctx,
-          chartArea: { top, bottom },
-        } = context.chart;
-        const gradientBg = ctx.createLinearGradient(0, top, 0, bottom);
-        gradientBg.addColorStop(0, bgColorStart);
-        gradientBg.addColorStop(1, bgColorEnd);
-        return gradientBg;
-      },
-
-      //border style
-      borderColor: "#1B4DFF",
-      borderWidth: 0.8,
-      hoverBorderWidth: 5,
-
-      //remove point radius
-      pointRadius: 0,
-    },
-  ],
-});
-
-const chartOptions = reactive({
-  responsive: true,
-  tension: 0.3,
-
-  plugins: {
-    //title for the chart
-    title: {
-      display: true,
-      text: "Keep Vue Default Line Chart",
-    },
-    legend: {
-      display: false,
-    },
-    tooltip: {
-      displayColors: false,
-      backgroundColor: "#1B4DFF",
-      borderColor: "#FFFFFF",
-      borderWidth: 0.5,
-      interaction: {
-        intersect: false,
-        mode: "index",
-      },
-    },
-  },
-
-  // axis config and style
-  scales: {
-    // x axis options and styles
-    x: {
-      border: {
-        color: "#EBEDF1",
-        width: 2,
-      },
-      grid: {
-        display: false,
-      },
-      ticks: {
-        color: "#afbaca",
-        font: {
-          size: 16,
-        },
-      },
-    },
-
-    // x axis options and styles
-    y: {
-      min: 0,
-      max: 600,
-      border: {
-        color: "#EBEDF1",
-        width: 2,
-      },
-      grid: {
-        display: false,
-      },
-      ticks: {
-        stepSize: 150,
-        color: "#afbaca",
-        font: {
-          size: 16,
-        },
-      },
-    },
-  },
-});
-
-const customHight = reactive({
-  height: 400, // custom height
-});
-
-const myStyles = computed(() => ({
-  height: `${customHight.height}px`,
-  width: `100%`,
-  //if custom height is provided then the position relative is needed
-  position: "relative",
-}));
-</script>
-<template>
-  <CodeHighlightWithPreview :code="defaultLineChartCode">
-    <Line
-      id="defaultAreaChart"
-      :options="chartOptions"
-      :data="chartData"
-      :style="myStyles"
-      :plugins="[hoverLine as any]" />
-  </CodeHighlightWithPreview>
-</template>
diff --git a/components/content/docs/components/lineChart/DoubleLineLineChart.vue b/components/content/docs/components/lineChart/DoubleLineLineChart.vue
deleted file mode 100644
index cbf7ea4..0000000
--- a/components/content/docs/components/lineChart/DoubleLineLineChart.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" setup>
-import {
-  CategoryScale,
-  ChartTooltip,
-  KeepChart,
-  Legend,
-  Line,
-  LinearScale,
-  LineElement,
-  PointElement,
-  Title,
-} from "~/src";
-import { doubleLineChartCode } from "./lineChartCode";
-
-KeepChart.register(
-  Title,
-  ChartTooltip,
-  Legend,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  PointElement,
-);
-
-//hover style effect
-const hoverLine = reactive({
-  afterDatasetsDraw(KeepChart: {
-    ctx: any;
-    scales: { x: any; y: any };
-    tooltip: any;
-    chartArea: { top: any; bottom: any };
-  }) {
-    const {
-      ctx,
-      tooltip,
-      chartArea: { top, bottom },
-    } = KeepChart;
-
-    if (tooltip._active && tooltip._active.length) {
-      const activePoints = tooltip._active;
-      activePoints.forEach((activePoint: any) => {
-        const xPosition = activePoint.element.x;
-
-        // Vertical line visible when hover
-        ctx.save();
-        ctx.beginPath();
-        ctx.lineWidth = 0.5;
-        ctx.strokeStyle = "#afbaca";
-        ctx.moveTo(xPosition, top);
-        ctx.lineTo(xPosition, bottom);
-        ctx.stroke();
-        ctx.closePath();
-
-        // Point is visible when hover
-        ctx.beginPath();
-        ctx.arc(
-          activePoint.element.x,
-          activePoint.element.y,
-          4,
-          0,
-          Math.PI * 2,
-        );
-        ctx.fillStyle = "#1B4DFF";
-        ctx.fill();
-        ctx.closePath();
-      });
-    }
-  },
-});
-
-const chartData = reactive({
-  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
-  datasets: [
-    {
-      label: "Price",
-      data: [340, 300, 170, 190, 450, 400, 250, 320, 280],
-
-      //gradient bg color
-      backgroundColor: (context: { chart: { chartArea: any; ctx?: any } }) => {
-        const bgColorStart = "#1b4cff4d";
-        const bgColorEnd = "#1b4cff00";
-
-        if (!context.chart.chartArea) {
-          return;
-        }
-        const {
-          ctx,
-          chartArea: { top, bottom },
-        } = context.chart;
-        const gradientBg = ctx.createLinearGradient(0, top, 0, bottom);
-        gradientBg.addColorStop(0, bgColorStart);
-        gradientBg.addColorStop(1, bgColorEnd);
-        return gradientBg;
-      },
-
-      //border style
-      borderColor: "blue",
-      borderWidth: 0.8,
-      hoverBorderWidth: 5,
-
-      //remove point radius
-      pointRadius: 0,
-    },
-    {
-      label: "amount",
-      data: [200, 180, 300, 230, 100, 200, 220, 240, 70],
-
-      //gradient bg color
-      backgroundColor: (context: { chart: { chartArea: any; ctx?: any } }) => {
-        const bgColorStart = "#1b4cff4d";
-        const bgColorEnd = "#1b4cff00";
-
-        if (!context.chart.chartArea) {
-          return;
-        }
-        const {
-          ctx,
-          chartArea: { top, bottom },
-        } = context.chart;
-        const gradientBg = ctx.createLinearGradient(0, top, 0, bottom);
-        gradientBg.addColorStop(0, bgColorStart);
-        gradientBg.addColorStop(1, bgColorEnd);
-        return gradientBg;
-      },
-
-      //border style
-      borderColor: "blue",
-      borderWidth: 0.8,
-      hoverBorderWidth: 5,
-
-      //remove point radius
-      pointRadius: 0,
-    },
-  ],
-});
-
-const chartOptions = reactive({
-  responsive: true,
-  tension: 0.3,
-
-  plugins: {
-    //title for the chart
-    title: {
-      display: true,
-      text: "Keep Vue Double Series Line Chart",
-    },
-    legend: {
-      display: false,
-    },
-    tooltip: {
-      displayColors: false,
-      backgroundColor: "#1B4DFF",
-      borderColor: "#FFFFFF",
-      borderWidth: 0.5,
-      interaction: {
-        intersect: false,
-        mode: "index",
-      },
-    },
-  },
-
-  // axis config and style
-  scales: {
-    // x axis options and styles
-    x: {
-      border: {
-        color: "#EBEDF1",
-        width: 2,
-      },
-      grid: {
-        display: false,
-      },
-      ticks: {
-        color: "#afbaca",
-        font: {
-          size: 16,
-        },
-      },
-    },
-
-    // x axis options and styles
-    y: {
-      min: 0,
-      max: 600,
-      border: {
-        color: "#EBEDF1",
-        width: 2,
-      },
-      grid: {
-        display: false,
-      },
-      ticks: {
-        stepSize: 150,
-        color: "#afbaca",
-        font: {
-          size: 16,
-        },
-      },
-    },
-  },
-});
-
-const customHight = reactive({
-  height: 400, // custom height
-});
-
-const myStyles = computed(() => ({
-  height: `${customHight.height}px`,
-  width: `100%`,
-  //if custom height is provided then the position relative is needed
-  position: "relative",
-}));
-</script>
-<template>
-  <CodeHighlightWithPreview :code="doubleLineChartCode">
-    <Line
-      id="hoverLine"
-      :options="chartOptions"
-      :data="chartData"
-      :style="myStyles"
-      :plugins="[hoverLine as any]" />
-  </CodeHighlightWithPreview>
-</template>
diff --git a/components/content/docs/components/lineChart/lineChartCode.ts b/components/content/docs/components/lineChart/lineChartCode.ts
deleted file mode 100644
index ea12e3a..0000000
--- a/components/content/docs/components/lineChart/lineChartCode.ts
+++ /dev/null
@@ -1,735 +0,0 @@
-const defaultLineChartCode = {
-  "LineChartComponent.vue(ts)": `<script setup lang="ts">
-import {
-  CategoryScale,
-  ChartTooltip,
-  KeepChart,
-  Legend,
-  Line,
-  LinearScale,
-  LineElement,
-  PointElement,
-  Title
-} from 'keep-vue'
-import { reactive } from 'vue'
-
-KeepChart.register(
-  Title,
-  ChartTooltip,
-  Legend,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  PointElement
-)
-
-//hover style effect
-const hoverLine = reactive({
-  afterDatasetsDraw(KeepChart: {
-    ctx: any
-    scales: { x: any; y: any }
-    tooltip: any
-    chartArea: { top: any; bottom: any }
-  }) {
-    const {
-      ctx,
-      tooltip,
-      chartArea: { top, bottom }
-    } = KeepChart
-
-    if (tooltip?._active && tooltip?._active.length) {
-      const activePoint = tooltip?._active[0]
-      const xPosition = activePoint.element.x
-
-      // vertical line visible when hover
-      ctx.save()
-      ctx.beginPath()
-      ctx.lineWidth = 0.5
-      ctx.strokeStyle = '#afbaca'
-      ctx.moveTo(xPosition, top)
-      ctx.lineTo(xPosition, bottom)
-      ctx.stroke()
-      ctx.closePath()
-
-      //point is visible when hover
-      ctx.beginPath()
-      ctx.arc(activePoint.element.x, activePoint.element.y, 4, 0, Math.PI * 2)
-      ctx.fillStyle = '#1B4DFF'
-      ctx.fill()
-      ctx.closePath()
-    }
-  }
-})
-
-const chartData = reactive({
-  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
-  datasets: [
-    {
-      label: 'Price',
-      data: [340, 300, 170, 190, 450, 400, 250, 320, 280],
-
-      //gradient bg color
-      backgroundColor: (context: { chart: { chartArea: any; ctx?: any } }) => {
-        const bgColorStart = '#1b4cff4d'
-        const bgColorEnd = '#1b4cff00'
-
-        if (!context.chart.chartArea) {
-          return
-        }
-        const {
-          ctx,
-          chartArea: { top, bottom }
-        } = context.chart
-        const gradientBg = ctx.createLinearGradient(0, top, 0, bottom)
-        gradientBg.addColorStop(0, bgColorStart)
-        gradientBg.addColorStop(1, bgColorEnd)
-        return gradientBg
-      },
-
-      //border style
-      borderColor: '#1B4DFF',
-      borderWidth: 0.8,
-      hoverBorderWidth: 5,
-
-      //remove point radius
-      pointRadius: 0
-    }
-  ]
-})
-
-const chartOptions = reactive({
-  responsive: true,
-  tension: 0.3,
-
-  plugins: {
-    //title for the chart
-    title: {
-      display: true,
-      text: 'Keep Vue Default Line Chart'
-    },
-    legend: {
-      display: false
-    },
-    tooltip: {
-      displayColors: false,
-      backgroundColor: '#1B4DFF',
-      borderColor: '#FFFFFF',
-      borderWidth: 0.5,
-      interaction: {
-        intersect: false,
-        mode: 'index'
-      }
-    }
-  },
-
-  // axis config and style
-  scales: {
-    // x axis options and styles
-    x: {
-      border: {
-        color: '#EBEDF1',
-        width: 2
-      },
-      grid: {
-        display: false
-      },
-      ticks: {
-        color: '#afbaca',
-        font: {
-          size: 16
-        }
-      }
-    },
-
-    // x axis options and styles
-    y: {
-      min: 0,
-      max: 600,
-      border: {
-        color: '#EBEDF1',
-        width: 2
-      },
-      grid: {
-        display: false
-      },
-      ticks: {
-        stepSize: 150,
-        color: '#afbaca',
-        font: {
-          size: 16
-        }
-      }
-    }
-  }
-})
-</script>
-<template>
-  <Line
-    id="defaultAreaChart"
-    :options="chartOptions"
-    :data="chartData"
-    :plugins="[hoverLine as any]"
-  />
-</template>
-`,
-  "LineChartComponent.vue(js)": `<script setup>
-import {
-  CategoryScale,
-  ChartTooltip,
-  KeepChart,
-  Legend,
-  Line,
-  LinearScale,
-  LineElement,
-  PointElement,
-  Title
-} from 'keep-vue'
-import { reactive } from 'vue'
-
-KeepChart.register(
-  Title,
-  ChartTooltip,
-  Legend,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  PointElement
-)
-
-//hover style effect
-const hoverLine = reactive({
-  afterDatasetsDraw(KeepChart) {
-    const {
-      ctx,
-      tooltip,
-      chartArea: { top, bottom }
-    } = KeepChart
-
-    if (tooltip?._active && tooltip?._active.length) {
-      const activePoint = tooltip?._active[0]
-      const xPosition = activePoint.element.x
-
-      // vertical line visible when hover
-      ctx.save()
-      ctx.beginPath()
-      ctx.lineWidth = 0.5
-      ctx.strokeStyle = '#afbaca'
-      ctx.moveTo(xPosition, top)
-      ctx.lineTo(xPosition, bottom)
-      ctx.stroke()
-      ctx.closePath()
-
-      //point is visible when hover
-      ctx.beginPath()
-      ctx.arc(activePoint.element.x, activePoint.element.y, 4, 0, Math.PI * 2)
-      ctx.fillStyle = '#1B4DFF'
-      ctx.fill()
-      ctx.closePath()
-    }
-  }
-})
-
-const chartData = reactive({
-  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
-  datasets: [
-    {
-      label: 'Price',
-      data: [340, 300, 170, 190, 450, 400, 250, 320, 280],
-
-      //gradient bg color
-      backgroundColor: (context) => {
-        const bgColorStart = '#1b4cff4d'
-        const bgColorEnd = '#1b4cff00'
-
-        if (!context.chart.chartArea) {
-          return
-        }
-        const {
-          ctx,
-          chartArea: { top, bottom }
-        } = context.chart
-        const gradientBg = ctx.createLinearGradient(0, top, 0, bottom)
-        gradientBg.addColorStop(0, bgColorStart)
-        gradientBg.addColorStop(1, bgColorEnd)
-        return gradientBg
-      },
-
-      //border style
-      borderColor: '#1B4DFF',
-      borderWidth: 0.8,
-      hoverBorderWidth: 5,
-
-      //remove point radius
-      pointRadius: 0
-    }
-  ]
-})
-
-const chartOptions = reactive({
-  responsive: true,
-  tension: 0.3,
-
-  plugins: {
-    //title for the chart
-    title: {
-      display: true,
-      text: 'Keep Vue Default Line Chart'
-    },
-    legend: {
-      display: false
-    },
-    tooltip: {
-      displayColors: false,
-      backgroundColor: '#1B4DFF',
-      borderColor: '#FFFFFF',
-      borderWidth: 0.5,
-      interaction: {
-        intersect: false,
-        mode: 'index'
-      }
-    }
-  },
-
-  // axis config and style
-  scales: {
-    // x axis options and styles
-    x: {
-      border: {
-        color: '#EBEDF1',
-        width: 2
-      },
-      grid: {
-        display: false
-      },
-      ticks: {
-        color: '#afbaca',
-        font: {
-          size: 16
-        }
-      }
-    },
-
-    // x axis options and styles
-    y: {
-      min: 0,
-      max: 600,
-      border: {
-        color: '#EBEDF1',
-        width: 2
-      },
-      grid: {
-        display: false
-      },
-      ticks: {
-        stepSize: 150,
-        color: '#afbaca',
-        font: {
-          size: 16
-        }
-      }
-    }
-  }
-})
-</script>
-<template>
-  <Line id="defaultAreaChart" :options="chartOptions" :data="chartData" :plugins="[hoverLine]" />
-</template>`,
-};
-
-const doubleLineChartCode = {
-  "LineChartComponent.vue(ts)": `<script setup lang="ts">
-import {
-  CategoryScale,
-  ChartTooltip,
-  KeepChart,
-  Legend,
-  Line,
-  LinearScale,
-  LineElement,
-  PointElement,
-  Title
-} from 'keep-vue'
-import { reactive } from 'vue'
-
-KeepChart.register(
-  Title,
-  ChartTooltip,
-  Legend,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  PointElement
-)
-
-//hover style effect
-const hoverLine = reactive({
-  afterDatasetsDraw(KeepChart: {
-    ctx: any
-    scales: { x: any; y: any }
-    tooltip: any
-    chartArea: { top: any; bottom: any }
-  }) {
-    const {
-      ctx,
-      tooltip,
-      chartArea: { top, bottom }
-    } = KeepChart
-
-    if (tooltip?._active && tooltip?._active.length) {
-      const activePoints = tooltip?._active
-      activePoints.forEach((activePoint: any) => {
-        const xPosition = activePoint.element.x
-
-        // Vertical line visible when hover
-        ctx.save()
-        ctx.beginPath()
-        ctx.lineWidth = 0.5
-        ctx.strokeStyle = '#afbaca'
-        ctx.moveTo(xPosition, top)
-        ctx.lineTo(xPosition, bottom)
-        ctx.stroke()
-        ctx.closePath()
-
-        // Point is visible when hover
-        ctx.beginPath()
-        ctx.arc(activePoint.element.x, activePoint.element.y, 4, 0, Math.PI * 2)
-        ctx.fillStyle = '#1B4DFF'
-        ctx.fill()
-        ctx.closePath()
-      })
-    }
-  }
-})
-
-const chartData = reactive({
-  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
-  datasets: [
-    {
-      label: 'Price',
-      data: [340, 300, 170, 190, 450, 400, 250, 320, 280],
-
-      //gradient bg color
-      backgroundColor: (context: { chart: { chartArea: any; ctx?: any } }) => {
-        const bgColorStart = '#1b4cff4d'
-        const bgColorEnd = '#1b4cff00'
-
-        if (!context.chart.chartArea) {
-          return
-        }
-        const {
-          ctx,
-          chartArea: { top, bottom }
-        } = context.chart
-        const gradientBg = ctx.createLinearGradient(0, top, 0, bottom)
-        gradientBg.addColorStop(0, bgColorStart)
-        gradientBg.addColorStop(1, bgColorEnd)
-        return gradientBg
-      },
-
-      //border style
-      borderColor: 'blue',
-      borderWidth: 0.8,
-      hoverBorderWidth: 5,
-
-      //remove point radius
-      pointRadius: 0
-    },
-    {
-      label: 'amount',
-      data: [200, 180, 300, 230, 100, 200, 220, 240, 70],
-
-      //gradient bg color
-      backgroundColor: (context: { chart: { chartArea: any; ctx?: any } }) => {
-        const bgColorStart = '#1b4cff4d'
-        const bgColorEnd = '#1b4cff00'
-
-        if (!context.chart.chartArea) {
-          return
-        }
-        const {
-          ctx,
-          chartArea: { top, bottom }
-        } = context.chart
-        const gradientBg = ctx.createLinearGradient(0, top, 0, bottom)
-        gradientBg.addColorStop(0, bgColorStart)
-        gradientBg.addColorStop(1, bgColorEnd)
-        return gradientBg
-      },
-
-      //border style
-      borderColor: 'blue',
-      borderWidth: 0.8,
-      hoverBorderWidth: 5,
-
-      //remove point radius
-      pointRadius: 0
-    }
-  ]
-})
-
-const chartOptions = reactive({
-  responsive: true,
-  tension: 0.3,
-
-  plugins: {
-    //title for the chart
-    title: {
-      display: true,
-      text: 'Keep Vue Double Series Line Chart'
-    },
-    legend: {
-      display: false
-    },
-    tooltip: {
-      displayColors: false,
-      backgroundColor: '#1B4DFF',
-      borderColor: '#FFFFFF',
-      borderWidth: 0.5,
-      interaction: {
-        intersect: false,
-        mode: 'index'
-      }
-    }
-  },
-
-  // axis config and style
-  scales: {
-    // x axis options and styles
-    x: {
-      border: {
-        color: '#EBEDF1',
-        width: 2
-      },
-      grid: {
-        display: false
-      },
-      ticks: {
-        color: '#afbaca',
-        font: {
-          size: 16
-        }
-      }
-    },
-
-    // x axis options and styles
-    y: {
-      min: 0,
-      max: 600,
-      border: {
-        color: '#EBEDF1',
-        width: 2
-      },
-      grid: {
-        display: false
-      },
-      ticks: {
-        stepSize: 150,
-        color: '#afbaca',
-        font: {
-          size: 16
-        }
-      }
-    }
-  }
-})
-</script>
-<template>
-  <Line id="hoverLine" :options="chartOptions" :data="chartData" :plugins="[hoverLine as any]" />
-</template>`,
-  "LineChartComponent.vue(js)": `<script setup>
-import {
-  CategoryScale,
-  ChartTooltip,
-  KeepChart,
-  Legend,
-  Line,
-  LinearScale,
-  LineElement,
-  PointElement,
-  Title
-} from 'keep-vue'
-import { reactive } from 'vue'
-
-KeepChart.register(
-  Title,
-  ChartTooltip,
-  Legend,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  PointElement
-)
-
-//hover style effect
-const hoverLine = reactive({
-  afterDatasetsDraw(KeepChart) {
-    const {
-      ctx,
-      tooltip,
-      chartArea: { top, bottom }
-    } = KeepChart
-
-    if (tooltip?._active && tooltip?._active.length) {
-      const activePoints = tooltip?._active
-      activePoints.forEach((activePoint) => {
-        const xPosition = activePoint.element.x
-
-        // Vertical line visible when hover
-        ctx.save()
-        ctx.beginPath()
-        ctx.lineWidth = 0.5
-        ctx.strokeStyle = '#afbaca'
-        ctx.moveTo(xPosition, top)
-        ctx.lineTo(xPosition, bottom)
-        ctx.stroke()
-        ctx.closePath()
-
-        // Point is visible when hover
-        ctx.beginPath()
-        ctx.arc(activePoint.element.x, activePoint.element.y, 4, 0, Math.PI * 2)
-        ctx.fillStyle = '#1B4DFF'
-        ctx.fill()
-        ctx.closePath()
-      })
-    }
-  }
-})
-
-const chartData = reactive({
-  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
-  datasets: [
-    {
-      label: 'Price',
-      data: [340, 300, 170, 190, 450, 400, 250, 320, 280],
-
-      //gradient bg color
-      backgroundColor: (context) => {
-        const bgColorStart = '#1b4cff4d'
-        const bgColorEnd = '#1b4cff00'
-
-        if (!context.chart.chartArea) {
-          return
-        }
-        const {
-          ctx,
-          chartArea: { top, bottom }
-        } = context.chart
-        const gradientBg = ctx.createLinearGradient(0, top, 0, bottom)
-        gradientBg.addColorStop(0, bgColorStart)
-        gradientBg.addColorStop(1, bgColorEnd)
-        return gradientBg
-      },
-
-      //border style
-      borderColor: 'blue',
-      borderWidth: 0.8,
-      hoverBorderWidth: 5,
-
-      //remove point radius
-      pointRadius: 0
-    },
-    {
-      label: 'amount',
-      data: [200, 180, 300, 230, 100, 200, 220, 240, 70],
-
-      //gradient bg color
-      backgroundColor: (context) => {
-        const bgColorStart = '#1b4cff4d'
-        const bgColorEnd = '#1b4cff00'
-
-        if (!context.chart.chartArea) {
-          return
-        }
-        const {
-          ctx,
-          chartArea: { top, bottom }
-        } = context.chart
-        const gradientBg = ctx.createLinearGradient(0, top, 0, bottom)
-        gradientBg.addColorStop(0, bgColorStart)
-        gradientBg.addColorStop(1, bgColorEnd)
-        return gradientBg
-      },
-
-      //border style
-      borderColor: 'blue',
-      borderWidth: 0.8,
-      hoverBorderWidth: 5,
-
-      //remove point radius
-      pointRadius: 0
-    }
-  ]
-})
-
-const chartOptions = reactive({
-  responsive: true,
-  tension: 0.3,
-
-  plugins: {
-    //title for the chart
-    title: {
-      display: true,
-      text: 'Keep Vue Double Series Line Chart'
-    },
-    legend: {
-      display: false
-    },
-    tooltip: {
-      displayColors: false,
-      backgroundColor: '#1B4DFF',
-      borderColor: '#FFFFFF',
-      borderWidth: 0.5,
-      interaction: {
-        intersect: false,
-        mode: 'index'
-      }
-    }
-  },
-
-  // axis config and style
-  scales: {
-    // x axis options and styles
-    x: {
-      border: {
-        color: '#EBEDF1',
-        width: 2
-      },
-      grid: {
-        display: false
-      },
-      ticks: {
-        color: '#afbaca',
-        font: {
-          size: 16
-        }
-      }
-    },
-
-    // x axis options and styles
-    y: {
-      min: 0,
-      max: 600,
-      border: {
-        color: '#EBEDF1',
-        width: 2
-      },
-      grid: {
-        display: false
-      },
-      ticks: {
-        stepSize: 150,
-        color: '#afbaca',
-        font: {
-          size: 16
-        }
-      }
-    }
-  }
-})
-</script>
-<template>
-  <Line id="hoverLine" :options="chartOptions" :data="chartData" :plugins="[hoverLine]" />
-</template>`,
-};
-
-export { defaultLineChartCode, doubleLineChartCode };
diff --git a/components/content/docs/components/pieChart/DefaultPieChart.vue b/components/content/docs/components/pieChart/DefaultPieChart.vue
deleted file mode 100644
index a6bda09..0000000
--- a/components/content/docs/components/pieChart/DefaultPieChart.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<script lang="ts" setup>
-import { ref } from "vue";
-import {
-  ArcElement,
-  CategoryScale,
-  ChartTooltip,
-  KeepChart,
-  Legend,
-  LinearScale,
-  Pie,
-  Title,
-} from "~/src";
-import { defaultPieChartCode } from "./pieChartCode";
-
-KeepChart.register(
-  Title,
-  ChartTooltip,
-  Legend,
-  ArcElement,
-  CategoryScale,
-  LinearScale,
-);
-
-// chart data
-const data = ref({
-  labels: ["June", "March", "April", "May"],
-  datasets: [
-    {
-      data: [130, 200, 100, 400],
-      backgroundColor: ["#1B4DFF"],
-      hoverBackgroundColor: ["#1B4DFF"],
-    },
-  ],
-});
-
-// Define the chart options
-const options = ref({
-  responsive: true,
-  maintainAspectRatio: false,
-
-  plugins: {
-    legend: {
-      display: false,
-    },
-    title: {
-      display: true,
-      text: "Keep Vue Default Pie Chart",
-    },
-    tooltip: {
-      displayColors: false,
-      backgroundColor: "#1B4DFF",
-      borderColor: "#FFFFFF",
-      borderWidth: 1,
-      padding: 10,
-      titleFont: {
-        size: 16,
-      },
-      bodyFont: {
-        size: 16,
-      },
-    },
-  },
-  layout: {
-    padding: {
-      top: 10,
-      bottom: 10,
-    },
-  },
-});
-</script>
-
-<template>
-  <CodeHighlightWithPreview :code="defaultPieChartCode">
-    <div style="width: 100%; height: 400px">
-      <Pie id="default-pie-chart" :data="data" :options="options" />
-    </div>
-  </CodeHighlightWithPreview>
-</template>
diff --git a/components/content/docs/components/pieChart/DoughnutChart.vue b/components/content/docs/components/pieChart/DoughnutChart.vue
deleted file mode 100644
index 5a7ec7e..0000000
--- a/components/content/docs/components/pieChart/DoughnutChart.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<script lang="ts" setup>
-import {
-  ArcElement,
-  CategoryScale,
-  ChartTooltip,
-  Doughnut,
-  KeepChart,
-  Legend,
-  LinearScale,
-  Title,
-} from "~/src";
-import { doughnutChartCode } from "./pieChartCode";
-
-KeepChart.register(
-  Title,
-  ChartTooltip,
-  Legend,
-  ArcElement,
-  CategoryScale,
-  LinearScale,
-);
-
-// chart data
-const data = ref({
-  labels: ["June", "March", "April", "May"],
-  datasets: [
-    {
-      data: [400, 130, 100, 200],
-      backgroundColor: ["#1b4dff", "#11a75c", "#e9b90b", "#5e718d"],
-      hoverBackgroundColor: ["#0f3cd9", "#0a9952", "#d8a800", "#455468"],
-    },
-  ],
-});
-
-// Define the chart options
-const options = ref({
-  responsive: true,
-  maintainAspectRatio: false,
-
-  plugins: {
-    legend: {
-      display: false,
-    },
-    title: {
-      display: true,
-      text: "Keep Vue Doughnut Pie Chart with Color",
-    },
-    tooltip: {
-      displayColors: false,
-      backgroundColor: "#1B4DFF",
-      borderColor: "#FFFFFF",
-      borderWidth: 0.5,
-      padding: 10,
-      titleFont: {
-        size: 16,
-      },
-      bodyFont: {
-        size: 16,
-      },
-    },
-  },
-  layout: {
-    padding: {
-      top: 10,
-      bottom: 10,
-    },
-  },
-});
-</script>
-
-<template>
-  <CodeHighlightWithPreview :code="doughnutChartCode">
-    <div style="width: 100%; height: 400px">
-      <Doughnut id="default-pie-chart" :data="data" :options="options" />
-    </div>
-  </CodeHighlightWithPreview>
-</template>
diff --git a/components/content/docs/components/pieChart/DoughnutChartTwoLevel.vue b/components/content/docs/components/pieChart/DoughnutChartTwoLevel.vue
deleted file mode 100644
index e59bbed..0000000
--- a/components/content/docs/components/pieChart/DoughnutChartTwoLevel.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<script lang="ts" setup>
-import { ref } from "vue";
-import {
-  ArcElement,
-  CategoryScale,
-  ChartTooltip,
-  Doughnut,
-  KeepChart,
-  Legend,
-  LinearScale,
-  Title,
-} from "~/src";
-import { doughnutChartWithTwoLevelCode } from "./pieChartCode";
-
-KeepChart.register(
-  Title,
-  ChartTooltip,
-  Legend,
-  ArcElement,
-  CategoryScale,
-  LinearScale,
-);
-
-// chart data
-const data = ref({
-  labels: ["June", "March", "April", "May"],
-  datasets: [
-    {
-      data: [400, 130, 100, 200],
-      backgroundColor: ["#1b4dff", "#11a75c", "#e9b90b", "#5e718d"],
-      hoverBackgroundColor: ["#0f3cd9", "#0a9952", "#d8a800", "#455468"],
-    },
-    {
-      data: [200, 100, 130, 400],
-      backgroundColor: ["#1C222B", "#B4C4FF", "#7DFEB9", "#FFA19B"],
-      hoverBackgroundColor: ["#1C222B", "#B4C4FF", "#7DFEB9", "#FFA19B"],
-    },
-  ],
-});
-
-// Define the chart options
-const options = ref({
-  responsive: true,
-  maintainAspectRatio: false,
-  cutout: "40%",
-  plugins: {
-    legend: {
-      display: false,
-    },
-    title: {
-      display: true,
-      text: "Keep Vue Doughnut Pie Chart with Color",
-    },
-    tooltip: {
-      displayColors: false,
-      backgroundColor: "#1B4DFF",
-      borderColor: "#FFFFFF",
-      borderWidth: 0.8,
-      padding: 10,
-      titleFont: {
-        size: 16,
-      },
-      bodyFont: {
-        size: 16,
-      },
-    },
-  },
-  layout: {
-    padding: {
-      top: 10,
-      bottom: 10,
-    },
-  },
-});
-</script>
-
-<template>
-  <CodeHighlightWithPreview :code="doughnutChartWithTwoLevelCode">
-    <div style="width: 100%; height: 400px">
-      <Doughnut id="default-pie-chart" :data="data" :options="options" />
-    </div>
-  </CodeHighlightWithPreview>
-</template>
diff --git a/components/content/docs/components/pieChart/PieChartWithColor.vue b/components/content/docs/components/pieChart/PieChartWithColor.vue
deleted file mode 100644
index 9b1d017..0000000
--- a/components/content/docs/components/pieChart/PieChartWithColor.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<script lang="ts" setup>
-import { ref } from "vue";
-import {
-  ArcElement,
-  CategoryScale,
-  ChartTooltip,
-  KeepChart,
-  Legend,
-  LinearScale,
-  Pie,
-  Title,
-} from "~/src";
-import { pieChartWithColor } from "./pieChartCode";
-
-KeepChart.register(
-  Title,
-  ChartTooltip,
-  Legend,
-  ArcElement,
-  CategoryScale,
-  LinearScale,
-);
-
-// chart data
-const data = ref({
-  labels: ["June", "March", "April", "May"],
-  datasets: [
-    {
-      data: [400, 130, 100, 200],
-      backgroundColor: ["#1C222B", "#B4C4FF", "#7DFEB9", "#FFA19B"],
-      hoverBackgroundColor: ["#1C222B", "#B4C4FF", "#7DFEB9", "#FFA19B"],
-    },
-  ],
-});
-
-// Define the chart options
-const options = ref({
-  responsive: true,
-  maintainAspectRatio: false,
-
-  plugins: {
-    legend: {
-      display: false,
-    },
-    title: {
-      display: true,
-      text: "Keep Vue Pie Chart with Color",
-    },
-    tooltip: {
-      displayColors: false,
-      backgroundColor: "#1B4DFF",
-      borderColor: "#FFFFFF",
-      padding: 10,
-      titleFont: {
-        size: 16,
-      },
-      bodyFont: {
-        size: 16,
-      },
-    },
-  },
-  layout: {
-    padding: {
-      top: 10,
-      bottom: 10,
-    },
-  },
-});
-</script>
-
-<template>
-  <CodeHighlightWithPreview :code="pieChartWithColor">
-    <div style="width: 100%; height: 400px">
-      <Pie id="default-pie-chart" :data="data" :options="options" />
-    </div>
-  </CodeHighlightWithPreview>
-</template>
diff --git a/components/content/docs/components/pieChart/pieChartCode.ts b/components/content/docs/components/pieChart/pieChartCode.ts
deleted file mode 100644
index bdf3a6c..0000000
--- a/components/content/docs/components/pieChart/pieChartCode.ts
+++ /dev/null
@@ -1,326 +0,0 @@
-const defaultPieChartCode = {
-  "PieChartComponent.vue": `<script setup>
-import { ref } from "vue";
-import {
-  ArcElement,
-  CategoryScale,
-  ChartTooltip,
-  KeepChart,
-  Legend,
-  LinearScale,
-  Pie,
-  Title,
-} from "keep-vue";
-
-KeepChart.register(
-  Title,
-  ChartTooltip,
-  Legend,
-  ArcElement,
-  CategoryScale,
-  LinearScale,
-);
-
-// chart data
-const data = ref({
-  labels: ["June", "March", "April", "May"],
-  datasets: [
-    {
-      data: [130, 200, 100, 400],
-      backgroundColor: ["#1B4DFF"],
-      hoverBackgroundColor: ["#1B4DFF"],
-    },
-  ],
-});
-
-// Define the chart options
-const options = ref({
-  responsive: true,
-  maintainAspectRatio: false,
-
-  plugins: {
-    legend: {
-      display: false,
-    },
-    title: {
-      display: true,
-      text: "Keep Vue Default Pie Chart",
-    },
-    tooltip: {
-      displayColors: false,
-      backgroundColor: "#1B4DFF",
-      borderColor: "#FFFFFF",
-      borderWidth: 1,
-      padding: 10,
-      titleFont: {
-        size: 16,
-      },
-      bodyFont: {
-        size: 16,
-      },
-    },
-  },
-  layout: {
-    padding: {
-      top: 10,
-      bottom: 10,
-    },
-  },
-});
-</script>
-
-<template>
-  <div style="width: 100%; height: 400px">
-    <Pie id="default-pie-chart" :data="data" :options="options" />
-  </div>
-</template>
-    `,
-};
-
-const pieChartWithColor = {
-  "PieChartComponent.vue": `<script  setup>
-import { ref } from "vue";
-import {
-  ArcElement,
-  CategoryScale,
-  ChartTooltip,
-  KeepChart,
-  Legend,
-  LinearScale,
-  Pie,
-  Title,
-} from "keep-vue";
-
-KeepChart.register(
-  Title,
-  ChartTooltip,
-  Legend,
-  ArcElement,
-  CategoryScale,
-  LinearScale,
-);
-
-// chart data
-const data = ref({
-  labels: ["June", "March", "April", "May"],
-  datasets: [
-    {
-      data: [400, 130, 100, 200],
-      backgroundColor: ["#1C222B", "#B4C4FF", "#7DFEB9", "#FFA19B"],
-      hoverBackgroundColor: ["#1C222B", "#B4C4FF", "#7DFEB9", "#FFA19B"],
-    },
-  ],
-});
-
-// Define the chart options
-const options = ref({
-  responsive: true,
-  maintainAspectRatio: false,
-
-  plugins: {
-    legend: {
-      display: false,
-    },
-    title: {
-      display: true,
-      text: "Keep Vue Pie Chart with Color",
-    },
-    tooltip: {
-      displayColors: false,
-      backgroundColor: "#1B4DFF",
-      borderColor: "#FFFFFF",
-      padding: 10,
-      titleFont: {
-        size: 16,
-      },
-      bodyFont: {
-        size: 16,
-      },
-    },
-  },
-  layout: {
-    padding: {
-      top: 10,
-      bottom: 10,
-    },
-  },
-});
-</script>
-
-<template>
-  <div style="width: 100%; height: 400px">
-    <Pie id="default-pie-chart" :data="data" :options="options" />
-  </div>
-</template>
-    `,
-};
-
-const doughnutChartCode = {
-  "DoughnutChartComponent.vue": `<script  setup>
-import {
-  ArcElement,
-  CategoryScale,
-  ChartTooltip,
-  Doughnut,
-  KeepChart,
-  Legend,
-  LinearScale,
-  Title,
-} from "keep-vue";
-import { ref } from 'vue'
-
-KeepChart.register(
-  Title,
-  ChartTooltip,
-  Legend,
-  ArcElement,
-  CategoryScale,
-  LinearScale,
-);
-
-// chart data
-const data = ref({
-  labels: ["June", "March", "April", "May"],
-  datasets: [
-    {
-      data: [400, 130, 100, 200],
-      backgroundColor: ["#1b4dff", "#11a75c", "#e9b90b", "#5e718d"],
-      hoverBackgroundColor: ["#0f3cd9", "#0a9952", "#d8a800", "#455468"],
-    },
-  ],
-});
-
-// Define the chart options
-const options = ref({
-  responsive: true,
-  maintainAspectRatio: false,
-
-  plugins: {
-    legend: {
-      display: false,
-    },
-    title: {
-      display: true,
-      text: "Keep Vue Doughnut Pie Chart with Color",
-    },
-    tooltip: {
-      displayColors: false,
-      backgroundColor: "#1B4DFF",
-      borderColor: "#FFFFFF",
-      borderWidth: 0.5,
-      padding: 10,
-      titleFont: {
-        size: 16,
-      },
-      bodyFont: {
-        size: 16,
-      },
-    },
-  },
-  layout: {
-    padding: {
-      top: 10,
-      bottom: 10,
-    },
-  },
-});
-</script>
-
-<template>
-  <div style="width: 100%; height: 400px">
-    <Doughnut id="default-pie-chart" :data="data" :options="options" />
-  </div>
-</template>
-    `,
-};
-
-const doughnutChartWithTwoLevelCode = {
-  "DoughnutChart.vue": `<script setup>
-import { ref } from "vue";
-import {
-  ArcElement,
-  CategoryScale,
-  ChartTooltip,
-  Doughnut,
-  KeepChart,
-  Legend,
-  LinearScale,
-  Title,
-} from "keep-vue";
-
-KeepChart.register(
-  Title,
-  ChartTooltip,
-  Legend,
-  ArcElement,
-  CategoryScale,
-  LinearScale,
-);
-
-// chart data
-const data = ref({
-  labels: ["June", "March", "April", "May"],
-  datasets: [
-    {
-      data: [400, 130, 100, 200],
-      backgroundColor: ["#1b4dff", "#11a75c", "#e9b90b", "#5e718d"],
-      hoverBackgroundColor: ["#0f3cd9", "#0a9952", "#d8a800", "#455468"],
-    },
-    {
-      data: [200, 100, 130, 400],
-      backgroundColor: ["#1C222B", "#B4C4FF", "#7DFEB9", "#FFA19B"],
-      hoverBackgroundColor: ["#1C222B", "#B4C4FF", "#7DFEB9", "#FFA19B"],
-    },
-  ],
-});
-
-// Define the chart options
-const options = ref({
-  responsive: true,
-  maintainAspectRatio: false,
-  cutout: "40%",
-  plugins: {
-    legend: {
-      display: false,
-    },
-    title: {
-      display: true,
-      text: "Keep Vue Doughnut Pie Chart with Color",
-    },
-    tooltip: {
-      displayColors: false,
-      backgroundColor: "#1B4DFF",
-      borderColor: "#FFFFFF",
-      borderWidth: 0.8,
-      padding: 10,
-      titleFont: {
-        size: 16,
-      },
-      bodyFont: {
-        size: 16,
-      },
-    },
-  },
-  layout: {
-    padding: {
-      top: 10,
-      bottom: 10,
-    },
-  },
-});
-</script>
-
-<template>
-  <div style="width: 100%; height: 400px">
-    <Doughnut id="default-pie-chart" :data="data" :options="options" />
-  </div>
-</template>
-    `,
-};
-
-export {
-  defaultPieChartCode,
-  doughnutChartCode,
-  doughnutChartWithTwoLevelCode,
-  pieChartWithColor,
-};
diff --git a/content/docs/components/area-chart.md b/content/docs/components/area-chart.md
deleted file mode 100644
index 5316c49..0000000
--- a/content/docs/components/area-chart.md
+++ /dev/null
@@ -1,22 +0,0 @@
----
-title: "Area Chart"
-description: "An Area Chart is a visual way to show data as a line that turns into a colored shape below it. This shape helps you understand how the data changes over time or categories. It's like coloring under a line graph to see where the data is bigger or smaller. People use Area Charts to see trends, compare things, and notice patterns in data. The colored area makes it clear which parts are higher or lower in value."
----
-
-## Default Area Chart
-
-The Area Chart component is used to render an area chart based on the data.
-
-::DefaultAreaChart
-::
-
-## Area Chart With Double Series
-
-The AreaChart component now uses both `"price"` and `"amount"` data for the two series. This creates a chart that shows how both `"price"` and `"amount"` values change over the `"name"` categories, providing insights into both series simultaneously.
-
-::DoubleSeriesAreaChart
-::
-
-## Reference
-
-To learn more about the area chart, please see the documentation of [vue-chartjs](https://vue-chartjs.org/) and [Chart.js](https://www.chartjs.org/)
diff --git a/content/docs/components/bar-chart.md b/content/docs/components/bar-chart.md
deleted file mode 100644
index 7aa79d6..0000000
--- a/content/docs/components/bar-chart.md
+++ /dev/null
@@ -1,22 +0,0 @@
----
-title: "bar Chart"
-description: "The Bar Chart component provides a visual representation of data through bars of varying lengths. It's a graphical representation commonly used to display and compare the values of different categories or groups. The Bar Chart component is highly customizable and can be tailored to fit various data visualization needs."
----
-
-## Default Bar Chart
-
-the default bar chart shows how to populate your bar chart with custom data for both the X and Y axes.
-
-::DefaultBarChart
-::
-
-## Bar Chart with Series
-
-Discover how to create a bar chart with multiple data series for more detailed insights.
-
-::ChartWithDoubleData
-::
-
-## Reference
-
-To learn more about the bar chart, please see the documentation of [vue-chartjs](https://vue-chartjs.org/) and [Chart.js](https://www.chartjs.org/)
diff --git a/content/docs/components/line-chart.md b/content/docs/components/line-chart.md
deleted file mode 100644
index 96bb4d2..0000000
--- a/content/docs/components/line-chart.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: "Line Chart"
-description: "The Line Chart component is a powerful tool for visualizing numerical data trends over time or across categories. With its clear and intuitive presentation, it enables users to easily identify patterns, correlations, and outliers within their datasets. Whether tracking stock prices, monitoring sales performance, or analyzing temperature fluctuations, the Line Chart offers a comprehensive view of data dynamics."
----
-
-## Default Line Chart
-
-The Default Line Chart component showcases a basic line chart, providing a simple yet effective way to visualize data trends over time or across categories.
-::DefaultLineChart
-::
-
-## Double Series Line Chart
-
-The Double Series Line Chart component extends the functionality of the Default Line Chart by allowing the visualization of multiple data series simultaneously. This feature-rich chart is ideal for comparing trends between different datasets.
-
-::DoubleLineLineChart
-::
-
-## Reference
-
-To learn more about the line chart, please see the documentation of [vue-chartjs](https://vue-chartjs.org/) and [Chart.js](https://www.chartjs.org/)
diff --git a/content/docs/components/pie-chart.md b/content/docs/components/pie-chart.md
deleted file mode 100644
index d82cec4..0000000
--- a/content/docs/components/pie-chart.md
+++ /dev/null
@@ -1,36 +0,0 @@
----
-title: "Pic Chart"
-description: "The Pie Chart component offers an intuitive and visually compelling way to represent data distribution. With its circular graph divided into slices, users can easily visualize proportions and percentages of different categories within their dataset. Customizable features such as colors and hierarchical levels enhance the charts versatility, making it an essential tool for data analysis and presentation."
----
-
-## Default Pie Chart
-
-The Default Pie Chart component provides a simple yet effective way to represent data distribution using a circular graph divided into slices. Each slice represents a proportion of the whole dataset, making it easy to visualize relative sizes and percentages.
-
-::DefaultPieChart
-::
-
-## Pie Chart With Color
-
-The Pie Chart With Color component enhances the visual appeal of the default pie chart by adding customizable colors to each slice. This feature allows users to highlight specific data points or categories, improving the chart's readability and aesthetic appeal.
-
-::PieChartWithColor
-::
-
-## Doughnut Pie Chart
-
-The Doughnut Pie Chart provides a hierarchical visualization of data, allowing multiple layers of information to be presented in a nested pie chart format. This format is particularly useful for representing complex data structures where different categories or subcategories need to be displayed in a visually intuitive way.
-
-::DoughnutChart
-::
-
-## Doughnut Multi Level Chart
-
-The Doughnut Multi-Level Chart also known as a Multi-Ring Doughnut Chart allows for the representation of hierarchical data in a layered format. It extends the traditional doughnut chart by adding multiple concentric rings, each representing a different level of data. This type of chart is ideal for showcasing complex data structures with multiple levels of categorization, providing a clear and intuitive visual breakdown.
-
-::DoughnutChartTwoLevel
-::
-
-## Reference
-
-To learn more about the Pic chart and Doughnut chart, please see the documentation of [vue-chartjs](https://vue-chartjs.org/) and [Chart.js](https://www.chartjs.org/)
diff --git a/src/components/Charts/chart.ts b/src/components/Charts/chart.ts
deleted file mode 100644
index dffc9cd..0000000
--- a/src/components/Charts/chart.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import {
-  ArcElement,
-  BarElement,
-  CategoryScale,
-  Tooltip as ChartTooltip,
-  Filler,
-  Chart as KeepChart,
-  Legend,
-  LinearScale,
-  LineElement,
-  PointElement,
-  Title,
-} from "chart.js";
-import { Bar, Doughnut, Line, Pie } from "vue-chartjs";
-
-export {
-  ArcElement,
-  Bar,
-  BarElement,
-  CategoryScale,
-  ChartTooltip,
-  Doughnut,
-  Filler,
-  KeepChart,
-  Legend,
-  Line,
-  LinearScale,
-  LineElement,
-  Pie,
-  PointElement,
-  Title,
-};
diff --git a/src/index.ts b/src/index.ts
index 1c740b2..09defc9 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -61,25 +61,6 @@ export { default as CarouselSlides } from "./components/Carousel/CarouselSlides.
 export { default as CarouselViewport } from "./components/Carousel/CarouselViewport.vue";
 export { default as DotButton } from "./components/Carousel/DotButton.vue";
 
-// Charts
-export {
-  ArcElement,
-  Bar,
-  BarElement,
-  CategoryScale,
-  ChartTooltip,
-  Doughnut,
-  Filler,
-  KeepChart,
-  Legend,
-  Line,
-  LineElement,
-  LinearScale,
-  Pie,
-  PointElement,
-  Title,
-} from "./components/Charts/chart";
-
 //Checkbox component
 export { default as Checkbox } from "./components/Checkbox/Checkbox.vue";
 

From 88f75ecba205b4c3593cd2b740909204f8d77505 Mon Sep 17 00:00:00 2001
From: moshiur01 <mr.moshiur314@gmail.com>
Date: Wed, 13 Nov 2024 17:10:08 +0600
Subject: [PATCH 4/4] Fixed: Same name warning in Accordion and Alert component
 Api file.

---
 .../components/accordion/AccordionApi.vue     | 33 +++++++++++++++++--
 .../docs/components/accordion/accordionApi.ts | 30 -----------------
 .../docs/components/alert/AlertApi.vue        | 26 +++++++++++++--
 .../content/docs/components/alert/alertApi.ts | 23 -------------
 4 files changed, 55 insertions(+), 57 deletions(-)
 delete mode 100644 components/content/docs/components/accordion/accordionApi.ts
 delete mode 100644 components/content/docs/components/alert/alertApi.ts

diff --git a/components/content/docs/components/accordion/AccordionApi.vue b/components/content/docs/components/accordion/AccordionApi.vue
index 2c974ae..ac81c94 100644
--- a/components/content/docs/components/accordion/AccordionApi.vue
+++ b/components/content/docs/components/accordion/AccordionApi.vue
@@ -1,8 +1,37 @@
 <script lang="ts" setup>
 import ComponentApiTable from "~/components/content/ComponentApiTable.vue";
-import { accordionApiData } from "./accordionApi";
+const accordionApiData = [
+  {
+    id: 1,
+    propsName: "default-value",
+    propsType: "string",
+    propsDescription: "Keep selected panel always open.",
+  },
+  {
+    id: 2,
+    propsName: "flush",
+    propsType: "boolean",
+    propsDescription: "Accordion without outer border and and background color",
+    default: "false",
+  },
+  {
+    id: 3,
+    propsName: "type",
+    propsType: ["single", "multiple"],
+    propsDescription:
+      "Determines whether a single or multiple items can be pressed at a time.",
+    default: "single",
+  },
+  {
+    id: 4,
+    propsName: "disabled",
+    propsType: "boolean",
+    propsDescription: "Disable interaction with the accordion.",
+    default: "false",
+  },
+];
 </script>
 
 <template>
-  <ComponentApiTable :data="accordionApiData"></ComponentApiTable>
+  <ComponentApiTable :data="accordionApiData" />
 </template>
diff --git a/components/content/docs/components/accordion/accordionApi.ts b/components/content/docs/components/accordion/accordionApi.ts
deleted file mode 100644
index 1a2d069..0000000
--- a/components/content/docs/components/accordion/accordionApi.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export const accordionApiData = [
-  {
-    id: 1,
-    propsName: "default-value",
-    propsType: "string",
-    propsDescription: "Keep selected panel always open.",
-  },
-  {
-    id: 2,
-    propsName: "flush",
-    propsType: "boolean",
-    propsDescription: "Accordion without outer border and and background color",
-    default: "false",
-  },
-  {
-    id: 3,
-    propsName: "type",
-    propsType: ["single", "multiple"],
-    propsDescription:
-      "Determines whether a single or multiple items can be pressed at a time.",
-    default: "single",
-  },
-  {
-    id: 4,
-    propsName: "disabled",
-    propsType: "boolean",
-    propsDescription: "Disable interaction with the accordion.",
-    default: "false",
-  },
-];
diff --git a/components/content/docs/components/alert/AlertApi.vue b/components/content/docs/components/alert/AlertApi.vue
index 91db0a4..426e7fe 100644
--- a/components/content/docs/components/alert/AlertApi.vue
+++ b/components/content/docs/components/alert/AlertApi.vue
@@ -1,8 +1,30 @@
 <script lang="ts" setup>
 import ComponentApiTable from "~/components/content/ComponentApiTable.vue";
-import { alertApiData } from "./alertApi";
+const alertApiData = [
+  {
+    id: 1,
+    propsName: "color",
+    propsDescription: "The color variant of the alert.",
+    propsType: ["primary", "secondary", "success", "warning", "error"],
+    default: "primary",
+  },
+  {
+    id: 2,
+    propsName: "dismiss",
+    propsDescription: "Enables or disables the dismiss icon.",
+    propsType: "boolean",
+    default: "false",
+  },
+  {
+    id: 3,
+    propsName: "withBg",
+    propsDescription: "Enables background color.",
+    propsType: "boolean",
+    default: "false",
+  },
+];
 </script>
 
 <template>
-  <ComponentApiTable :data="alertApiData"></ComponentApiTable>
+  <ComponentApiTable :data="alertApiData" />
 </template>
diff --git a/components/content/docs/components/alert/alertApi.ts b/components/content/docs/components/alert/alertApi.ts
deleted file mode 100644
index e10b20a..0000000
--- a/components/content/docs/components/alert/alertApi.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export const alertApiData = [
-  {
-    id: 1,
-    propsName: "color",
-    propsDescription: "The color variant of the alert.",
-    propsType: ["primary", "secondary", "success", "warning", "error"],
-    default: "primary",
-  },
-  {
-    id: 2,
-    propsName: "dismiss",
-    propsDescription: "Enables or disables the dismiss icon.",
-    propsType: "boolean",
-    default: "false",
-  },
-  {
-    id: 3,
-    propsName: "withBg",
-    propsDescription: "Enables background color.",
-    propsType: "boolean",
-    default: "false",
-  },
-];