diff --git a/package.json b/package.json
index 816f2ccd0..e73bc9857 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
     "@vuelidate/validators": "^2.0.0-alpha.12",
     "axios": "^0.19.0",
     "babel-eslint": "^10.1.0",
-    "chart.js": "2.7.3",
+    "chart.js": "3.3.2",
     "codesandbox": "2.1.14",
     "core-js": "^3.6.5",
     "eslint": "^6.7.2",
diff --git a/src/components/chart/Chart.vue b/src/components/chart/Chart.vue
index fef11e4bc..cf37af230 100755
--- a/src/components/chart/Chart.vue
+++ b/src/components/chart/Chart.vue
@@ -44,7 +44,7 @@ export default {
     },
     methods: {
         initChart() {
-            import('chart.js').then((module) => {
+            import('chart.js/auto').then((module) => {
                 if (module && module.default) {
                     this.chart = new module.default(this.$refs.canvas, {
                         type: this.type,
@@ -73,8 +73,8 @@ export default {
         },
         onCanvasClick(event) {
             if (this.chart) {
-                const element = this.chart.getElementAtEvent(event);
-                const dataset = this.chart.getDatasetAtEvent(event);
+                const element = this.chart.getElementsAtEventForMode(event, 'nearest', { intersect: true }, false);
+                const dataset = this.chart.getElementsAtEventForMode(event, 'dataset', { intersect: true }, false);
 
                 if (element && element[0] && dataset) {
                     this.$emit('select', {originalEvent: event, element: element[0], dataset: dataset});
diff --git a/src/views/chart/BarChartDemo.vue b/src/views/chart/BarChartDemo.vue
index ab3728009..48c3db84c 100755
--- a/src/views/chart/BarChartDemo.vue
+++ b/src/views/chart/BarChartDemo.vue
@@ -16,7 +16,7 @@
 
             <div class="card">
                 <h5>Horizontal</h5>
-                <Chart type="horizontalBar" :data="basicData" :options="basicOptions" />
+                <Chart type="bar" :data="basicData" :options="horizontalOptions" />
             </div>
 
             <div class="card">
@@ -52,6 +52,9 @@ export default {
         if (this.isDarkTheme()) {
             this.applyDarkTheme();
         }
+        else {
+            this.applyLightTheme();
+        }
     },
     beforeUnmount() {
         EventBus.off('change-theme', this.themeChangeListener);
@@ -86,47 +89,15 @@ export default {
                         '#FFCA28',
                         '#26A69A'
                     ],
-                    yAxisID: 'y-axis-1',
+                    yAxisID: 'y',
                     data: [65, 59, 80, 81, 56, 55, 10]
                 }, {
                     label: 'Dataset 2',
                     backgroundColor: '#78909C',
-                    yAxisID: 'y-axis-2',
+                    yAxisID: 'y1',
                     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: [{
@@ -170,22 +141,10 @@ export default {
                     ]
                 }]
             },
-            stackedOptions: {
-                tooltips: {
-                    mode: 'index',
-                    intersect: false
-                },
-                responsive: true,
-                scales: {
-                    xAxes: [{
-                        stacked: true,
-                    }],
-                    yAxes: [{
-                        stacked: true
-                    }]
-                }
-            },
-            basicOptions: null
+            basicOptions: null,
+            horizontalOptions: null,
+            multiAxisOptions: null,
+            stackedOptions: null
         }
     },
     methods: {
@@ -194,145 +153,289 @@ export default {
         },
         applyLightTheme() {
             this.basicOptions = {
-                legend: {
-                    labels: {
-                        fontColor: '#495057'
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
                     }
                 },
                 scales: {
-                    xAxes: [{
+                    x: {
                         ticks: {
-                            fontColor: '#495057'
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
                         }
-                    }],
-                    yAxes: [{
-                        ticks: {
-                            fontColor: '#495057'
-                        }
-                    }]
-                }
-            };
-
-            this.stackedOptions.scales.xAxes[0].ticks = {
-                fontColor: '#495057'
-            };
-            this.stackedOptions.scales.xAxes[0].gridLines = {
-                color: '#ebedef'
-            };
-            this.stackedOptions.scales.yAxes[0].ticks = {
-                fontColor: '#495057'
-            };
-            this.stackedOptions.scales.yAxes[0].gridLines = {
-                color: '#ebedef'
-            };
-            this.stackedOptions.legend = {
-                labels:  {
-                    fontColor: '#495057'
-                }
-            };
-            this.stackedOptions = {...this.stackedOptions};
-
-            this.multiAxisOptions.scales.xAxes = [{
-                    ticks: {
-                        fontColor: '#495057'
                     },
-                    gridLines: {
-                        color: '#ebedef'
+                    y: {
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
                     }
                 }
-            ];
-            this.multiAxisOptions.scales.yAxes[0].ticks = {
-                fontColor: '#495057'
             };
-            this.multiAxisOptions.scales.yAxes[0].gridLines = {
-                color: '#ebedef'
-            };
-            this.multiAxisOptions.scales.yAxes[1].ticks = {
-                fontColor: '#495057'
-            };
-            this.multiAxisOptions.scales.yAxes[1].gridLines = {
-                color: '#ebedef'
-            };
-            this.multiAxisOptions.legend = {
-                labels:  {
-                    fontColor: '#495057'
+
+            this.horizontalOptions = {
+                indexAxis: 'y',
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
+                    }
+                },
+                scales: {
+                    x: {
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    },
+                    y: {
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    }
+                }
+            };
+
+            this.multiAxisOptions = {
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: true
+                    }
+                },
+                scales: {
+                    x: {
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    },
+                    y: {
+                        type: 'linear',
+                        display: true,
+                        position: 'left',
+                        ticks: {
+                            min: 0,
+                            max: 100,
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    },
+                    y1: {
+                        type: 'linear',
+                        display: true,
+                        position: 'right',
+                        grid: {
+                            drawOnChartArea: false,
+                            color: '#ebedef'
+                        },
+                        ticks: {
+                            min: 0,
+                            max: 100,
+                            color: '#495057'
+                        }
+                    }
+                }
+            };
+
+            this.stackedOptions = {
+                plugins: {
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    },
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
+                    }
+                },
+                scales: {
+                    x: {
+                        stacked: true,
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    },
+                    y: {
+                        stacked: true,
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    }
                 }
             };
-            this.multiAxisOptions = {...this.multiAxisOptions};
         },
         applyDarkTheme() {
             this.basicOptions = {
-                legend: {
-                    labels: {
-                        fontColor: '#ebedef'
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#ebedef'
+                        }
                     }
                 },
                 scales: {
-                    xAxes: [{
+                    x: {
                         ticks: {
-                            fontColor: '#ebedef'
+                            color: '#ebedef'
                         },
-                        gridLines: {
+                        grid: {
                             color: 'rgba(255,255,255,0.2)'
                         }
-                    }],
-                    yAxes: [{
-                        ticks: {
-                            fontColor: '#ebedef'
-                        },
-                        gridLines: {
-                            color: 'rgba(255,255,255,0.2)'
-                        }
-                    }]
-                }
-            };
-
-            this.stackedOptions.scales.xAxes[0].ticks = {
-                fontColor: '#ebedef'
-            };
-            this.stackedOptions.scales.xAxes[0].gridLines = {
-                color: 'rgba(255,255,255,0.2)'
-            };
-            this.stackedOptions.scales.yAxes[0].ticks = {
-                fontColor: '#ebedef'
-            };
-            this.stackedOptions.scales.yAxes[0].gridLines = {
-                color: 'rgba(255,255,255,0.2)'
-            };
-            this.stackedOptions.legend = {
-                labels:  {
-                    fontColor: '#ebedef'
-                }
-            };
-            this.stackedOptions = {...this.stackedOptions};
-
-            this.multiAxisOptions.scales.xAxes = [{
-                    ticks: {
-                        fontColor: '#ebedef'
                     },
-                    gridLines: {
-                        color: 'rgba(255,255,255,0.2)'
+                    y: {
+                        ticks: {
+                            color: '#ebedef'
+                        },
+                        grid: {
+                            color: 'rgba(255,255,255,0.2)'
+                        }
                     }
                 }
-            ];
-            this.multiAxisOptions.scales.yAxes[0].ticks = {
-                fontColor: '#ebedef'
             };
-            this.multiAxisOptions.scales.yAxes[0].gridLines = {
-                color: 'rgba(255,255,255,0.2)'
-            };
-            this.multiAxisOptions.scales.yAxes[1].ticks = {
-                fontColor: '#ebedef'
-            };
-            this.multiAxisOptions.scales.yAxes[1].gridLines = {
-                color: 'rgba(255,255,255,0.2)'
-            };
-            this.multiAxisOptions.legend = {
-                labels:  {
-                    fontColor: '#ebedef'
+
+            this.horizontalOptions = {
+                indexAxis: 'y',
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#ebedef'
+                        }
+                    }
+                },
+                scales: {
+                    x: {
+                        ticks: {
+                            color: '#ebedef'
+                        },
+                        grid: {
+                            color: 'rgba(255,255,255,0.2)'
+                        }
+                    },
+                    y: {
+                        ticks: {
+                            color: '#ebedef'
+                        },
+                        grid: {
+                            color: 'rgba(255,255,255,0.2)'
+                        }
+                    }
                 }
             };
-            this.multiAxisOptions = {...this.multiAxisOptions};
+
+            this.multiAxisOptions = {
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#ebedef'
+                        }
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: true
+                    }
+                },
+                scales: {
+                    x: {
+                        ticks: {
+                            color: '#ebedef'
+                        },
+                        grid: {
+                            color: 'rgba(255,255,255,0.2)'
+                        }
+                    },
+                    y: {
+                        type: 'linear',
+                        display: true,
+                        position: 'left',
+                        ticks: {
+                            min: 0,
+                            max: 100,
+                            color: '#ebedef'
+                        },
+                        grid: {
+                            color: 'rgba(255,255,255,0.2)'
+                        }
+                    },
+                    y1: {
+                        type: 'linear',
+                        display: true,
+                        position: 'right',
+                        grid: {
+                            drawOnChartArea: false,
+                            color: 'rgba(255,255,255,0.2)'
+                        },
+                        ticks: {
+                            min: 0,
+                            max: 100,
+                            color: '#ebedef'
+                        }
+                    }
+                }
+            };
+
+            this.stackedOptions = {
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#ebedef'
+                        }
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    }
+                },
+                scales: {
+                    x: {
+                        stacked: true,
+                        ticks: {
+                            color: '#ebedef'
+                        },
+                        grid: {
+                            color: 'rgba(255,255,255,0.2)'
+                        }
+                    },
+                    y: {
+                        stacked: true,
+                        ticks: {
+                            color: '#ebedef'
+                        },
+                        grid: {
+                            color: 'rgba(255,255,255,0.2)'
+                        }
+                    }
+                }
+            };            
         }
     },
     components: {
diff --git a/src/views/chart/BarChartDoc.vue b/src/views/chart/BarChartDoc.vue
index 217eae0fc..ea6a1f715 100755
--- a/src/views/chart/BarChartDoc.vue
+++ b/src/views/chart/BarChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" github="chart/BarChartDemo.vue"/>
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '3.3.2'}" component="Chart" github="chart/BarChartDemo.vue"/>
 </template>
 
 <script>
@@ -19,7 +19,7 @@ export default {
 
         <div class="card">
             <h5>Horizontal</h5>
-            <Chart type="horizontalBar" :data="basicData" :options="basicOptions" />
+            <Chart type="bar" :data="basicData" :options="horizontalOptions" />
         </div>
 
         <div class="card">
@@ -67,38 +67,6 @@ export default {
                     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: [{
@@ -118,22 +86,144 @@ export default {
                     data: [41,52,24,74,23,21,32]
                 }]
             },
-            stackedOptions: {
-                tooltips: {
-                    mode: 'index',
-                    intersect: false
+            basicOptions: {
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
+                    }
                 },
-                responsive: true,
                 scales: {
-                    xAxes: [{
-                        stacked: true,
-                    }],
-                    yAxes: [{
-                        stacked: true
-                    }]
+                    x: {
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    },
+                    y: {
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    }
                 }
             },
-            basicOptions: null
+            horizontalOptions: {
+                indexAxis: 'y',
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
+                    }
+                },
+                scales: {
+                    x: {
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    },
+                    y: {
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    }
+                }
+            },
+            multiAxisOptions: {
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: true
+                    }
+                },
+                scales: {
+                    x: {
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    },
+                    y: {
+                        type: 'linear',
+                        display: true,
+                        position: 'left',
+                        ticks: {
+                            min: 0,
+                            max: 100,
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    },
+                    y1: {
+                        type: 'linear',
+                        display: true,
+                        position: 'right',
+                        grid: {
+                            drawOnChartArea: false,
+                            color: '#ebedef'
+                        },
+                        ticks: {
+                            min: 0,
+                            max: 100,
+                            color: '#495057'
+                        }
+                    }
+                }
+            },
+            stackedOptions: {
+                plugins: {
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    },
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
+                    }
+                },
+                scales: {
+                    x: {
+                        stacked: true,
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    },
+                    y: {
+                        stacked: true,
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    }
+                }
+            }
         }
     }
 }
