diff --git a/src/views/chart/BarChartDoc.vue b/src/views/chart/BarChartDoc.vue
index 6132b78a9..b783dabc1 100755
--- a/src/views/chart/BarChartDoc.vue
+++ b/src/views/chart/BarChartDoc.vue
@@ -1,204 +1,35 @@
 <template>
-	<div class="content-section documentation">
-		<TabView>
-			<TabPanel header="Source">
-				<div class="p-d-flex">
-					<LiveEditor name="ChartDemo" :sources="sources"  class="p-ml-auto"/>
-				</div>
-<pre v-code><code><template v-pre>
-&lt;h5&gt;Vertical&lt;/h3&gt;
-&lt;Chart type="bar" :data="basicData" /&gt;
-
-&lt;h3&gt;Horizontal&lt;/h3&gt;
-&lt;Chart type="horizontalBar" :data="basicData" /&gt;
-
-&lt;h3&gt;Multi Axis&lt;/h3&gt;
-&lt;Chart type="bar" :data="multiAxisData" :options="multiAxisOptions"/&gt;
-
-&lt;h3&gt;Stacked&lt;/h3&gt;
-&lt;Chart type="bar" :data="stackedData" :options="stackedOptions"/&gt;
-</template>
-</code></pre>
-
-<pre v-code.script><code>
-export default {
-	data() {
-		return {
-			basicData: {
-				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-				datasets: [
-					{
-						label: 'My First dataset',
-						backgroundColor: '#42A5F5',
-						data: [65, 59, 80, 81, 56, 55, 40]
-					},
-					{
-						label: 'My Second dataset',
-						backgroundColor: '#FFA726',
-						data: [28, 48, 40, 19, 86, 27, 90]
-					}
-				]
-			},
-			multiAxisData: {
-				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-				datasets: [
-					{
-						label: 'Dataset 1',
-						backgroundColor: [
-                            '#EC407A',
-                            '#AB47BC',
-                            '#42A5F5',
-                            '#7E57C2',
-                            '#66BB6A',
-                            '#FFCA28',
-                            '#26A69A'
-						],
-						yAxisID: 'y-axis-1',
-						data: [65, 59, 80, 81, 56, 55, 10]
-					},
-					{
-						label: 'Dataset 2',
-						backgroundColor: '#78909C',
-						yAxisID: 'y-axis-2',
-						data: [28, 48, 40, 19, 86, 27, 90]
-					}
-				]
-			},
-			multiAxisOptions: {
-				responsive: true,
-				tooltips: {
-					mode: 'index',
-					intersect: true
-				},
-				scales: {
-					yAxes: [
-						{
-							type: 'linear',
-							display: true,
-							position: 'left',
-							id: 'y-axis-1',
-							ticks: {
-								min: 0,
-								max: 100
-							}
-						},
-						{
-							type: 'linear',
-							display: true,
-							position: 'right',
-							id: 'y-axis-2',
-							gridLines: {
-								drawOnChartArea: false
-							},
-							ticks: {
-								min: 0,
-								max: 100
-							}
-						}
-					]
-				}
-			},
-			stackedData: {
-				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-				datasets: [
-					{
-						type: 'bar',
-						label: 'Dataset 1',
-						backgroundColor: '#42A5F5',
-						data: [
-							50,
-							25,
-							12,
-							48,
-							90,
-							76,
-							42
-						]
-					},
-					{
-						type: 'bar',
-						label: 'Dataset 2',
-						backgroundColor: '#66BB6A',
-						data: [
-							21,
-							84,
-							24,
-							75,
-							37,
-							65,
-							34
-						]
-					},
-					{
-						type: 'bar',
-						label: 'Dataset 3',
-						backgroundColor: '#FFA726',
-						data: [
-							41,
-							52,
-							24,
-							74,
-							23,
-							21,
-							32
-						]
-					}
-				]
-			},
-			stackedOptions: {
-				tooltips: {
-					mode: 'index',
-					intersect: false
-				},
-				responsive: true,
-				scales: {
-					xAxes: [{
-						stacked: true,
-					}],
-					yAxes: [{
-						stacked: true
-					}]
-				}
-			}
-		}
-	}
-}
-
-</code></pre>
-			</TabPanel>
-		</TabView>
-	</div>
+	<AppDoc name="BarChartDemo" :sources="sources" />
 </template>
 
 <script>
