<template> <DocSectionText v-bind="$attrs"> <p>A pie chart is a circular statistical graphic which is divided into slices to illustrate numerical proportion.</p> </DocSectionText> <div class="card flex justify-content-center"> <Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" /> </div> <DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" /> </template> <script> import EventBus from '@/layouts/AppEventBus'; export default { data() { return { chartData: null, chartOptions: null, code: { basic: ` <Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" /> `, options: ` <template> <div class="card flex justify-content-center"> <Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" /> </div> </template> <script> export default { data() { return { chartData: null, chartOptions: null }; }, mounted() { this.chartData = this.setChartData(); this.chartOptions = this.setChartOptions(); }, methods: { setChartData() { const documentStyle = getComputedStyle(document.body); return { labels: ['A', 'B', 'C'], datasets: [ { data: [540, 325, 702], backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')], hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')] } ] }; }, setChartOptions() { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); return { plugins: { legend: { labels: { usePointStyle: true, color: textColor } } } }; } } }; <\/script> `, composition: ` <template> <div class="card flex justify-content-center"> <Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" /> </div> </template> <script setup> import { ref, onMounted } from "vue"; onMounted(() => { chartData.value = setChartData(); chartOptions.value = setChartOptions(); }); const chartData = ref(); const chartOptions = ref(); const setChartData = () => { const documentStyle = getComputedStyle(document.body); return { labels: ['A', 'B', 'C'], datasets: [ { data: [540, 325, 702], backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')], hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')] } ] }; }; const setChartOptions = () => { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); return { plugins: { legend: { labels: { usePointStyle: true, color: textColor } } } }; }; <\/script> ` } }; }, mounted() { this.chartData = this.setChartData(); this.chartOptions = this.setChartOptions(); this.themeChangeListener = () => { this.chartOptions = this.setChartOptions(); }; EventBus.on('theme-change-complete', this.themeChangeListener); }, methods: { setChartData() { const documentStyle = getComputedStyle(document.documentElement); return { labels: ['A', 'B', 'C'], datasets: [ { data: [540, 325, 702], backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')], hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')] } ] }; }, setChartOptions() { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); return { plugins: { legend: { labels: { usePointStyle: true, color: textColor } } } }; } } }; </script>