nginx-ui/app/src/components/Chart/AreaChart.vue

<script setup lang="ts">
import VueApexCharts from 'vue3-apexcharts'
import {ref, watch} from 'vue'
import {useSettingsStore} from '@/pinia'
import {storeToRefs} from 'pinia'

const {series, max, y_formatter} = defineProps(['series', 'max', 'y_formatter'])

const settings = useSettingsStore()
const {theme} = storeToRefs(settings)

const fontColor = () => {
  return theme.value === 'dark' ? '#b4b4b4' : undefined
}

const chart = ref(null)

let chartOptions = {
  chart: {
    type: 'area',
    zoom: {
      enabled: false
    },
    animations: {
      enabled: false
    },
    toolbar: {
      show: false
    }
  },
  colors: ['#ff6385', '#36a3eb'],
  fill: {
    // type: ['solid', 'gradient'],
    gradient: {
      shade: 'light'
    }
    //colors:  ['#ff6385', '#36a3eb'],
  },
  dataLabels: {
    enabled: false
  },
  stroke: {
    curve: 'smooth',
    width: 0
  },
  xaxis: {
    type: 'datetime',
    labels: {
      datetimeUTC: false,
      style: {
        colors: fontColor()
      }
    }
  },
  tooltip: {
    enabled: false
  },
  yaxis: {
    max: max,
    tickAmount: 4,
    min: 0,
    labels: {
      style: {
        colors: fontColor()
      },
      formatter: y_formatter
    }
  },
  legend: {
    labels: {
      colors: fontColor()
    },
    onItemClick: {
      toggleDataSeries: false
    },
    onItemHover: {
      highlightDataSeries: false
    }
  }
}

let instance: ApexCharts | null = chart.value

const callback = () => {
  chartOptions = {
    ...chartOptions,
    ...{
      xaxis: {
        type: 'datetime',
        labels: {
          datetimeUTC: false,
          style: {
            colors: fontColor()
          }
        }
      },
      yaxis: {
        max: max,
        tickAmount: 4,
        min: 0,
        labels: {
          style: {
            colors: fontColor()
          },
          formatter: y_formatter
        }
      },
      legend: {
        labels: {
          colors: fontColor()
        },
        onItemClick: {
          toggleDataSeries: false
        },
        onItemHover: {
          highlightDataSeries: false
        }
      }
    }
  }
  instance?.updateOptions?.(chartOptions)
}
watch(theme, callback)
</script>

<template>
  <!-- Use theme as key to rerender the chart when theme changes to prevent style issues -->
  <VueApexCharts :key="theme" type="area" height="200" :options="chartOptions" :series="series" ref="chart"/>
</template>


<style scoped>

</style>