<template> <DocSectionText v-bind="$attrs"> <p>A bar chart or bar graph is a chart that presents grouped data with rectangular bars with lengths proportional to the values that they represent.</p> </DocSectionText> <div class="card"> <Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" /> </div> <DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" /> </template> <script> import EventBus from '@/app/AppEventBus'; export default { redrawListener: null, data() { return { chartData: null, chartOptions: null, code: { basic: ` <Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" /> `, options: ` <template> <div class="card"> <Chart type="bar" :data="chartData" :options="chartOptions" class="h-[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.documentElement); return { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label: 'My First dataset', backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'), borderColor: documentStyle.getPropertyValue('--p-cyan-500'), data: [65, 59, 80, 81, 56, 55, 40] }, { label: 'My Second dataset', backgroundColor: documentStyle.getPropertyValue('--p-gray-500'), borderColor: documentStyle.getPropertyValue('--p-gray-500'), data: [28, 48, 40, 19, 86, 27, 90] } ] }; }, setChartOptions() { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--p-text-color'); const textColorSecondary = documentStyle.getPropertyValue('--p-text-muted-color'); const surfaceBorder = documentStyle.getPropertyValue('--p-content-border-color'); return { maintainAspectRatio: false, aspectRatio: 0.8, plugins: { legend: { labels: { color: textColor } } }, scales: { x: { ticks: { color: textColorSecondary, font: { weight: 500 } }, grid: { display: false, drawBorder: false } }, y: { ticks: { color: textColorSecondary }, grid: { color: surfaceBorder, drawBorder: false } } } }; } } }; <\/script> `, composition: ` <template> <div class="card"> <Chart type="bar" :data="chartData" :options="chartOptions" class="h-[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.documentElement); return { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label: 'My First dataset', backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'), borderColor: documentStyle.getPropertyValue('--p-cyan-500'), data: [65, 59, 80, 81, 56, 55, 40] }, { label: 'My Second dataset', backgroundColor: documentStyle.getPropertyValue('--p-gray-500'), borderColor: documentStyle.getPropertyValue('--p-gray-500'), data: [28, 48, 40, 19, 86, 27, 90] } ] }; }; const setChartOptions = () => { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--p-text-color'); const textColorSecondary = documentStyle.getPropertyValue('--p-text-muted-color'); const surfaceBorder = documentStyle.getPropertyValue('--p-content-border-color'); return { maintainAspectRatio: false, aspectRatio: 0.8, plugins: { legend: { labels: { color: textColor } } }, scales: { x: { ticks: { color: textColorSecondary, font: { weight: 500 } }, grid: { display: false, drawBorder: false } }, y: { ticks: { color: textColorSecondary }, grid: { color: surfaceBorder, drawBorder: false } } } }; } <\/script> ` } }; }, beforeUnmount() { EventBus.off('dark-mode-toggle-complete', this.redrawListener); EventBus.off('theme-palette-change', this.redrawListener); }, mounted() { this.chartData = this.setChartData(); this.chartOptions = this.setChartOptions(); this.redrawListener = () => { this.chartOptions = this.setChartOptions(); }; EventBus.on('theme-palette-change', this.redrawListener); EventBus.on('dark-mode-toggle-complete', this.redrawListener); }, methods: { setChartData() { const documentStyle = getComputedStyle(document.documentElement); return { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label: 'My First dataset', backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'), borderColor: documentStyle.getPropertyValue('--p-cyan-500'), data: [65, 59, 80, 81, 56, 55, 40] }, { label: 'My Second dataset', backgroundColor: documentStyle.getPropertyValue('--p-gray-500'), borderColor: documentStyle.getPropertyValue('--p-gray-500'), data: [28, 48, 40, 19, 86, 27, 90] } ] }; }, setChartOptions() { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--p-text-color'); const textColorSecondary = documentStyle.getPropertyValue('--p-text-muted-color'); const surfaceBorder = documentStyle.getPropertyValue('--p-content-border-color'); return { maintainAspectRatio: false, aspectRatio: 0.8, plugins: { legend: { labels: { color: textColor } } }, scales: { x: { ticks: { color: textColorSecondary, font: { weight: 500 } }, grid: { display: false, drawBorder: false } }, y: { ticks: { color: textColorSecondary }, grid: { color: surfaceBorder, drawBorder: false } } } }; } } }; </script>