@@ -152,7 +242,7 @@ export default {
 
         <div class="card">
             <h5>Horizontal</h5>
-            <Chart type="horizontalBar" :data="basicData" :options="basicOptions" />
+            <Chart type="bar" :data="basicData" :options="horizontalOptions" />
         </div>
 
         <div class="card">
@@ -187,6 +277,7 @@ export default {
                 }
             ]
         });
+
         const multiAxisData = ref({
             labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
             datasets: [{
@@ -201,38 +292,7 @@ export default {
                 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: [{
@@ -252,24 +312,159 @@ export default {
                 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(
+            {
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
+                    }
+                },
+                scales: {
+                    x: {
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    },
+                    y: {
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    }
+                }
             }
-        });
-        const basicOptions = ref(null);
+        );
 
-		return { basicData, multiAxisData, multiAxisOptions, stackedData, stackedOptions, basicOptions }
+        const horizontalOptions = ref(
+            {
+                indexAxis: 'y',
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
+                    }
+                },
+                scales: {
+                    x: {
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    },
+                    y: {
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    }
+                }
+            }
+        );
+
+        const multiAxisOptions = ref(
+            {
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: true
+                    }
+                },
+                scales: {
+                    x: {
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    },
+                    y: {
+                        type: 'linear',
+                        display: true,
+                        position: 'left',
+                        ticks: {
+                            min: 0,
+                            max: 100,
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    },
+                    y1: {
+                        type: 'linear',
+                        display: true,
+                        position: 'right',
+                        grid: {
+                            drawOnChartArea: false,
+                            color: '#ebedef'
+                        },
+                        ticks: {
+                            min: 0,
+                            max: 100,
+                            color: '#495057'
+                        }
+                    }
+                }
+            }
+        );
+
+        const stackedOptions = ref(
+            {
+                plugins: {
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    },
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
+                    }
+                },
+                scales: {
+                    x: {
+                        stacked: true,
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    },
+                    y: {
+                        stacked: true,
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    }
+                }
+            }
+        );
+
+		return { basicData, multiAxisData, stackedData, 
+            basicOptions, horizontalOptions, multiAxisOptions, stackedOptions }
     }
 }
 <\\/script>
