Chart stackblitz demo updates

doc/chart/DoughnutDoc.vue

@@ -39,6 +39,7 @@ export default {
     },
     mounted() {
         this.chartData = this.setChartData();
+        this.chartOptions = this.setChartOptions();
     },
     methods: {
         setChartData() {
@@ -54,6 +55,21 @@ export default {
                     }
                 ]
             };
+        },
+        setChartOptions() {
+            const documentStyle = getComputedStyle(document.documentElement);
+            const textColor = documentStyle.getPropertyValue('--text-color');
+
+            return {
+                plugins: {
+                    legend: {
+                        labels: {
+                            cutout: '60%',
+                            color: textColor
+                        }
+                    }
+                }
+            };
         }
     }
 };
@@ -71,12 +87,11 @@ import { ref, onMounted } from "vue";
 
 onMounted(() => {
     chartData.value = setChartData();
+    chartOptions.value = setChartOptions();
 });
 
 const chartData = ref();
-const chartOptions = ref({
+const chartOptions = ref(null);
-    cutout: '60%'
-});
 
 const setChartData = () => {
     const documentStyle = getComputedStyle(document.body);
@@ -92,6 +107,22 @@ const setChartData = () => {
         ]
     };
 };
+
+const setChartOptions = () => {
+    const documentStyle = getComputedStyle(document.documentElement);
+    const textColor = documentStyle.getPropertyValue('--text-color');
+
+    return {
+        plugins: {
+            legend: {
+                labels: {
+                    cutout: '60%',
+                    color: textColor
+                }
+            }
+        }
+    };
+};
 <\/script>
 `
             }

doc/chart/HorizontalBarDoc.vue

@@ -74,7 +74,7 @@ export default {
                 plugins: {
                     legend: {
                         labels: {
-                            fontColor: textColor
+                            color: textColor
                         }
                     }
                 },
@@ -159,7 +159,7 @@ const setChartOptions = () => {
         plugins: {
             legend: {
                 labels: {
-                    fontColor: textColor
+                    color: textColor
                 }
             }
         },

doc/chart/PieChartDoc.vue

@@ -32,19 +32,12 @@ export default {
     data() {
         return {
             chartData: null,
-            chartOptions: {
+            chartOptions: null
-                plugins: {
-                    legend: {
-                        labels: {
-                            usePointStyle: true
-                        }
-                    }
-                }
-            }
         };
     },
     mounted() {
         this.chartData = this.setChartData();
+        this.chartOptions = this.setChartOptions();
     },
     methods: {
         setChartData() {
@@ -60,6 +53,21 @@ export default {
                     }
                 ]
             };
+        },
+        setChartOptions() {
+            const documentStyle = getComputedStyle(document.documentElement);
+            const textColor = documentStyle.getPropertyValue('--text-color');
+
+            return {
+                plugins: {
+                    legend: {
+                        labels: {
+                            usePointStyle: true,
+                            color: textColor
+                        }
+                    }
+                }
+            };
         }
     }
 };
@@ -77,18 +85,11 @@ import { ref, onMounted } from "vue";
 
 onMounted(() => {
     chartData.value = setChartData();
+    chartOptions.value = setChartOptions();
 });
 
 const chartData = ref();
-const chartOptions = ref({
+const chartOptions = ref();
-    plugins: {
-        legend: {
-            labels: {
-                usePointStyle: true
-            }
-        }
-    }
-});
 
 const setChartData = () => {
     const documentStyle = getComputedStyle(document.body);
@@ -104,6 +105,22 @@ const setChartData = () => {
         ]
     };
 };
+
+const setChartOptions = () => {
+    const documentStyle = getComputedStyle(document.documentElement);
+    const textColor = documentStyle.getPropertyValue('--text-color');
+
+    return {
+        plugins: {
+            legend: {
+                labels: {
+                    usePointStyle: true,
+                    color: textColor
+                }
+            }
+        }
+    };
+};
 <\/script>
 `
             }

doc/chart/VerticalBarDoc.vue

@@ -73,7 +73,7 @@ export default {
                 plugins: {
                     legend: {
                         labels: {
-                            fontColor: textColor
+                            color: textColor
                         }
                     }
                 },
@@ -157,7 +157,7 @@ const setChartOptions = () => {
         plugins: {
             legend: {
                 labels: {
-                    fontColor: textColor
+                    color: textColor
                 }
             }
         },