diff --git a/src/mixins/charts/chartMixins.js b/src/mixins/charts/chartMixins.js
new file mode 100644
index 00000000..f0b697fd
--- /dev/null
+++ b/src/mixins/charts/chartMixins.js
@@ -0,0 +1,54 @@
+import { deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities'
+import getColor from '@coreui/coreui/js/src/utilities/get-color'
+
+const generatedLabels = {
+ computed:{
+ generatedLabels() {
+ if(this.labels !== undefined)
+ return this.labels
+ let labels = [];
+ for(let i=1; i<=this.data.length; i++)
+ labels.push('')
+ return labels
+ },
+ },
+}
+const generatedBackgroundColor = {
+ computed:{
+ generatedBackgroundColor(){
+ return getColor(this.backgroundColor)
+ },
+ },
+}
+const generatedBorderColor = {
+ computed:{
+ generatedBorderColor(){
+ return getColor(this.borderColor)
+ },
+ },
+}
+const generatedPointHoverBackgroundColor = {
+ computed:{
+ generatedPointHoverBackgroundColor () {
+ if(this.$options.propsData.pointHoverBackgroundColor === undefined)
+ return this.generatedBorderColor
+ return getColor(this.pointHoverBackgroundColor)
+ },
+ },
+}
+const generatedOptions = {
+ computed:{
+ generatedOptions () {
+ if(this.$options.propsData.options !== undefined)
+ deepObjectsMerge(this.finalOptions, this.options)
+ return this.finalOptions
+ },
+ },
+}
+export{
+ generatedLabels,
+ generatedBackgroundColor,
+ generatedBorderColor,
+ generatedPointHoverBackgroundColor,
+ generatedOptions
+}
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index e4447492..9adbd584 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -155,6 +155,7 @@
+
diff --git a/src/views/Widgets.vue b/src/views/Widgets.vue
index f7298ee8..5649582f 100644
--- a/src/views/Widgets.vue
+++ b/src/views/Widgets.vue
@@ -107,25 +107,29 @@
-
-
-
-
@@ -194,7 +198,7 @@
+ style='height:70px' label='Members' pointHoverBackgroundColor='primary'/>
@@ -212,9 +216,10 @@
-
+ style='height:70px' label='Members' :options='{elements: {line: {tension: 0.00001}}}'
+ pointHoverBackgroundColor='info'/>
@@ -234,7 +239,8 @@
+ style='height:70px' backgroundColor ='rgba(255,255,255,.2)' label='Members'
+ :options="{elements: {line: {borderWidth: 2.5}}}" pointHoverBackgroundColor='warning'/>
@@ -253,7 +259,7 @@
+ label='Members' backgroundColor='rgb(250, 152, 152)' style='height:70px' />
@@ -262,58 +268,63 @@
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
diff --git a/src/views/charts/BarExample.vue b/src/views/charts/BarExample.vue
index 8e99818f..5845d175 100644
--- a/src/views/charts/BarExample.vue
+++ b/src/views/charts/BarExample.vue
@@ -3,6 +3,7 @@ import { Bar } from 'vue-chartjs'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
export default {
+ // name: 'BarExample',
extends: Bar,
mounted () {
// Overwriting base render method with actual data.
diff --git a/src/views/charts/DoughnutExample.vue b/src/views/charts/DoughnutExample.vue
index 65f9bcba..d45434a7 100644
--- a/src/views/charts/DoughnutExample.vue
+++ b/src/views/charts/DoughnutExample.vue
@@ -2,6 +2,7 @@
import { Doughnut } from 'vue-chartjs'
export default {
+ name: 'DoughnutExample',
extends: Doughnut,
mounted () {
this.renderChart({
diff --git a/src/views/dashboard/BarChart1.vue b/src/views/dashboard/BarChart1.vue
index ce506d04..f1fe86b6 100644
--- a/src/views/dashboard/BarChart1.vue
+++ b/src/views/dashboard/BarChart1.vue
@@ -1,9 +1,12 @@
diff --git a/src/views/dashboard/LineChart2.vue b/src/views/dashboard/LineChart2.vue
index cfb0eb2b..0e783a2d 100644
--- a/src/views/dashboard/LineChart2.vue
+++ b/src/views/dashboard/LineChart2.vue
@@ -1,11 +1,12 @@