diff --git a/src/views/chart/ChartDemo.vue b/src/views/chart/ChartDemo.vue
index 48eaacdc6..1d8744158 100755
--- a/src/views/chart/ChartDemo.vue
+++ b/src/views/chart/ChartDemo.vue
@@ -8,28 +8,6 @@
 import ChartDoc from './ChartDoc';
 
 export default {
-    data() {
-        return {
-            chartModel: {
-                labels: ['A','B','C'],
-                datasets: [
-                    {
-                        data: [300, 50, 100],
-                        backgroundColor: [
-                            "#FF6384",
-                            "#36A2EB",
-                            "#FFCE56"
-                        ],
-                        hoverBackgroundColor: [
-                            "#FF6384",
-                            "#36A2EB",
-                            "#FFCE56"
-                        ]
-                    }
-                ]
-            }
-        }
-    },
     components: {
         'ChartDoc': ChartDoc
     }
diff --git a/src/views/chart/ChartDoc.vue b/src/views/chart/ChartDoc.vue
index ab45d4358..5d1aa4ae1 100755
--- a/src/views/chart/ChartDoc.vue
+++ b/src/views/chart/ChartDoc.vue
@@ -4,7 +4,8 @@
         <p>Chart components are based on <a href="https://www.chartjs.org/">Charts.js</a>, an open source HTML5 based charting library.</p>
 
         <h5>Getting Started</h5>
-        <p>To begin with, charts.js package needs to be installed in your project.</p>
+        <p>Chart component is a wrapper around on <a href="https://www.chartjs.org/docs/3.3.2/">Chart.js 3.3.2+</a> so chart.js needs to be included in your project.
+        For a complete documentation and samples please refer to the <a href="https://www.chartjs.org/">chart.js website</a>.</p>
  <pre v-code.script><code>
 npm install chart.js --save
 
diff --git a/src/views/chart/ComboChartDemo.vue b/src/views/chart/ComboChartDemo.vue
index 352b4fca0..99457fe6e 100755
--- a/src/views/chart/ComboChartDemo.vue
+++ b/src/views/chart/ComboChartDemo.vue
@@ -89,17 +89,7 @@ export default {
                     ]
                 }]
             },