-import LiveEditor from '../liveeditor/LiveEditor';
 export default {
 	data() {
 		return {
 			sources: {
-                'template': {
-                    content: `<template>
-    <div class="layout-content">
-        <div class="content-section implementation">
-            <div class="card">
-                <h5>Vertical</h5>
-                <Chart type="bar" :data="basicData" :options="basicOptions" />
-            </div>
+                'options-api': {
+					tabName: 'Source',
+                    content: `
+<template>
+    <div class="card">
+        <div class="card">
+            <h5>Vertical</h5>
+            <Chart type="bar" :data="basicData" :options="basicOptions" />
+        </div>
 
-            <div class="card">
-                <h5>Horizontal</h5>
-                <Chart type="horizontalBar" :data="basicData" :options="basicOptions" />
-            </div>
+        <div class="card">
+            <h5>Horizontal</h5>
+            <Chart type="horizontalBar" :data="basicData" :options="basicOptions" />
+        </div>
 
-            <div class="card">
-                <h5>Multi Axis</h5>
-                <Chart type="bar" :data="multiAxisData" :options="multiAxisOptions "/>
-            </div>
+        <div class="card">
+            <h5>Multi Axis</h5>
+            <Chart type="bar" :data="multiAxisData" :options="multiAxisOptions "/>
+        </div>
 
-            <div class="card">
-                <h5>Stacked</h5>
-                <Chart type="bar" :data="stackedData" :options="stackedOptions" />
-            </div>
+        <div class="card">
+            <h5>Stacked</h5>
+            <Chart type="bar" :data="stackedData" :options="stackedOptions" />
         </div>
     </div>
 </template>
@@ -305,13 +136,147 @@ export default {
             basicOptions: null
         }
     }
-}`
+}
+<\\/script>`
+
+                },
+				'composition-api': {
+					tabName: 'Composition API',
+                    content: `
+<template>
+    <div class="card">
+        <div class="card">
+            <h5>Vertical</h5>
+            <Chart type="bar" :data="basicData" :options="basicOptions" />
+        </div>
+
+        <div class="card">
+            <h5>Horizontal</h5>
+            <Chart type="horizontalBar" :data="basicData" :options="basicOptions" />
+        </div>
+
+        <div class="card">
+            <h5>Multi Axis</h5>
+            <Chart type="bar" :data="multiAxisData" :options="multiAxisOptions "/>
+        </div>
+
+        <div class="card">
+            <h5>Stacked</h5>
+            <Chart type="bar" :data="stackedData" :options="stackedOptions" />
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+    setup() {
+        const basicData = ref({
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    label: 'My First dataset',
+                    backgroundColor: '#42A5F5',
+                    data: [65, 59, 80, 81, 56, 55, 40]
+                },
+                {
+                    label: 'My Second dataset',
+                    backgroundColor: '#FFA726',
+                    data: [28, 48, 40, 19, 86, 27, 90]
+                }
+            ]
+        });
+        const multiAxisData = ref({
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [{
+                label: 'Dataset 1',
+                backgroundColor: ['#EC407A','#AB47BC','#42A5F5','#7E57C2','#66BB6A','#FFCA28','#26A69A'],
+                yAxisID: 'y-axis-1',
+                data: [65, 59, 80, 81, 56, 55, 10]
+            }, {
+                label: 'Dataset 2',
+                backgroundColor: '#78909C',
+                yAxisID: 'y-axis-2',
+                data: [28, 48, 40, 19, 86, 27, 90]
+            }]
+        });
+        const multiAxisOptions = ref({
+            responsive: true,
+            tooltips: {
+                mode: 'index',
+                intersect: true
+            },
+            scales: {
+                yAxes: [{
+                    type: 'linear',
+                    display: true,
+                    position: 'left',
+                    id: 'y-axis-1',
+                    ticks: {
+                        min: 0,
+                        max: 100
+                    }
+                },
+                {
+                    type: 'linear',
+                    display: true,
+                    position: 'right',
+                    id: 'y-axis-2',
+                    gridLines: {
+                        drawOnChartArea: false
+                    },
+                    ticks: {
+                        min: 0,
+                        max: 100
+                    }
+                }]
+            }
+        });
+        const stackedData = ref({
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [{
+                type: 'bar',
+                label: 'Dataset 1',
+                backgroundColor: '#42A5F5',
+                data: [50,25,12,48,90,76,42]
+            }, {
+                type: 'bar',
+                label: 'Dataset 2',
+                backgroundColor: '#66BB6A',
+                data: [21,84,24,75,37,65,34]
+            }, {
+                type: 'bar',
+                label: 'Dataset 3',
+                backgroundColor: '#FFA726',
+                data: [41,52,24,74,23,21,32]
+            }]
+        });
+        const stackedOptions = ref({
+            tooltips: {
+                mode: 'index',
+                intersect: false
+            },
+            responsive: true,
+            scales: {
+                xAxes: [{
+                    stacked: true,
+                }],
+                yAxes: [{
+                    stacked: true
+                }]
+            }
+        });
+        const basicOptions = ref(null);
+
+		return { basicData, multiAxisData, multiAxisOptions, stackedData, stackedOptions, basicOptions }
+    }
+}
+<\\/script>
+`
                 }
             }
 		}
