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

@ -32,19 +32,12 @@ export default {
data() {
return {
chartData: null,
chartOptions: {
plugins: {
legend: {
labels: {
usePointStyle: true
}
}
}
}
chartOptions: null
};
},
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({
plugins: {
legend: {
labels: {
usePointStyle: true
}
}
}
});
const chartOptions = ref();
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>
`
}