-            chartOptions: {
-                responsive: true,
-                title: {
-                    display: true,
-                    text: 'Combo Bar Line Chart'
-                },
-                tooltips: {
-                    mode: 'index',
-                    intersect: true
-                }
-            }
+            chartOptions: this.isDarkTheme() ? this.applyDarkTheme() : this.applyLightTheme()
         }
     },
     methods: {
@@ -108,49 +98,59 @@ export default {
         },
         applyLightTheme() {
             this.chartOptions = {
-                legend: {
-                    labels: {
-                        fontColor: '#495057'
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
                     }
                 },
                 scales: {
-                    xAxes: [{
+                    x: {
                         ticks: {
-                            fontColor: '#495057'
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
                         }
-                    }],
-                    yAxes: [{
+                    },
+                    y: {
                         ticks: {
-                            fontColor: '#495057'
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
                         }
-                    }]
+                    }
                 }
             }
         },
         applyDarkTheme() {
             this.chartOptions = {
-                legend: {
-                    labels: {
-                        fontColor: '#ebedef'
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#ebedef'
+                        }
                     }
                 },
                 scales: {
-                    xAxes: [{
+                    x: {
                         ticks: {
-                            fontColor: '#ebedef'
+                            color: '#ebedef'
                         },
-                        gridLines: {
+                        grid: {
                             color: 'rgba(255,255,255,0.2)'
                         }
-                    }],
-                    yAxes: [{
+                    },
+                    y: {
                         ticks: {
-                            fontColor: '#ebedef'
+                            color: '#ebedef'
                         },
-                        gridLines: {
+                        grid: {
                             color: 'rgba(255,255,255,0.2)'
                         }
-                    }]
+                    }
                 }
             };
         }
diff --git a/src/views/chart/ComboChartDoc.vue b/src/views/chart/ComboChartDoc.vue
index a2394806c..0343ffc0f 100755
--- a/src/views/chart/ComboChartDoc.vue
+++ b/src/views/chart/ComboChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" github="chart/ComboChartDemo.vue"/>
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '3.3.2'}" component="Chart" github="chart/ComboChartDemo.vue"/>
 </template>
 
 <script>
@@ -12,7 +12,7 @@ export default {
 					content: `
 <template>
     <div>
-        <Chart type="bar" :data="chartData"/>
+        <Chart type="bar" :data="chartData" :options="chartOptions" />
     </div>
 </template>
 
@@ -42,6 +42,33 @@ export default {
                     backgroundColor: '#FFA726',
                     data: [41,52,24,74,23,21,32]
                 }]
+            },
+            chartOptions: {
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
+                    }
+                },
+                scales: {
+                    x: {
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    },
+                    y: {
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    }
+                }
             }
         }
     }
@@ -54,7 +81,7 @@ export default {
 					content: `
 <template>
     <div>
-        <Chart type="bar" :data="chartData"/>
+        <Chart type="bar" :data="chartData" :options="chartOptions" />
     </div>
 </template>
 
@@ -87,7 +114,35 @@ export default {
             }]
         });
 
-		return { chartData }
+        const chartOptions = ref({
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
+                    }
+                },
+                scales: {
+                    x: {
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    },
+                    y: {
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    }
+                }
+            });
+
+		return { chartData, chartOptions }
     }
 }
 <\\/script>`
diff --git a/src/views/chart/DoughnutChartDemo.vue b/src/views/chart/DoughnutChartDemo.vue
index d9d673635..1ccb21cb6 100755
--- a/src/views/chart/DoughnutChartDemo.vue
+++ b/src/views/chart/DoughnutChartDemo.vue
@@ -9,8 +9,8 @@
         </div>
 
         <div class="content-section implementation">
-            <div class="card">
-                <Chart type="doughnut" :data="chartData" :options="chartOptions" />
+            <div class="card p-d-flex p-jc-center">
+                <Chart type="doughnut" :data="chartData" :options="chartOptions" style="width: 40%" />
             </div>
         </div>
 
@@ -65,18 +65,22 @@ export default {
         },
         getLightTheme() {
             return {
-                legend: {
-                    labels: {
-                        fontColor: '#495057'
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
                     }
                 }
             }
         },
         getDarkTheme() {
             return {
-                legend: {
-                    labels: {
-                        fontColor: '#ebedef'
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#ebedef'
+                        }
                     }
                 }
             }
diff --git a/src/views/chart/DoughnutChartDoc.vue b/src/views/chart/DoughnutChartDoc.vue
index 0126ce168..a744a371d 100755
--- a/src/views/chart/DoughnutChartDoc.vue
+++ b/src/views/chart/DoughnutChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" github="chart/DoughnutChartDemo.vue" />
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '3.3.2'}" component="Chart" github="chart/DoughnutChartDemo.vue" />
 </template>
 
 <script>
@@ -12,7 +12,7 @@ export default {
 					content: `
 <template>
     <div>
-        <Chart type="doughnut" :data="chartData" />
+        <Chart type="doughnut" :data="chartData" :options="lightOptions" />
     </div>
 </template>
 
