Chart stackblitz demo updates

This commit is contained in:
Tuğçe Küçükoğlu 2023-10-17 17:07:23 +03:00
parent ff35703343
commit 44081515b4
4 changed files with 73 additions and 25 deletions

View file

@ -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({
cutout: '60%'
});
const chartOptions = ref(null);
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>
`
}