-	},
-	components: {
-		LiveEditor
 	}
 }
 </script>
\ No newline at end of file
diff --git a/src/views/chart/ComboChartDoc.vue b/src/views/chart/ComboChartDoc.vue
index 92e5ba729..252567c6a 100755
--- a/src/views/chart/ComboChartDoc.vue
+++ b/src/views/chart/ComboChartDoc.vue
@@ -1,103 +1,18 @@
 <template>
-	<div class="content-section documentation">
-		<TabView>
-			<TabPanel header="Source">
-				<div class="p-d-flex">
-					<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto"/>
-				</div>
-<pre v-code><code><template v-pre>
-&lt;Chart type="bar" :data="chartData" :options="chartOptions"/&gt;
-</template>
-</code></pre>
-
-<pre v-code.script><code>
-export default {
-	data() {
-		return {
-			chartData: {
-				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-				datasets: [{
-					type: 'line',
-					label: 'Dataset 1',
-					borderColor: '#42A5F5',
-					borderWidth: 2,
-					fill: false,
-					data: [
-						50,
-						25,
-						12,
-						48,
-						56,
-						76,
-						42
-					]
-				},
-				{
-					type: 'bar',
-					label: 'Dataset 2',
-					backgroundColor: '#66BB6A',
-					data: [
-						21,
-						84,
-						24,
-						75,
-						37,
-						65,
-						34
-					],
-					borderColor: 'white',
-					borderWidth: 2
-				},
-				{
-					type: 'bar',
-					label: 'Dataset 3',
-					backgroundColor: '#FFA726',
-					data: [
-						41,
-						52,
-						24,
-						74,
-						23,
-						21,
-						32
-					]
-				}]
-			},
-			chartOptions: {
-				responsive: true,
-				title: {
-					display: true,
-					text: 'Combo Bar Line Chart'
-				},
-				tooltips: {
-					mode: 'index',
-					intersect: true
-				}
-			}
-		}
-	}
-}
-
-</code></pre>
-			</TabPanel>
-		</TabView>
-	</div>
+	<AppDoc name="ComboChartDemo" :sources="sources" />
 </template>
 
 <script>
-import LiveEditor from '../liveeditor/LiveEditor';
 export default {
 	data() {
 		return {
 			sources: {
-				'template': {
-					content: `<template>
-    <div class="layout-content">
-        <div class="content-section implementation">
-            <div class="card">
-                <Chart type="bar" :data="chartData"/>
-            </div>
-        </div>
+				'options-api': {
+					tabName: 'Source',
+					content: `
+<template>
+    <div class="card">
+        <Chart type="bar" :data="chartData"/>
     </div>
 </template>
 
@@ -130,13 +45,56 @@ export default {
             }
         }
     }
-}`
+}
+<\\/script>`
+
+				},
+				'composition-api': {
+					tabName: 'Composition API',
+					content: `
+<template>
+    <div class="card">
+        <Chart type="bar" :data="chartData"/>
+    </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+    setup() {
+        const chartData = ref({
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [{
+                type: 'line',
+                label: 'Dataset 1',
+                borderColor: '#42A5F5',
+                borderWidth: 2,
+                fill: false,
+                data: [50,25,12,48,56,76,42]
+            }, {
+                type: 'bar',
+                label: 'Dataset 2',
+                backgroundColor: '#66BB6A',
+                data: [21,84,24,75,37,65,34],
+                borderColor: 'white',
+                borderWidth: 2
+            }, {
+                type: 'bar',
+                label: 'Dataset 3',
+                backgroundColor: '#FFA726',
+                data: [41,52,24,74,23,21,32]
+            }]
+        });
+
+		return { chartData }
+    }
+}
+<\\/script>`
+
 				}
 			}
 		}
-	},
-	components: {
-		LiveEditor
 	}
 }
 </script>