@@ -29,7 +29,16 @@ export default {
                         hoverBackgroundColor: ["#FF6384","#36A2EB","#FFCE56"]
                     }
                 ]
-            }
+            },
+			lightOptions: {
+				plugins: {
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
+                    }
+                }
+			}
         }
     }
 }
@@ -41,7 +50,7 @@ export default {
 					content: `
 <template>
     <div>
-        <Chart type="doughnut" :data="chartData" />
+        <Chart type="doughnut" :data="chartData" :options="lightOptions" />
     </div>
 </template>
 
@@ -61,7 +70,17 @@ export default {
 		    ]
 		});
 
-		return { chartData }
+		const lightOptions = ref({
+			plugins: {
+                legend: {
+                    labels: {
+                        color: '#495057'
+                    }
+                }
+            }
+		});
+
+		return { chartData, lightOptions }
     }
 }
 <\\/script>
diff --git a/src/views/chart/LineChartDemo.vue b/src/views/chart/LineChartDemo.vue
index 4ffc64f4e..23d1f6190 100755
--- a/src/views/chart/LineChartDemo.vue
+++ b/src/views/chart/LineChartDemo.vue
@@ -47,6 +47,9 @@ export default {
         if (this.isDarkTheme()) {
             this.applyDarkTheme();
         }
+        else {
+            this.applyLightTheme();
+        }
     },
     beforeUnmount() {
         EventBus.off('change-theme', this.themeChangeListener);
@@ -60,13 +63,15 @@ export default {
                         label: 'First Dataset',
                         data: [65, 59, 80, 81, 56, 55, 40],
                         fill: false,
-                        borderColor: '#42A5F5'
+                        borderColor: '#42A5F5',
+                        tension: .4
                     },
                     {
                         label: 'Second Dataset',
                         data: [28, 48, 40, 19, 86, 27, 90],
                         fill: false,
-                        borderColor: '#FFA726'
+                        borderColor: '#FFA726',
+                        tension: .4
                     }
                 ]
             },
@@ -76,37 +81,18 @@ export default {
                     label: 'Dataset 1',
                     fill: false,
                     borderColor: '#42A5F5',
-                    yAxisID: 'y-axis-1',
+                    yAxisID: 'y',
+                    tension: .4,
                     data: [65, 59, 80, 81, 56, 55, 10]
                 }, {
                     label: 'Dataset 2',
                     fill: false,
                     borderColor: '#00bb7e',
-                    yAxisID: 'y-axis-2',
+                    yAxisID: 'y1',
+                    tension: .4,
                     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: [
@@ -114,6 +100,7 @@ export default {
                         label: 'First Dataset',
                         data: [65, 59, 80, 81, 56, 55, 40],
                         fill: false,
+                        tension: .4,
                         borderColor: '#42A5F5'
                     },
                     {
@@ -121,6 +108,7 @@ export default {
                         data: [28, 48, 40, 19, 86, 27, 90],
                         fill: false,
                         borderDash: [5, 5],
+                        tension: .4,
                         borderColor: '#66BB6A'
                     },
                     {
@@ -128,11 +116,13 @@ export default {
                         data: [12, 51, 62, 33, 21, 62, 45],
                         fill: true,
                         borderColor: '#FFA726',
+                        tension: .4,
                         backgroundColor: 'rgba(255,167,38,0.2)'
                     }
                 ]
             },
-            basicOptions: null
+            basicOptions: null,
+            multiAxisOptions: null
         }
     },
     methods: {
@@ -141,107 +131,149 @@ export default {
         },
         applyLightTheme() {
             this.basicOptions = {
-                legend: {
-                    labels: {
-                        fontColor: '#495057'
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
                     }
                 },
                 scales: {
-                    xAxes: [{
+                    x: {
                         ticks: {
-                            fontColor: '#495057'
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
                         }
-                    }],
-                    yAxes: [{
+                    },
+                    y: {
                         ticks: {
-                            fontColor: '#495057'
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
                         }
-                    }]
+                    }
                 }
             };
 
-            this.multiAxisOptions.scales.xAxes = [{
-                    ticks: {
-                        fontColor: '#495057'
+            this.multiAxisOptions = {
+                stacked: false,
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
+                    }
+                },
+                scales: {
+                    x: {
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
                     },
-                    gridLines: {
-                        color: '#ebedef'
+                    y: {
+                        type: 'linear',
+                        display: true,
+                        position: 'left',
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    },
+                    y1: {
+                        type: 'linear',
+                        display: true,
+                        position: 'right',
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            drawOnChartArea: false,
+                            color: '#ebedef'
+                        }
                     }
                 }
-            ];
-            this.multiAxisOptions.scales.yAxes[0].ticks = {
-                fontColor: '#495057'
             };
-            this.multiAxisOptions.scales.yAxes[0].gridLines = {
-                color: '#ebedef'
-            };
-            this.multiAxisOptions.scales.yAxes[1].ticks = {
-                fontColor: '#495057'
-            };
-            this.multiAxisOptions.scales.yAxes[1].gridLines = {
-                color: '#ebedef'
-            };
-            this.multiAxisOptions.legend = {
-                labels:  {
-                    fontColor: '#495057'
-                }
-            };
-            this.multiAxisOptions = {...this.multiAxisOptions};
         },
         applyDarkTheme() {
             this.basicOptions = {
-                legend: {
-                    labels: {
-                        fontColor: '#ebedef'
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#ebedef'
+                        }
                     }
                 },
                 scales: {
-                    xAxes: [{
+                    x: {
                         ticks: {
-                            fontColor: '#ebedef'
+                            color: '#ebedef'
                         },
-                        gridLines: {
+                        grid: {
                             color: 'rgba(255,255,255,0.2)'
                         }
-                    }],
-                    yAxes: [{
+                    },
+                    y: {
                         ticks: {
-                            fontColor: '#ebedef'
+                            color: '#ebedef'
                         },
-                        gridLines: {
+                        grid: {
                             color: 'rgba(255,255,255,0.2)'
                         }
-                    }]
+                    }
                 }
             };
 
-            this.multiAxisOptions.scales.xAxes = [{
-                    ticks: {
-                        fontColor: '#ebedef'
+            this.multiAxisOptions = {
+                stacked: false,
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#ebedef'
+                        }
+                    }
+                },
+                scales: {
+                    x: {
+                        ticks: {
+                            color: '#ebedef'
+                        },
+                        grid: {
+                            color: 'rgba(255,255,255,0.2)'
+                        }
                     },
-                    gridLines: {
-                        color: 'rgba(255,255,255,0.2)'
+                    y: {
+                        type: 'linear',
+                        display: true,
+                        position: 'left',
+                        ticks: {
+                            color: '#ebedef'
+                        },
+                        grid: {
+                            color: 'rgba(255,255,255,0.2)'
+                        }
+                    },
+                    y1: {
+                        type: 'linear',
+                        display: true,
+                        position: 'right',
+                        ticks: {
+                            color: '#ebedef'
+                        },
+                        grid: {
+                            drawOnChartArea: false,
+                            color: 'rgba(255,255,255,0.2)'
+                        }
                     }
                 }
-            ];
-            this.multiAxisOptions.scales.yAxes[0].ticks = {
-                fontColor: '#ebedef'
             };
-            this.multiAxisOptions.scales.yAxes[0].gridLines = {
-                color: 'rgba(255,255,255,0.2)'
-            };
-            this.multiAxisOptions.scales.yAxes[1].ticks = {
-                fontColor: '#ebedef'
-            };
-            this.multiAxisOptions.scales.yAxes[1].gridLines = {
-                color: 'rgba(255,255,255,0.2)'
-            };
-            this.multiAxisOptions.legend = {
-                labels:  {
-                    fontColor: '#ebedef'
-                }
-            };
-            this.multiAxisOptions = {...this.multiAxisOptions};
         }
     },
     components: {
diff --git a/src/views/chart/LineChartDoc.vue b/src/views/chart/LineChartDoc.vue
index 78cec2e2e..dc27c260e 100755
--- a/src/views/chart/LineChartDoc.vue
+++ b/src/views/chart/LineChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" github="chart/LineChartDemo.vue" />
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '3.3.2'}" component="Chart" github="chart/LineChartDemo.vue" />
 </template>
 
 <script>
@@ -40,13 +40,15 @@ export default {
                         label: 'First Dataset',
                         data: [65, 59, 80, 81, 56, 55, 40],
                         fill: false,
-                        borderColor: '#42A5F5'
+                        borderColor: '#42A5F5',
+                        tension: .4
                     },
                     {
                         label: 'Second Dataset',
                         data: [28, 48, 40, 19, 86, 27, 90],
                         fill: false,
-                        borderColor: '#FFA726'
+                        borderColor: '#FFA726',
+                        tension: .4
                     }
                 ]
             },
@@ -56,37 +58,18 @@ export default {
                     label: 'Dataset 1',
                     fill: false,
                     borderColor: '#42A5F5',
-                    yAxisID: 'y-axis-1',
+                    yAxisID: 'y',
+                    tension: .4,
                     data: [65, 59, 80, 81, 56, 55, 10]
                 }, {
                     label: 'Dataset 2',
                     fill: false,
                     borderColor: '#00bb7e',
-                    yAxisID: 'y-axis-2',
+                    yAxisID: 'y1',
+                    tension: .4,
                     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: [
@@ -94,6 +77,7 @@ export default {
                         label: 'First Dataset',
                         data: [65, 59, 80, 81, 56, 55, 40],
                         fill: false,
+                        tension: .4,
                         borderColor: '#42A5F5'
                     },
                     {
@@ -101,6 +85,7 @@ export default {
                         data: [28, 48, 40, 19, 86, 27, 90],
                         fill: false,
                         borderDash: [5, 5],
+                        tension: .4,
                         borderColor: '#66BB6A'
                     },
                     {
@@ -108,11 +93,81 @@ export default {
                         data: [12, 51, 62, 33, 21, 62, 45],
                         fill: true,
                         borderColor: '#FFA726',
+                        tension: .4,
                         backgroundColor: 'rgba(255,167,38,0.2)'
                     }
                 ]
             },
-            basicOptions: null
+            basicOptions: {
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
+                    }
+                },
+                scales: {
+                    x: {
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    },
+                    y: {
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    }
+                }
+            },
+            multiAxisOptions:{
+                stacked: false,
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
+                    }
+                },
+                scales: {
+                    x: {
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    },
+                    y: {
+                        type: 'linear',
+                        display: true,
+                        position: 'left',
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    },
+                    y1: {
+                        type: 'linear',
+                        display: true,
+                        position: 'right',
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            drawOnChartArea: false,
+                            color: '#ebedef'
+                        }
+                    }
+                }
+            }
         }
     }
 }
@@ -146,86 +201,155 @@ 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 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',
+                        tension: .4
+                    },
+                    {
+                        label: 'Second Dataset',
+                        data: [28, 48, 40, 19, 86, 27, 90],
+                        fill: false,
+                        borderColor: '#FFA726',
+                        tension: .4
                     }
+                ]
+            }
+        );
+
+        const multiAxisData = ref(
+            {
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [{
+                    label: 'Dataset 1',
+                    fill: false,
+                    borderColor: '#42A5F5',
+                    yAxisID: 'y',
+                    tension: .4,
+                    data: [65, 59, 80, 81, 56, 55, 10]
+                }, {
+                    label: 'Dataset 2',
+                    fill: false,
+                    borderColor: '#00bb7e',
+                    yAxisID: 'y1',
+                    tension: .4,
+                    data: [28, 48, 40, 19, 86, 27, 90]
                 }]
             }
-        });
-        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'
+        );
+
+        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,
+                        tension: .4,
+                        borderColor: '#42A5F5'
+                    },
+                    {
+                        label: 'Second Dataset',
+                        data: [28, 48, 40, 19, 86, 27, 90],
+                        fill: false,
+                        borderDash: [5, 5],
+                        tension: .4,
+                        borderColor: '#66BB6A'
+                    },
+                    {
+                        label: 'Third Dataset',
+                        data: [12, 51, 62, 33, 21, 62, 45],
+                        fill: true,
+                        borderColor: '#FFA726',
+                        tension: .4,
+                        backgroundColor: 'rgba(255,167,38,0.2)'
+                    }
+                ]
+            }
+        );
+
+        const basicOptions = ref(
+            {
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
+                    }
                 },
-                {
-                    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)'
+                scales: {
+                    x: {
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    },
+                    y: {
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    }
                 }
-            ]
-        });
-        const basicOptions = ref(null);
+            }
+        );
+
+        const multiAxisData = ref(
+            {
+                stacked: false,
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
+                    }
+                },
+                scales: {
+                    x: {
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    },
+                    y: {
+                        type: 'linear',
+                        display: true,
+                        position: 'left',
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    },
+                    y1: {
+                        type: 'linear',
+                        display: true,
+                        position: 'right',
+                        ticks: {
+                            color: '#495057'
+                        },
+                        grid: {
+                            drawOnChartArea: false,
+                            color: '#ebedef'
+                        }
+                    }
+                }
+            }
+        );
 
 		return { basicData, multiAxisData, multiAxisOptions, lineStylesData, basicOptions }
     }
diff --git a/src/views/chart/PieChartDemo.vue b/src/views/chart/PieChartDemo.vue
index 4fc002710..79d7dd4c7 100755
--- a/src/views/chart/PieChartDemo.vue
+++ b/src/views/chart/PieChartDemo.vue
@@ -9,8 +9,8 @@
         </div>
 
         <div class="content-section implementation">
-            <div class="card">
-                <Chart type="pie" :data="chartData" :options="chartOptions" />
+            <div class="card p-d-flex p-jc-center">
+                <Chart type="pie" :data="chartData" :options="chartOptions" style="width: 40%" />
             </div>
         </div>
 
@@ -65,18 +65,22 @@ export default {
         },
         getLightTheme() {
             return {
-                legend: {
-                    labels: {
-                        fontColor: '#495057'
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
                     }
                 }
             }
         },
         getDarkTheme() {
             return {
-                legend: {
-                    labels: {
-                        fontColor: '#ebedef'
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#ebedef'
+                        }
                     }
                 }
             }
diff --git a/src/views/chart/PieChartDoc.vue b/src/views/chart/PieChartDoc.vue
index e2e6d70ec..3be7d6cca 100755
--- a/src/views/chart/PieChartDoc.vue
+++ b/src/views/chart/PieChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" github="chart/PieChartDemo.vue" />
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '3.3.2'}" component="Chart" github="chart/PieChartDemo.vue" />
 </template>
 
 <script>
@@ -13,7 +13,7 @@ export default {
 					content: `
 <template>
     <div>
-        <Chart type="pie" :data="chartData" />
+        <Chart type="pie" :data="chartData" :options="lightOptions" />
     </div>
 </template>
 
@@ -30,6 +30,15 @@ export default {
                         hoverBackgroundColor: ["#64B5F6","#81C784","#FFB74D"]
                     }
                 ]
+            },
+            lightOptions: {
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
+                    }
+                }
             }
         }
     }
@@ -42,7 +51,7 @@ export default {
 					content: `
 <template>
     <div>
-        <Chart type="pie" :data="chartData" />
+        <Chart type="pie" :data="chartData" :options="lightOptions" />
     </div>
 </template>
 
@@ -62,7 +71,17 @@ export default {
             ]
         });
 
-		return { chartData }
+        const lightOptions = ref({
+            plugins: {
+                legend: {
+                    labels: {
+                        color: '#495057'
+                    }
+                }
+            }
+        });
+
+		return { chartData, lightOptions }
     }
 }
 <\\/script>
diff --git a/src/views/chart/PolarAreaChartDemo.vue b/src/views/chart/PolarAreaChartDemo.vue
index 024ea45b4..4838e41f3 100755
--- a/src/views/chart/PolarAreaChartDemo.vue
+++ b/src/views/chart/PolarAreaChartDemo.vue
@@ -9,8 +9,8 @@
         </div>
 
         <div class="content-section implementation">
-            <div class="card">
-                <Chart type="polarArea" :data="chartData" :options="chartOptions" />
+            <div class="card p-d-flex p-jc-center">
+                <Chart type="polarArea" :data="chartData" :options="chartOptions" style="width: 40%" />
             </div>
         </div>
 
@@ -73,28 +73,36 @@ export default {
         },
         getLightTheme() {
             return {
-                legend: {
-                    labels: {
-                        fontColor: '#495057'
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
                     }
                 },
-                scale: {
-                    gridLines: {
-                        color: '#ebedef'
+                scales: {
+                    r: {
+                        grid: {
+                            color: '#ebedef'
+                        }
                     }
                 }
             };
         },
         getDarkTheme() {
             return {
-                legend: {
-                    labels: {
-                        fontColor: '#ebedef'
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#ebedef'
+                        }
                     }
                 },
-                scale: {
-                    gridLines: {
-                        color: 'rgba(255,255,255,0.2)'
+                scales: {
+                    r: {
+                        grid: {
+                            color: 'rgba(255,255,255,0.2)'
+                        }
                     }
                 }
             };
diff --git a/src/views/chart/PolarAreaChartDoc.vue b/src/views/chart/PolarAreaChartDoc.vue
index fa8b707ac..f36a151f5 100755
--- a/src/views/chart/PolarAreaChartDoc.vue
+++ b/src/views/chart/PolarAreaChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" github="chart/PolarAreaChartDemo.vue" />
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '3.3.2'}" component="Chart" github="chart/PolarAreaChartDemo.vue" />
 </template>
 
 <script>
@@ -12,7 +12,7 @@ export default {
 					content: `
 <template>
     <div>
-        <Chart type="polarArea" :data="chartData" />
+        <Chart type="polarArea" :data="chartData" :options="chartOptions" />
     </div>
 </template>
 
@@ -27,6 +27,22 @@ export default {
                     label: 'My dataset'
                 }],
                 labels: ["Red","Green","Yellow","Grey","Blue"]
+            },
+            chartOptions: {
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
+                    }
+                },
+                scales: {
+                    r: {
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    }
+                }
             }
         }
     }
@@ -39,7 +55,7 @@ export default {
 					content: `
 <template>
     <div>
-        <Chart type="polarArea" :data="chartData" />
+        <Chart type="polarArea" :data="chartData" :options="chartOptions" />
     </div>
 </template>
 
@@ -57,7 +73,26 @@ export default {
             labels: ["Red","Green","Yellow","Grey","Blue"]
         });
 
-		return { chartData }
+        const chartOptions = ref(
+            {
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
+                    }
+                },
+                scales: {
+                    r: {
+                        grid: {
+                            color: '#ebedef'
+                        }
+                    }
+                }
+            }
+        );
+
+		return { chartData, chartOptions }
     }
 }
 <\\/script>
diff --git a/src/views/chart/RadarChartDemo.vue b/src/views/chart/RadarChartDemo.vue
index c9345493e..7c3f5d768 100755
--- a/src/views/chart/RadarChartDemo.vue
+++ b/src/views/chart/RadarChartDemo.vue
@@ -9,8 +9,8 @@
         </div>
 
         <div class="content-section implementation">
-            <div class="card">
-                <Chart type="radar" :data="chartData" :options="chartOptions" />
+            <div class="card p-d-flex p-jc-center">
+                <Chart type="radar" :data="chartData" :options="chartOptions" style="width: 40%" />
             </div>
         </div>
 
@@ -72,34 +72,48 @@ export default {
         },
         getLightTheme() {
             return {
-                legend: {
-                    labels: {
-                        fontColor: '#495057'
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
                     }
                 },
-                scale: {
-                    pointLabels: {
-                        fontColor: '#495057'
-                    },
-                    gridLines: {
-                        color: '#ebedef'
+                scales: {
+                    r: {
+                        pointLabels: {
+                            color: '#495057',
+                        },
+                        grid: {
+                            color: '#ebedef',
+                        },
+                        angleLines: {
+                            color: '#ebedef'
+                        }
                     }
                 }
             };
         },
         getDarkTheme() {
             return {
-                legend: {
-                    labels: {
-                        fontColor: '#ebedef'
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#ebedef'
+                        }
                     }
                 },
-                scale: {
-                    pointLabels: {
-                        fontColor: '#ebedef'
-                    },
-                    gridLines: {
-                        color: 'rgba(255,255,255,0.2)'
+                scales: {
+                    r: {
+                        pointLabels: {
+                            color: '#ebedef',
+                        },
+                        grid: {
+                            color: 'rgba(255,255,255,0.2)',
+                        },
+                        angleLines: {
+                            color: 'rgba(255,255,255,0.2)'
+                        }
                     }
                 }
             };
diff --git a/src/views/chart/RadarChartDoc.vue b/src/views/chart/RadarChartDoc.vue
index 16ab87cac..f655d2986 100755
--- a/src/views/chart/RadarChartDoc.vue
+++ b/src/views/chart/RadarChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" github="chart/RadarChartDemo.vue" />
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '3.3.2'}" component="Chart" github="chart/RadarChartDemo.vue" />
 </template>
 
 <script>
@@ -12,7 +12,7 @@ export default {
 					content: `
 <template>
     <div>
-        <Chart type="radar" :data="chartData" />
+        <Chart type="radar" :data="chartData" :options="chartOptions" />
     </div>
 </template>
 
@@ -45,6 +45,28 @@ export default {
                     }
                 ]
             },
+            chartOption: {
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#495057'
+                        }
+                    }
+                },
+                scales: {
+                    r: {
+                        pointLabels: {
+                            color: '#495057',
+                        },
+                        grid: {
+                            color: '#ebedef',
+                        },
+                        angleLines: {
+                            color: '#ebedef'
+                        }
+                    }
+                }
+            }
         }
     }    
 }
@@ -56,7 +78,7 @@ export default {
 					content: `
 <template>
     <div>
-        <Chart type="radar" :data="chartData" />
+        <Chart type="radar" :data="chartData" :options="chartOptions" />
     </div>
 </template>
 
@@ -91,7 +113,30 @@ export default {
             ]
         });
 
-		return { chartData }
+        const chartOptions = ref({
+            plugins: {
+                legend: {
+                    labels: {
+                        color: '#495057'
+                    }
+                }
+            },
+            scales: {
+                r: {
+                    pointLabels: {
+                        color: '#495057',
+                    },
+                    grid: {
+                        color: '#ebedef',
+                    },
+                    angleLines: {
+                        color: '#ebedef'
+                    }
+                }
+            }
+        });
+
+		return { chartData, chartOptions }
     }    
 }
 <\\/script>