I'm using chartJs to add a Doughnut chart on my app, but I need to setup it's color under <script> and I'd like to get the color from theme/variables.css .
In the code below, I have a hardcoded backgroundColor, but I'd like to get it from --ion-color-secondary and --ion-color-secondary-contrast instead. How can I achieve that?
Here is the code:
<template>
<Doughnut
:chart-data="chartData"
:chart-options="chartOptions"
/>
</template>
<script lang=ts>
import { defineComponent, PropType } from 'vue'
import { Doughnut } from 'vue-chartjs'
import {
Chart as ChartJS,
Title,
Tooltip,
Legend,
ArcElement,
CategoryScale,
Plugin
} from 'chart.js'
ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)
export default defineComponent<{fastdata: any}>({
name: 'MrProgress',
components: {
Doughnut
},
inject: ["fastdata"],
setup() {
const chartOptions = {
responsive: true,
maintainAspectRatio: true,
cutout: "90%",
borderWidth: 0,
}
return {
chartOptions,
};
},
computed: {
chartData() {
const pts = this.fastdata.user.pts;
const missing = this.fastdata.user.proximo_nivel - pts;
return {
datasets: [
{
backgroundColor: ['#41B883', '#e4e0d8'],
data: [pts, missing]
}
]
}
}
}
})
</script>
Following the tip from @EstusFlask in the comment regarding userCssVar, I manged to solve it in the following way:
npm i @vueuse/core
...
import { useCssVar } from '@vueuse/core'
import { ref } from 'vue'
<script>
...
const color_pts = useCssVar(ref('--ion-color-secondary'), ref(null)).value;
const color_missing = useCssVar(ref('--ion-background-color'), ref(null)).value;
return {
datasets: [
{
backgroundColor: [color_pts, color_missing],
data: [pts, missing]
}
]
}
...
</script>