\ No newline at end of file
diff --git a/src/views/chart/DoughnutChartDoc.vue b/src/views/chart/DoughnutChartDoc.vue
index e056fd73b..f06747b41 100755
--- a/src/views/chart/DoughnutChartDoc.vue
+++ b/src/views/chart/DoughnutChartDoc.vue
@@ -1,61 +1,18 @@
 <template>
-	<div class="content-section documentation">
-		<TabView>
-			<TabPanel header="Source">
-				<div class="p-d-flex">
-					<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto" />
-				</div>
-<pre v-code><code><template v-pre>
-&lt;Chart type="doughnut" :data="chartData" /&gt;
-</template>
-</code></pre>
-
-<pre v-code.script><code>
-export default {
-	data() {
-		return {
-			chartData: {
-				labels: ['A','B','C'],
-				datasets: [
-					{
-						data: [300, 50, 100],
-						backgroundColor: [
-                            "#42A5F5",
-                            "#66BB6A",
-                            "#FFA726"
-                        ],
-                        hoverBackgroundColor: [
-                            "#64B5F6",
-                            "#81C784",
-                            "#FFB74D"
-                        ]
-					}
-				]
-			}
-		}
-	}
-}
-
-</code></pre>
-			</TabPanel>
-		</TabView>
-	</div>
+	<AppDoc name="DoughnutChartDemo" :sources="sources" />
 </template>
 
 <script>
-import LiveEditor from '../liveeditor/LiveEditor';
 export default {
 	data() {
 		return {
 			sources: {
-				'template': {
-					content: `<template>
-    <div class="layout-content">
-        <div class="content-section implementation">
-            <div class="card">
-                <Chart type="doughnut" :data="chartData" />
-            </div>
-        </div>
+				'options-api': {
+					tabName :'Source',
+					content: `
+<template>
+    <div class="card">
+        <Chart type="doughnut" :data="chartData" />
     </div>
 </template>
 
@@ -75,13 +32,43 @@ export default {
             }
         }
     }
-}`
+}
+<\\/script>
+`
+				},
+				'composition-api': {
+					tabName :'Composition API',
+					content: `
+<template>
+    <div class="card">
+        <Chart type="doughnut" :data="chartData" />
+    </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+    setup() {
+		const chartData = ref({
+		    labels: ['A','B','C'],
+		    datasets: [
+		        {
+		            data: [300, 50, 100],
+		            backgroundColor: ["#FF6384","#36A2EB","#FFCE56"],
+		            hoverBackgroundColor: ["#FF6384","#36A2EB","#FFCE56"]
+		        }
+		    ]
+		});
+
+		return { chartData }
+    }
+}
+<\\/script>
+`
 				}
 			}
 		}
-	},
-	components: {
-		LiveEditor
 	}
 }
 </script>
\ No newline at end of file
diff --git a/src/views/chart/LineChartDoc.vue b/src/views/chart/LineChartDoc.vue
index 12dda48ac..600f534fe 100755
--- a/src/views/chart/LineChartDoc.vue
+++ b/src/views/chart/LineChartDoc.vue
@@ -1,146 +1,30 @@
 <template>
