style: update tooltip theme and add scoped styles for apexcharts menu
This commit is contained in:
parent
7934b941d6
commit
dac0c6255d
2 changed files with 15 additions and 15 deletions
|
|
@ -105,3 +105,9 @@ const chartOptions = computed(() => ({
|
||||||
></VueApexCharts>
|
></VueApexCharts>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
:deep(.apexcharts-menu.apexcharts-menu-open) {
|
||||||
|
background: var(--surface-1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -23,21 +23,6 @@ const prop = withDefaults(
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
const chartOptions = computed(() => {
|
const chartOptions = computed(() => {
|
||||||
const thaiMonths = [
|
|
||||||
'ม.ค.',
|
|
||||||
'ก.พ.',
|
|
||||||
'มี.ค.',
|
|
||||||
'เม.ย.',
|
|
||||||
'พ.ค.',
|
|
||||||
'มิ.ย.',
|
|
||||||
'ก.ค.',
|
|
||||||
'ส.ค.',
|
|
||||||
'ก.ย.',
|
|
||||||
'ต.ค.',
|
|
||||||
'พ.ย.',
|
|
||||||
'ธ.ค.',
|
|
||||||
];
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
colors: ['#035aa1', '#ae3ec9', '#ffa94d', '#e64980'],
|
colors: ['#035aa1', '#ae3ec9', '#ffa94d', '#e64980'],
|
||||||
chart: {
|
chart: {
|
||||||
|
|
@ -47,6 +32,9 @@ const chartOptions = computed(() => {
|
||||||
enabled: false,
|
enabled: false,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
tooltip: {
|
||||||
|
theme: 'dark',
|
||||||
|
},
|
||||||
legend: {
|
legend: {
|
||||||
position: 'right',
|
position: 'right',
|
||||||
},
|
},
|
||||||
|
|
@ -109,3 +97,9 @@ const detail = [
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
:deep(.apexcharts-menu.apexcharts-menu-open) {
|
||||||
|
background: var(--surface-1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue