style: update tooltip theme and add scoped styles for apexcharts menu

This commit is contained in:
puriphatt 2025-03-07 16:37:18 +07:00
parent 7934b941d6
commit dac0c6255d
2 changed files with 15 additions and 15 deletions

View file

@ -105,3 +105,9 @@ const chartOptions = computed(() => ({
></VueApexCharts>
</div>
</template>
<style scoped>
:deep(.apexcharts-menu.apexcharts-menu-open) {
background: var(--surface-1);
}
</style>

View file

@ -23,21 +23,6 @@ const prop = withDefaults(
},
);
const chartOptions = computed(() => {
const thaiMonths = [
'ม.ค.',
'ก.พ.',
'มี.ค.',
'เม.ย.',
'พ.ค.',
'มิ.ย.',
'ก.ค.',
'ส.ค.',
'ก.ย.',
'ต.ค.',
'พ.ย.',
'ธ.ค.',
];
return {
colors: ['#035aa1', '#ae3ec9', '#ffa94d', '#e64980'],
chart: {
@ -47,6 +32,9 @@ const chartOptions = computed(() => {
enabled: false,
},
},
tooltip: {
theme: 'dark',
},
legend: {
position: 'right',
},
@ -109,3 +97,9 @@ const detail = [
</div>
</div>
</template>
<style scoped>
:deep(.apexcharts-menu.apexcharts-menu-open) {
background: var(--surface-1);
}
</style>