-	<div class="content-section documentation">
-		<TabView>
-			<TabPanel header="Source">
-				<div class="p-d-flex">
-					<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto" />
-				</div>
-<pre v-code><code><template v-pre>
-&lt;h3&gt;Basic&lt;/h3&gt;
-&lt;Chart type="line" :data="basicData" /&gt;
-
-&lt;h3&gt;Multi Axis&lt;/h3&gt;
-&lt;Chart type="line" :data="multiAxisData" :options="multiAxisOptions" /&gt;
-
-&lt;h3&gt;Line Styles&lt;/h3&gt;
-&lt;Chart type="line" :data="lineStylesData" /&gt;
-</template>
-</code></pre>
-
-<pre v-code.script><code>
-export default {
-	data() {
-		return {
-			basicData: {
-				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-				datasets: [
-					{
-						label: 'First Dataset',
-						data: [65, 59, 80, 81, 56, 55, 40],
-						fill: false,
-						borderColor: '#42A5F5'
-					},
-					{
-						label: 'Second Dataset',
-						data: [28, 48, 40, 19, 86, 27, 90],
-						fill: false,
-						borderColor: '#FFA726'
-					}
-				]
-			},
-			multiAxisData: {
-				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-				datasets: [
-					{
-						label: 'Dataset 1',
-						fill: false,
-						borderColor: '#42A5F5',
-						yAxisID: 'y-axis-1',
-						data: [65, 59, 80, 81, 56, 55, 10]
-					},
-					{
-						label: 'Dataset 2',
-						fill: false,
-						backgroundColor: '#00bb7e',
-						borderColor: '#00bb7e',
-						yAxisID: 'y-axis-2',
-						data: [28, 48, 40, 19, 86, 27, 90]
-					}
-				]
-			},
-			multiAxisOptions: {
-				responsive: true,
-				hoverMode: 'index',
-				stacked: false,
-				scales: {
-					yAxes: [
-						{
-							type: 'linear',
-							display: true,
-							position: 'left',
-							id: 'y-axis-1',
-						},
-						{
-							type: 'linear',
-							display: true,
-							position: 'right',
-							id: 'y-axis-2',
-							gridLines: {
-								drawOnChartArea: false
-							}
-						}
-					]
-				}
-			},
-			lineStylesData: {
-				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-				datasets: [
-					{
-						label: 'First Dataset',
-						data: [65, 59, 80, 81, 56, 55, 40],
-						fill: false,
-						borderColor: '#42A5F5'
-					},
-					{
-						label: 'Second Dataset',
-						data: [28, 48, 40, 19, 86, 27, 90],
-						fill: false,
-						borderDash: [5, 5],
-						borderColor: '#66BB6A'
-					},
-					{
-						label: 'Third Dataset',
-						data: [12, 51, 62, 33, 21, 62, 45],
-						fill: true,
-						borderColor: '#FFA726',
-                        backgroundColor: 'rgba(255,167,38,0.2)'
-					}
-				]
-			}
-		}
-	}
-}
-
-</code></pre>
-			</TabPanel>
-		</TabView>
-	</div>
+	<AppDoc name="LineChartDemo" :sources="sources" />
 </template>
 
 <script>
-import LiveEditor from '../liveeditor/LiveEditor';
 export default {
 	data() {
 		return {
 			sources: {
-				'template': {
-					content: `<template>
-    <div class="layout-content">
-        <div class="content-section implementation">
-            <div class="card">
-                <h5>Basic</h5>
-                <Chart type="line" :data="basicData" :options="basicOptions" />
-            </div>
+				'options-api': {
+					tabName: 'Source',
+					content: `
+<template>
+    <div class="card">
+        <div class="card">
+            <h5>Basic</h5>
+            <Chart type="line" :data="basicData" :options="basicOptions" />
+        </div>
 
-            <div class="card">
-                <h5>Multi Axis</h5>
-                <Chart type="line" :data="multiAxisData" :options="multiAxisOptions" />
-            </div>
+        <div class="card">
+            <h5>Multi Axis</h5>
+            <Chart type="line" :data="multiAxisData" :options="multiAxisOptions" />
+        </div>
 
-            <div class="card">
-                <h5>Line Styles</h5>
-                <Chart type="line" :data="lineStylesData" :options="basicOptions" />
-            </div>
+        <div class="card">
+            <h5>Line Styles</h5>
+            <Chart type="line" :data="lineStylesData" :options="basicOptions" />
         </div>
     </div>
 </template>
@@ -231,13 +115,126 @@ export default {
             basicOptions: null
         }
     }
-}`
+}
+<\\/script>
+`
+				},
+				'composition-api': {
+					tabName: 'Composition API',
+					content: `
+<template>
+    <div class="card">
+        <div class="card">
+            <h5>Basic</h5>
+            <Chart type="line" :data="basicData" :options="basicOptions" />
+        </div>
+
+        <div class="card">
+            <h5>Multi Axis</h5>
+            <Chart type="line" :data="multiAxisData" :options="multiAxisOptions" />
+        </div>
+
+        <div class="card">
+            <h5>Line Styles</h5>
+            <Chart type="line" :data="lineStylesData" :options="basicOptions" />
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+    setup() {
+        const basicData =  ref({
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    label: 'First Dataset',
+                    data: [65, 59, 80, 81, 56, 55, 40],
+                    fill: false,
+                    borderColor: '#42A5F5'
+                },
+                {
+                    label: 'Second Dataset',
+                    data: [28, 48, 40, 19, 86, 27, 90],
+                    fill: false,
+                    borderColor: '#FFA726'
+                }
+            ]
+        });
+        const multiAxisData = ref({
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [{
+                label: 'Dataset 1',
+                fill: false,
+                borderColor: '#42A5F5',
+                yAxisID: 'y-axis-1',
+                data: [65, 59, 80, 81, 56, 55, 10]
+            }, {
+                label: 'Dataset 2',
+                fill: false,
+                borderColor: '#00bb7e',
+                yAxisID: 'y-axis-2',
+                data: [28, 48, 40, 19, 86, 27, 90]
+            }]
+        });
+        const multiAxisOptions = ref({
+            responsive: true,
+            hoverMode: 'index',
+            stacked: false,
+            scales: {
+                yAxes: [{
+                    type: 'linear',
+                    display: true,
+                    position: 'left',
+                    id: 'y-axis-1',
+                }, {
+                    type: 'linear',
+                    display: true,
+                    position: 'right',
+                    id: 'y-axis-2',
+                    gridLines: {
+                        drawOnChartArea: false
+                    }
+                }]
+            }
+        });
+        const lineStylesData = ref({
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    label: 'First Dataset',
+                    data: [65, 59, 80, 81, 56, 55, 40],
+                    fill: false,
+                    borderColor: '#42A5F5'
+                },
+                {
+                    label: 'Second Dataset',
+                    data: [28, 48, 40, 19, 86, 27, 90],
+                    fill: false,
+                    borderDash: [5, 5],
+                    borderColor: '#66BB6A'
+                },
+                {
+                    label: 'Third Dataset',
+                    data: [12, 51, 62, 33, 21, 62, 45],
+                    fill: true,
+                    borderColor: '#FFA726',
+                    backgroundColor: 'rgba(255,167,38,0.2)'
+                }
+            ]
+        });
+        const basicOptions = ref(null);
+
+		return { basicData, multiAxisData, multiAxisOptions, lineStylesData, basicOptions }
+    }
+}
+<\\/script>
+`
 				}
 			}
 		}
-	},
-	components:  {
-		LiveEditor
 	}
 }
 </script>
\ No newline at end of file
diff --git a/src/views/chart/PieChartDoc.vue b/src/views/chart/PieChartDoc.vue
index 115b5cf37..0930a6940 100755
--- a/src/views/chart/PieChartDoc.vue
+++ b/src/views/chart/PieChartDoc.vue
@@ -1,61 +1,19 @@
 <template>
-	<div class="content-section documentation">
-		<TabView>
-			<TabPanel header="Source">
-				<div class="p-d-flex">
-					<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto" />
-				</div>
-<pre v-code><code><template v-pre>
-&lt;Chart type="pie" :data="chartData" /&gt;
-</template>
-</code></pre>
-
-<pre v-code.script><code>
-export default {
-	data() {
-		return {
-			chartData: {
-				labels: ['A','B','C'],
-				datasets: [
-					{
-						data: [300, 50, 100],
-						backgroundColor: [
-                            "#42A5F5",
-                            "#66BB6A",
-                            "#FFA726"
-                        ],
-                        hoverBackgroundColor: [
-                            "#64B5F6",
-                            "#81C784",
-                            "#FFB74D"
-                        ]
-					}
-				]
-			}
-		}
-	}
-}
-
-</code></pre>
-			</TabPanel>
-		</TabView>
-	</div>
+	<AppDoc name="PieChartDemo" :sources="sources" />
 </template>
 
 <script>
-import LiveEditor from '../liveeditor/LiveEditor';
+
 export default {
 	data() {
 		return {
 			sources: {
-				'template': {
-					content: `<template>
-    <div class="layout-content">
-        <div class="content-section implementation">
-            <div class="card">
-                <Chart type="pie" :data="chartData" />
-            </div>
-        </div>
+				'options-api': {
+					tabName: 'Source',
+					content: `
+<template>
+    <div class="card">
+        <Chart type="pie" :data="chartData" />
     </div>
 </template>
 
@@ -75,13 +33,43 @@ export default {
             }
         }
     }
-}`
+}
+<\\/script>
+`
+				},
+				'composition-api': {
+					tabName: 'Composition API',
+					content: `
+<template>
+    <div class="card">
+        <Chart type="pie" :data="chartData" />
+    </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+    setup() {
+        const chartData = ref({
+            labels: ['A','B','C'],
+            datasets: [
+                {
+                    data: [300, 50, 100],
+                    backgroundColor: ["#42A5F5","#66BB6A","#FFA726"],
+                    hoverBackgroundColor: ["#64B5F6","#81C784","#FFB74D"]
+                }
+            ]
+        });
+
+		return { chartData }
+    }
+}
+<\\/script>
+`
 				}
 			}
 		}
-	},
-	components: {
-		LiveEditor
 	}
 }
 </script>
\ No newline at end of file
diff --git a/src/views/chart/PolarAreaChartDoc.vue b/src/views/chart/PolarAreaChartDoc.vue
index 67b5d5cae..600dd917e 100755
--- a/src/views/chart/PolarAreaChartDoc.vue
+++ b/src/views/chart/PolarAreaChartDoc.vue
@@ -1,69 +1,18 @@
 <template>
-	<div class="content-section documentation">
-		<TabView>
-			<TabPanel header="Source">
-				<div class="p-d-flex">
-					<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto" />
-				</div>
-<pre v-code><code><template v-pre>
-&lt;Chart type="polarArea" :data="chartData" /&gt;
-</template>
-</code></pre>
-
-<pre v-code.script><code>
-export default {
-	data() {
-		return {
-			chartData: {
-				datasets: [{
-					data: [
-						11,
-						16,
-						7,
-						3,
-						14
-					],
-					backgroundColor: [
-						"#42A5F5",
-                        "#66BB6A",
-                        "#FFA726",
-                        "#26C6DA",
-                        "#7E57C2"
-					],
-					label: 'My dataset'
-				}],
-				labels: [
-					"Red",
-					"Green",
-					"Yellow",
-					"Grey",
-					"Blue"
-				]
-			}
-		}
-	}
-}
-
-</code></pre>
-			</TabPanel>
-		</TabView>
-	</div>
+	<AppDoc name="PolarAreaChartDemo" :sources="sources" />
 </template>
 
 <script>
-import LiveEditor from '../liveeditor/LiveEditor';
 export default {
 	data() {
 		return {
 			sources: {
-				'template': {
-					content: `<template>
-    <div class="layout-content">
-        <div class="content-section implementation">
-            <div class="card">
-                <Chart type="polarArea" :data="chartData" />
-            </div>
-        </div>
+				'options-api': {
+					tabName: 'Source',
+					content: `
+<template>
+    <div class="card">
+        <Chart type="polarArea" :data="chartData" />
     </div>
 </template>
 
@@ -81,13 +30,41 @@ export default {
             }
         }
     }
-}`
+}
+<\\/script>
+`
+				},
+				'composition-api': {
+					tabName: 'Composition API',
+					content: `
+<template>
+    <div class="card">
+        <Chart type="polarArea" :data="chartData" />
+    </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+    setup() {
+        const chartData = ref({
+            datasets: [{
+                data: [11,16,7,3,14],
+                backgroundColor: ["#42A5F5","#66BB6A","#FFA726","#26C6DA","#7E57C2"],
+                label: 'My dataset'
+            }],
+            labels: ["Red","Green","Yellow","Grey","Blue"]
+        });
+
+		return { chartData }
+    }
+}
+<\\/script>
+`
 				}
 			}
 		}
-	},
-	components: {
-		LiveEditor
 	}
 }
 </script>
\ No newline at end of file
diff --git a/src/views/chart/RadarChartDoc.vue b/src/views/chart/RadarChartDoc.vue
index dc539258e..72ba825eb 100755
--- a/src/views/chart/RadarChartDoc.vue
+++ b/src/views/chart/RadarChartDoc.vue
@@ -1,68 +1,18 @@
 <template>
-	<div class="content-section documentation">
-		<TabView>
-			<TabPanel header="Source">
-				<div class="p-d-flex">
-					<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto" />
-				</div>
-<pre v-code><code><template v-pre>
-&lt;Chart type="radar" :data="chartData" /&gt;
-</template>
-</code></pre>
-
-<pre v-code.script><code>
-export default {
-	data() {
-		return {
-			chartData: {
-				labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
-				datasets: [
-					{
-						label: 'My First dataset',
-						backgroundColor: 'rgba(179,181,198,0.2)',
-						borderColor: 'rgba(179,181,198,1)',
-						pointBackgroundColor: 'rgba(179,181,198,1)',
-						pointBorderColor: '#fff',
-						pointHoverBackgroundColor: '#fff',
-						pointHoverBorderColor: 'rgba(179,181,198,1)',
-						data: [65, 59, 90, 81, 56, 55, 40]
-					},
-					{
-						label: 'My Second dataset',
-						backgroundColor: 'rgba(255,99,132,0.2)',
-						borderColor: 'rgba(255,99,132,1)',
-						pointBackgroundColor: 'rgba(255,99,132,1)',
-						pointBorderColor: '#fff',
-						pointHoverBackgroundColor: '#fff',
-						pointHoverBorderColor: 'rgba(255,99,132,1)',
-						data: [28, 48, 40, 19, 96, 27, 100]
-					}
-				]
-			}
-		}
-	}
-}
-
-</code></pre>
-			</TabPanel>
-		</TabView>
-	</div>
+	<AppDoc name="RadarChartDemo" :sources="sources" />
 </template>
 
 <script>
-import LiveEditor from '../liveeditor/LiveEditor';
 export default {
 	data() {
 		return {
 			sources: {
-				'template': {
-					content: `<template>
-    <div class="layout-content">
-        <div class="content-section implementation">
-            <div class="card">
-                <Chart type="radar" :data="chartData" />
-            </div>
-        </div>
+				'options-api': {
+					tabName: 'Source',
+					content: `
+<template>
+    <div class="card">
+        <Chart type="radar" :data="chartData" />
     </div>
 </template>
 
@@ -97,13 +47,58 @@ export default {
             },
         }
     }    
-}`
+}
+<\\/script>
+`
+				},
+				'composition-api': {
+					tabName: 'Composition API',
+					content: `
+<template>
+    <div class="card">
+        <Chart type="radar" :data="chartData" />
+    </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+    setup() {
+        const chartData = ref({
+            labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+            datasets: [
+                {
+                    label: 'My First dataset',
+                    backgroundColor: 'rgba(179,181,198,0.2)',
+                    borderColor: 'rgba(179,181,198,1)',
+                    pointBackgroundColor: 'rgba(179,181,198,1)',
+                    pointBorderColor: '#fff',
+                    pointHoverBackgroundColor: '#fff',
+                    pointHoverBorderColor: 'rgba(179,181,198,1)',
+                    data: [65, 59, 90, 81, 56, 55, 40]
+                },
+                {
+                    label: 'My Second dataset',
+                    backgroundColor: 'rgba(255,99,132,0.2)',
+                    borderColor: 'rgba(255,99,132,1)',
+                    pointBackgroundColor: 'rgba(255,99,132,1)',
+                    pointBorderColor: '#fff',
+                    pointHoverBackgroundColor: '#fff',
+                    pointHoverBorderColor: 'rgba(255,99,132,1)',
+                    data: [28, 48, 40, 19, 96, 27, 100]
+                }
+            ]
+        });
+
+		return { chartData }
+    }    
+}
+<\\/script>
+`
 				}
 			}
 		}
-	},
-	components: {
-		LiveEditor
 	}
 }
 </script>
\ No newline at end of file
diff --git a/src/views/liveeditor/LiveEditor.vue b/src/views/liveeditor/LiveEditor.vue
index 5b9cd150b..63b481e79 100644
--- a/src/views/liveeditor/LiveEditor.vue
+++ b/src/views/liveeditor/LiveEditor.vue
@@ -97,7 +97,8 @@ export default {
                                 '@babel/cli': dependencies['@babel/cli'],
                                 'core-js': dependencies['core-js'],
                                 'vue-router': dependencies['vue-router'],
-                                'quill': dependencies['quill']
+                                'quill': dependencies['quill'],
+                                'chart.js': dependencies['chart.js']
                             },
                             devDependencies: {
                                 '@vue/cli-plugin-babel': dependencies['@vue/cli-plugin-babel'],
@@ -182,9 +183,6 @@ ${services[this.service]}
                 extDependencies['@fullcalendar/interaction'] = "5.4.0";
                 extDependencies['@fullcalendar/timegrid'] = "5.4.0";
             }
-            if(name === 'ChartDemo') {
-                extDependencies['chart.js'] = "2.7.3";
-            }
 
             element += `import ${name} from "./${name}.vue"`;
 
@@ -206,6 +204,7 @@ import Calendar from 'primevue/calendar';
 import Card from 'primevue/card';
 import CascadeSelect from 'primevue/cascadeselect';
 import Carousel from 'primevue/carousel';
+import Chart from 'primevue/chart';
 import Checkbox from 'primevue/checkbox';
 import Chip from 'primevue/chip';
 import Chips from 'primevue/chips';
@@ -306,6 +305,7 @@ app.component('Calendar', Calendar);
 app.component('Card', Card);
 app.component('Carousel', Carousel);
 app.component('CascadeSelect', CascadeSelect);
+app.component('Chart', Chart);
 app.component('Checkbox', Checkbox);
 app.component('Chip', Chip);
 app.component('Chips', Chips);