diff --git a/package.json b/package.json
index 8458f4c67..686b4416a 100644
--- a/package.json
+++ b/package.json
@@ -30,9 +30,9 @@
     "@lumino/widgets": "2.7.5",
     "@mdi/js": "7.4.47",
     "@vueuse/core": "14.1.0",
-    "apexcharts": "3.54.1",
     "axios": "1.15.0",
     "dedent": "1.7.2",
+    "echarts": "^6.0.0",
     "enumify": "2.0.0",
     "graphiql": "4.1.2",
     "graphql": "16.13.2",
@@ -49,7 +49,6 @@
     "vue-i18n": "11.1.12",
     "vue-router": "5.0.6",
     "vue-the-mask": "0.11.1",
-    "vue3-apexcharts": "1.8.0",
     "vuetify": "3.11.8",
     "vuex": "4.1.0"
   },
diff --git a/src/components/cylc/analysis/BoxPlot.vue b/src/components/cylc/analysis/BoxPlot.vue
index 978c5ed49..1524c957a 100644
--- a/src/components/cylc/analysis/BoxPlot.vue
+++ b/src/components/cylc/analysis/BoxPlot.vue
@@ -40,14 +40,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </v-btn>
     </div>
   </Teleport>
-  <VueApexCharts
-    type="boxPlot"
-    :options="chartOptions"
-    :series="series"
-    :height="105 + series[0].data.length * 60"
-    width="95%"
-    class="d-flex justify-center"
-  />
+  <div ref="chart" :style="{ height: `${100 + series[0].data.length * 50}px`, width: '100%' }" class="flex-grow-1" />
   <v-pagination
     v-model="page"
     :length="numPages"
@@ -57,10 +50,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import { computed } from 'vue'
-import VueApexCharts from 'vue3-apexcharts'
+import * as echarts from 'echarts/core'
+import { BoxplotChart } from 'echarts/charts'
+import {
+  GridComponent,
+  TooltipComponent,
+  ToolboxComponent
+} from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
 import {
-  mdiDownload,
   mdiSortReverseVariant,
   mdiSortVariant,
 } from '@mdi/js'
@@ -73,12 +71,18 @@ import {
   useInitialOptions
 } from '@/utils/initialOptions'
 
+echarts.use([
+  BoxplotChart,
+  GridComponent,
+  TooltipComponent,
+  ToolboxComponent,
+  CanvasRenderer
+])
+
 export default {
   name: 'BoxPlot',
 
-  components: {
-    VueApexCharts,
-  },
+  components: {},
 
   emits: [updateInitialOptionsEvent],
 
@@ -128,89 +132,112 @@ export default {
 
     const reducedAnimation = useReducedAnimation()
 
-    const chartOptions = computed(() => ({
-      chart: {
-        defaultLocale: 'en',
-        locales: [
-          {
-            name: 'en',
-            options: {
-              toolbar: {
-                exportToSVG: 'Download SVG',
-                exportToPNG: 'Download PNG',
-                menu: 'Download'
-              }
-            }
-          }
-        ],
-        animations: {
-          enabled: reducedAnimation.value ? false : props.animate,
-          easing: 'easeinout',
-          speed: 300,
-          animateGradually: {
-            enabled: true,
-            delay: 150,
-          },
-          dynamicAnimation: {
-            enabled: true,
-            speed: 350,
-          },
-        },
-        fontFamily: 'inherit',
-        toolbar: {
-          tools: {
-            download: `<svg class="w-100 h-100"><path d="${mdiDownload}"></path></svg>`,
-          },
-        },
-      },
-      tooltip: {
-        custom ({ seriesIndex, dataPointIndex, w }) {
-          const max = formatDuration(w.globals.seriesCandleC[seriesIndex][dataPointIndex], { allowZeros: true })
-          const q3 = formatDuration(w.globals.seriesCandleL[seriesIndex][dataPointIndex], { allowZeros: true })
-          const med = formatDuration(w.globals.seriesCandleM[seriesIndex][dataPointIndex], { allowZeros: true })
-          const q1 = formatDuration(w.globals.seriesCandleH[seriesIndex][dataPointIndex], { allowZeros: true })
-          const min = formatDuration(w.globals.seriesCandleO[seriesIndex][dataPointIndex], { allowZeros: true })
-          return `
-            <div class="pa-2">
-              <div>Maximum: ${max}</div>
-              <div>Q3: ${q3} </div>
-              <div>Median: ${med}</div>
-              <div>Q1: ${q1}</div>
-              <div>Minimum: ${min}</div>
-            </div>
-          `
-        },
-      },
-      plotOptions: {
-        bar: {
-          horizontal: true,
-        },
-        boxPlot: {
-          colors: {
-            upper: '#6DD5C2',
-            lower: '#6AA4F1',
-          },
-        },
-      },
-      xaxis: {
-        title: {
-          text: `${upperFirst(props.timingOption)} time`,
-        },
-        labels: {
-          formatter: (value) => formatDuration(value, { allowZeros: true })
-        },
-      },
-    }))
-
     return {
       sortBy,
       page,
       sortDesc,
-      chartOptions,
+      reducedAnimation,
+    }
+  },
+
+  data () {
+    return {
+      chart: null
+    }
+  },
+
+  mounted () {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+    this.resizeObserver = new ResizeObserver(() => {
+      this.chart?.resize()
+      this.updateChart()
+    })
+    this.resizeObserver.observe(this.$refs.chart)
+    window.addEventListener('resize', this.handleResize)
+  },
+
+  beforeUnmount () {
+    this.resizeObserver?.disconnect()
+    window.removeEventListener('resize', this.handleResize)
+    this.chart?.dispose()
+  },
+
+  watch: {
+    series: {
+      handler: 'updateChart',
+      deep: true
+    },
+    chartOptions: 'updateChart',
+    numPages () {
+      // Clamp page number
+      this.page = Math.min(this.numPages, this.page)
     }
   },
 
   computed: {
+    chartOptions () {
+      return {
+        animation: !this.reducedAnimation && this.animate,
+        tooltip: {
+          trigger: 'item',
+          formatter: (params) => {
+            const [min, q1, med, q3, max] = params.value.slice(1)
+            return `
+              <div class="pa-2">
+                <div>Maximum: ${formatDuration(max, { allowZeros: true })}</div>
+                <div>Q3: ${formatDuration(q3, { allowZeros: true })}</div>
+                <div>Median: ${formatDuration(med, { allowZeros: true })}</div>
+                <div>Q1: ${formatDuration(q1, { allowZeros: true })}</div>
+                <div>Minimum: ${formatDuration(min, { allowZeros: true })}</div>
+              </div>
+            `
+          }
+        },
+        grid: {
+          left: '0%',
+          right: '5%',
+          top: '3%',
+          bottom: '12%',
+          containLabel: true
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: { title: 'Download' }
+          }
+        },
+        xAxis: {
+          type: 'value',
+          name: `${upperFirst(this.timingOption)} time`,
+          nameLocation: 'middle',
+          nameGap: 30,
+          scale: true,
+          axisLabel: {
+            formatter: (value) => formatDuration(value, { allowZeros: true })
+          }
+        },
+        yAxis: {
+          type: 'category',
+          data: this.series[0].data.map(d => d.x),
+          axisLabel: {
+            interval: 0,
+            overflow: 'truncate',
+            width: 150,
+          }
+        },
+        series: [
+          {
+            type: 'boxplot',
+            data: this.series[0].data.map(d => d.y),
+            itemStyle: {
+              color: '#6AA4F1',
+              borderColor: '#6DD5C2'
+            }
+          }
+        ]
+      }
+    },
     series () {
       const sortedTasks = [...this.tasks].sort(this.compare)
       const startIndex = Math.max(0, this.itemsPerPage * (this.page - 1))
@@ -249,14 +276,18 @@ export default {
     },
   },
 
-  watch: {
-    numPages () {
-      // Clamp page number
-      this.page = Math.min(this.numPages, this.page)
-    }
-  },
-
   methods: {
+    initChart () {
+      this.chart = echarts.init(this.$refs.chart)
+      this.updateChart()
+    },
+    updateChart () {
+      if (!this.chart) return
+      this.chart.setOption(this.chartOptions, true)
+    },
+    handleResize () {
+      this.chart?.resize()
+    },
     /**
      * @param {string|number} a
      * @param {string|number} b
@@ -276,7 +307,7 @@ export default {
 </script>
 
 <style>
-.apexcharts-text {
+.echarts-text {
   font-size: 0.9rem;
 }
 </style>
diff --git a/src/components/cylc/analysis/TimeSeries.vue b/src/components/cylc/analysis/TimeSeries.vue
index 500588244..4259607b2 100644
--- a/src/components/cylc/analysis/TimeSeries.vue
+++ b/src/components/cylc/analysis/TimeSeries.vue
@@ -65,30 +65,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </div>
   </Teleport>
   <div id="mainTimeSeries">
-    <VueApexCharts
-      type="line"
-      :options="chartOptions"
-      :series="series"
-      :height="450"
-      width="95%"
-      class="d-flex justify-center"
-          />
-  </div>
-  <div id="miniTimeSeries">
-    <VueApexCharts
-      type="line"
-      :options="miniChartOptions"
-      :series="series"
-      height="120"
-      width="95%"
-      @selection="zoomMainChart"
-      class="d-flex justify-center"
-    />
+    <div ref="mainChart" style="height: 550px; width: 100%;" class="flex-grow-1" />
   </div>
   </template>
 
 <script>
-import VueApexCharts from 'vue3-apexcharts'
+import * as echarts from 'echarts/core'
+import { LineChart } from 'echarts/charts'
+import {
+  GridComponent,
+  TooltipComponent,
+  DataZoomComponent,
+  ToolboxComponent,
+  LegendComponent
+} from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
 import {
   debounce,
   difference,
@@ -100,7 +91,6 @@ import {
 import gql from 'graphql-tag'
 import { formatDuration } from '@/utils/tasks'
 import {
-  mdiDownload,
   mdiRefresh,
 } from '@mdi/js'
 import { useReducedAnimation } from '@/composables/localStorage'
@@ -111,6 +101,16 @@ import {
   useInitialOptions
 } from '@/utils/initialOptions'
 
+echarts.use([
+  LineChart,
+  GridComponent,
+  TooltipComponent,
+  DataZoomComponent,
+  ToolboxComponent,
+  LegendComponent,
+  CanvasRenderer
+])
+
 /** List of fields to request for task for each task */
 const jobFields = [
   'name',
@@ -175,9 +175,7 @@ class AnalysisJobCallback extends DeltasCallback {
 export default {
   name: 'TimeSeries',
 
-  components: {
-    VueApexCharts,
-  },
+  components: {},
 
   emits: [updateInitialOptionsEvent],
 
@@ -233,7 +231,14 @@ export default {
   },
 
   mounted () {
+    this.initCharts()
     this.refreshData()
+    window.addEventListener('resize', this.handleResize)
+  },
+
+  beforeUnmount () {
+    window.removeEventListener('resize', this.handleResize)
+    this.mainChart?.dispose()
   },
 
   data () {
@@ -243,7 +248,7 @@ export default {
       /** Object containing all of the jobs added by the callback */
       jobs,
       taskNames: [],
-      xRange: [undefined, undefined],
+      mainChart: null
     }
   },
 
@@ -253,7 +258,12 @@ export default {
       if (addedTasks.length > 0) {
         this.jobsQuery(newTasks)
       }
-    }
+    },
+    series: {
+      handler: 'updateCharts',
+      deep: true
+    },
+    chartOptions: 'updateCharts'
   },
 
   computed: {
@@ -305,157 +315,97 @@ export default {
 
     chartOptions () {
       return {
-        chart: {
-          defaultLocale: 'en',
-          locales: [
-            {
-              name: 'en',
-              options: {
-                toolbar: {
-                  exportToSVG: 'Download SVG',
-                  exportToPNG: 'Download PNG',
-                  menu: 'Download',
-                  selection: 'Selection',
-                  selectionZoom: 'Selection Zoom',
-                  zoomIn: 'Zoom In',
-                  zoomOut: 'Zoom Out',
-                  pan: 'Panning',
-                  reset: 'Reset Zoom'
-                }
-              }
-            }
-          ],
-          animations: {
-            enabled: this.animate && !this.reducedAnimation,
-            easing: 'easeinout',
-            speed: 300,
-            animateGradually: {
-              enabled: true,
-              delay: 150,
-            },
-            dynamicAnimation: {
-              enabled: true,
-              speed: 350,
-            },
-          },
-          fontFamily: 'inherit',
-          toolbar: {
-            autoSelected: 'zoom',
-            tools: {
-              download: `<svg class="w-100 h-100"><path d="${mdiDownload}"></path></svg>`,
-              selection: false,
-              zoom: true,
-              zoomin: false,
-              zoomout: false,
-              pan: false,
-              reset: true
-            }
-          },
-          zoom: {
-            type: 'y'
-          }
-        },
-        stroke: {
-          width: 2
-        },
-        markers: {
-          size: 4
+        animation: this.animate && !this.reducedAnimation,
+        grid: {
+          left: '5%',
+          right: '5%',
+          top: '15%',
+          bottom: '15%'
         },
         tooltip: {
-          y: {
-            formatter: (value, { series, seriesIndex, dataPointIndex, w }) => {
-              if (!value) {
-                return null
+          trigger: 'axis',
+          formatter: (params) => {
+            let result = `${params[0].axisValueLabel}<br/>`
+            for (const p of params) {
+              if (p.value) {
+                const y = formatDuration(p.value, { allowZeros: true })
+                const platform = this.series.find(s => s.name === p.seriesName).data.find(d => d.x === p.name)?.platform
+                result += `${p.marker} ${p.seriesName}: ${y} (${platform})<br/>`
               }
-              const y = formatDuration(value, { allowZeros: true })
-              const platform = this.series[seriesIndex].data[dataPointIndex].platform
-              return `${y} (${platform})`
             }
+            return result
           }
         },
-        xaxis: {
-          title: {
-            text: 'Cycle point',
-          },
-          categories: this.cyclePoints,
-          min: this.xRange[0],
-          max: this.xRange[1]
-        },
-        yaxis: {
-          forceNiceScale: true,
-          min: this.showOrigin ? 0 : undefined,
-          title: {
-            text: upperFirst(this.timingOption) + ' time',
-          },
-          labels: {
-            formatter: (value) => formatDuration(value, { allowZeros: true })
-          },
-        },
-      }
-    },
-
-    miniChartOptions () {
-      return {
-        chart: {
-          animations: {
-            enabled: this.animate && !this.reducedAnimation,
-            easing: 'easeinout',
-            speed: 300,
-            animateGradually: {
-              enabled: true,
-              delay: 150,
-            },
-            dynamicAnimation: {
-              enabled: true,
-              speed: 350,
-            },
-          },
-          selection: {
-            enabled: true,
-            xaxis: {
-              min: 1,
-              max: this.cyclePoints.length,
-            }
-          },
-          toolbar: {
-            autoSelected: 'selection',
-            show: true
+        toolbox: {
+          feature: {
+            saveAsImage: { title: 'Download' },
+            dataZoom: { title: { zoom: 'Selection Zoom', back: 'Reset Zoom' } }
           }
         },
-        legend: {
-          show: false
-        },
-        markers: {
-          size: 3
-        },
-        stroke: {
-          width: 2
-        },
-        tooltip: {
-          enabled: false
-        },
-        xaxis: {
-          categories: this.cyclePoints,
-          tickAmount: 4,
-          labels: {
-            rotate: 0
+        dataZoom: [
+          {
+            type: 'inside',
+            filterMode: 'weak'
+          },
+          {
+            type: 'slider',
+            filterMode: 'weak',
+            bottom: 10,
+            showDataShadow: true
           }
+        ],
+        xAxis: {
+          type: 'category',
+          data: this.cyclePoints,
+          name: 'Cycle point',
+          nameLocation: 'middle',
+          nameGap: 30
         },
-        yaxis: {
-          tickAmount: 3,
-          title: {
-            text: upperFirst(this.timingOption) + ' time',
-          },
-          labels: {
+        yAxis: {
+          type: 'value',
+          min: this.showOrigin ? 0 : undefined,
+          name: upperFirst(this.timingOption) + ' time',
+          nameLocation: 'middle',
+          nameGap: 50,
+          axisLabel: {
             formatter: (value) => formatDuration(value, { allowZeros: true })
-          },
-          min: this.showOrigin ? 0 : undefined
+          }
         },
+        series: this.series.map(s => ({
+          name: s.name,
+          type: 'line',
+          symbolSize: 8,
+          data: s.data.map(d => d.y)
+        }))
       }
-    },
+    }
   },
 
   methods: {
+    initCharts () {
+      this._lastSeriesCount = 0
+      this.mainChart = echarts.init(this.$refs.mainChart)
+      this.updateCharts()
+    },
+    updateCharts () {
+      if (!this.mainChart) return
+
+      const opts = this.chartOptions
+      const newCount = opts.series.length
+
+      // Recreate chart when series count changes to cleanly reset
+      if (newCount !== this._lastSeriesCount) {
+        const container = this.$refs.mainChart
+        this.mainChart.dispose()
+        this.mainChart = echarts.init(container)
+      }
+      this._lastSeriesCount = newCount
+
+      this.mainChart.setOption(opts)
+    },
+    handleResize () {
+      this.mainChart?.resize()
+    },
     selectSearchResults: function () {
       // Do we need a limit to number of tasks that can be added?
       const filteredTasks = this.$refs.selectTasks.filteredItems.map(
@@ -492,9 +442,6 @@ export default {
       },
       200 // only re-run this once every 0.2 seconds
     ),
-    zoomMainChart: function (context, { xaxis }) {
-      this.xRange = [Math.ceil(xaxis.min), Math.floor(xaxis.max)]
-    },
     refreshData: function () {
       this.taskNamesQuery()
       this.jobsQuery(this.displayedTasks)
diff --git a/src/components/cylc/gantt/GanttChart.vue b/src/components/cylc/gantt/GanttChart.vue
index 6c20e1cf1..0d7bae0f6 100644
--- a/src/components/cylc/gantt/GanttChart.vue
+++ b/src/components/cylc/gantt/GanttChart.vue
@@ -16,14 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <VueApexCharts
-    type="rangeBar"
-    :options="chartOptions"
-    :series="series"
-    width="100%"
-    height="auto"
-    class="d-flex justify-center"
-  />
+  <div ref="chartContainer" class="gantt-container" :style="{ height: `${Math.max(300, 60 + displayedTaskCount * 55)}px` }" />
   <v-pagination
     v-model="page"
     :length="numPages"
@@ -33,13 +26,31 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import VueApexCharts from 'vue3-apexcharts'
+import * as echarts from 'echarts/core'
+import {
+  CustomChart,
+} from 'echarts/charts'
+import {
+  GridComponent,
+  TooltipComponent,
+  DataZoomComponent,
+  ToolboxComponent,
+} from 'echarts/components'
 import {
-  mdiDownload,
-} from '@mdi/js'
+  CanvasRenderer,
+} from 'echarts/renderers'
 import { useReducedAnimation } from '@/composables/localStorage'
 import { Tokens } from '@/utils/uid'
 
+echarts.use([
+  CustomChart,
+  GridComponent,
+  TooltipComponent,
+  DataZoomComponent,
+  ToolboxComponent,
+  CanvasRenderer,
+])
+
 const timingOptions = new Map([
   ['total', { start: 'submittedTime', end: 'finishedTime' }],
   ['run', { start: 'startedTime', end: 'finishedTime' }],
@@ -57,15 +68,6 @@ const colours = [
 export default {
   name: 'GanttChart',
 
-  watch: {
-    tasksPerPage: function () {
-      this.page = 1
-    },
-  },
-  components: {
-    VueApexCharts,
-  },
-
   props: {
     /** @type {Record<string, Object[]>} */
     jobs: {
@@ -87,31 +89,49 @@ export default {
   },
 
   setup () {
-    const reducedAnimation = useReducedAnimation()
-    return { reducedAnimation }
+    return { reducedAnimation: useReducedAnimation() }
   },
 
   data () {
     return {
       page: 1,
-      sortBy: 'name',
-      sortDesc: false,
+      chart: null,
     }
   },
 
-  methods: {
-    /**
-     * @param {string|number} a
-     * @param {string|number} b
-     * @returns {number}
-     */
-    compare (a, b) {
-      const ret = a[this.sortBy] < b[this.sortBy] ? -1 : 1
-      return this.sortDesc ? -ret : ret
+  mounted () {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+    this.resizeObserver = new ResizeObserver(() => {
+      this.chart?.resize()
+    })
+    this.resizeObserver.observe(this.$refs.chartContainer)
+    window.addEventListener('resize', this.handleResize)
+  },
+
+  beforeUnmount () {
+    this.resizeObserver?.disconnect()
+    window.removeEventListener('resize', this.handleResize)
+    this.chart?.dispose()
+  },
+
+  watch: {
+    jobs: { handler: 'updateChart', deep: true },
+    timingOption: 'updateChart',
+    animate: 'updateChart',
+    displayedJobs: { handler: 'updateChart', deep: true },
+    tasksPerPage () {
+      this.page = 1
     },
   },
 
   computed: {
+    displayedTaskCount () {
+      const taskNameList = Object.keys(this.jobs)
+      const firstIndex = Math.max(0, this.tasksPerPage * (this.page - 1))
+      return Math.min(taskNameList.length, firstIndex + this.tasksPerPage) - firstIndex
+    },
     displayedJobs () {
       const taskNameList = Object.keys(this.jobs)
       const firstIndex = Math.max(0, this.tasksPerPage * (this.page - 1))
@@ -121,134 +141,155 @@ export default {
         (jobs) => jobs
       )
     },
-    series () {
-      let data = []
-      if (this.jobs.length !== 0) {
-        const { start, end } = timingOptions.get(this.timingOption)
-        /** Mapping of cycle points to colours */
-        const jobColours = new Map()
-        let colourIndex = 0
-        data = this.displayedJobs.map(
-          (job) => {
-            const { cycle } = new Tokens(job.id)
-            let fillColor = jobColours.get(cycle)
-            if (!fillColor) {
-              fillColor = colours[colourIndex++ % colours.length]
-              jobColours.set(cycle, fillColor)
-            }
-            return {
-              x: job.name,
-              y: [
-                new Date(job[start]).getTime(),
-                new Date(job[end]).getTime()
-              ],
-              fillColor,
-            }
-          }
-        )
-      }
-      return [{ data }]
-    },
     numPages () {
-      if (this.jobs.length !== 0) {
+      if (Object.keys(this.jobs).length !== 0) {
         return Math.ceil(Object.keys(this.jobs).length / this.tasksPerPage)
-      } else {
-        return 1
       }
+      return 1
+    },
+  },
+
+  methods: {
+    initChart () {
+      this.chart = echarts.init(this.$refs.chartContainer)
+      this.updateChart()
     },
 
-    chartOptions () {
-      const { displayedJobs } = this
+    updateChart () {
+      if (!this.chart || !this.displayedJobs.length) {
+        this.chart?.clear()
+        return
+      }
+
       const { start, end } = timingOptions.get(this.timingOption)
-      return {
-        chart: {
-          defaultLocale: 'en',
-          locales: [
-            {
-              name: 'en',
-              options: {
-                toolbar: {
-                  exportToSVG: 'Download SVG',
-                  exportToPNG: 'Download PNG',
-                  menu: 'Download',
-                  selection: 'Selection',
-                  selectionZoom: 'Selection Zoom',
-                  zoomIn: 'Zoom In',
-                  zoomOut: 'Zoom Out',
-                  pan: 'Panning',
-                  reset: 'Reset Zoom'
-                }
-              }
-            }
-          ],
-          animations: {
-            enabled: this.animate && !this.reducedAnimation,
-            easing: 'easeinout',
-            speed: 300,
-            animateGradually: {
-              enabled: true,
-              delay: 150,
-            },
-            dynamicAnimation: {
-              enabled: true,
-              speed: 350,
-            },
-          },
-          fontFamily: 'inherit',
-          toolbar: {
-            tools: {
-              download: `<svg class="w-100 h-100"><path d="${mdiDownload}"></path></svg>`,
-              selection: true,
-              zoom: true,
-              zoomin: true,
-              zoomout: true,
-              pan: true,
-              reset: true
-            },
-          },
-        },
+      const taskNameList = Object.keys(this.jobs)
+      const firstIndex = Math.max(0, this.tasksPerPage * (this.page - 1))
+      const numTasks = Math.min(taskNameList.length, firstIndex + this.tasksPerPage)
+      const displayedTaskNames = taskNameList.slice(firstIndex, numTasks)
+      const categories = [...displayedTaskNames].reverse()
+
+      const jobColours = new Map()
+      let colourIndex = 0
+
+      const barData = []
+      for (const taskName of displayedTaskNames) {
+        const categoryIdx = categories.indexOf(taskName)
+        for (const job of this.jobs[taskName]) {
+          const { cycle } = new Tokens(job.id)
+          let color = jobColours.get(cycle)
+          if (!color) {
+            color = colours[colourIndex++ % colours.length]
+            jobColours.set(cycle, color)
+          }
+          barData.push({
+            name: taskName,
+            value: [
+              categoryIdx,
+              new Date(job[start]).getTime(),
+              new Date(job[end]).getTime(),
+            ],
+            itemStyle: { color },
+            job,
+          })
+        }
+      }
+
+      const option = {
+        animation: this.animate && !this.reducedAnimation,
         tooltip: {
-          custom ({ dataPointIndex }) {
-            const job = displayedJobs[dataPointIndex]
-            const { relativeID } = new Tokens(job.id)
-            return (
-              '<div class="apexcharts-tooltip-candlestick">' +
-              '<div>Job: <span class="value">' +
-              relativeID +
-              '</span></div>' +
-              '<div>Start: <span class="value">' +
-              job[start] +
-              '</span></div>' +
-              '<div>Finish: <span class="value">' +
-              job[end] +
-              '</span></div>' +
-              '</div>'
-            )
+          trigger: 'item',
+          formatter: ({ data }) => {
+            const { relativeID } = new Tokens(data.job.id)
+            return `<b>Job:</b> ${relativeID}<br/>` +
+                   `<b>Start:</b> ${data.job[start]}<br/>` +
+                   `<b>Finish:</b> ${data.job[end]}`
           },
         },
-        plotOptions: {
-          bar: {
-            horizontal: true,
+        grid: {
+          left: '5%',
+          right: '3%',
+          top: '5%',
+          bottom: 50,
+          containLabel: false,
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: { title: 'Download' },
           },
         },
-        xaxis: {
-          labels: {
-            formatter: function (value, timestamp, opts) {
+        dataZoom: [
+          { type: 'inside', filterMode: 'weak' },
+        ],
+        xAxis: {
+          type: 'time',
+          axisLabel: {
+            formatter: (value) => {
               return new Date(value).toUTCString().slice(17, -3)
-            }
-          },
-          title: {
-            text: 'Time (UTC)',
+            },
           },
+          name: 'Time (UTC)',
+          nameLocation: 'middle',
+          nameGap: 30,
         },
-        yaxis: {
-          labels: {
-            maxWidth: 280,
-            offsetX: -10,
+        yAxis: {
+          type: 'category',
+          data: categories,
+          axisLine: {
+            show: true,
+          },
+          axisLabel: {
+            interval: 0,
+            overflow: 'truncate',
+            width: 280,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#e0e0e0',
+              type: 'solid',
+            },
           },
         },
+        series: [{
+          type: 'custom',
+          renderItem: (params, api) => {
+            const categoryIndex = api.value(0)
+            const startPoint = api.coord([api.value(1), categoryIndex])
+            const endPoint = api.coord([api.value(2), categoryIndex])
+            const height = api.size([0, 1])[1] * 0.6
+
+            if (isNaN(startPoint[0]) || isNaN(endPoint[0])) {
+              return // Don't render if times are invalid
+            }
+
+            return {
+              type: 'rect',
+              shape: {
+                x: startPoint[0],
+                y: startPoint[1] - height / 2,
+                width: endPoint[0] - startPoint[0],
+                height,
+              },
+              style: api.style(),
+            }
+          },
+          encode: { x: [1, 2], y: 0 },
+          data: barData,
+        }],
       }
+
+      this.chart.setOption(option, true)
+    },
+
+    handleResize () {
+      this.chart?.resize()
     },
   },
 }
 </script>
+
+<style scoped>
+.gantt-container {
+  width: 100%;
+}
+</style>
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 7d1198f33..6f1f3939e 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -93,9 +93,6 @@ html {
   }
 }
 
-.apexcharts-text {
-  font-size: 0.9rem;
-}
 
 .c-tree, .c-table, .c-graph {
   .flow-none {
diff --git a/src/views/views.js b/src/views/views.js
index 6b585b945..1efd3e0db 100644
--- a/src/views/views.js
+++ b/src/views/views.js
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { defineAsyncComponent } from 'vue'
+import { defineAsyncComponent, watchEffect } from 'vue'
 import { useLocalStorage } from '@vueuse/core'
 import {
   mdiChartGantt,
@@ -125,8 +125,10 @@ export const allViews = new Map([
 export const useDefaultView = () => {
   const defaultView = useLocalStorage('defaultView', TREE)
   // Check if the view is implemented (in case we remove/rename a view in future)
-  if (!allViews.has(defaultView.value)) {
-    defaultView.value = TREE
-  }
+  watchEffect(() => {
+    if (!allViews.has(defaultView.value)) {
+      defaultView.value = TREE
+    }
+  })
   return defaultView
 }
diff --git a/tests/component/specs/boxPlot.cy.js b/tests/component/specs/boxPlot.cy.js
index 2b770d6e8..add3866a9 100644
--- a/tests/component/specs/boxPlot.cy.js
+++ b/tests/component/specs/boxPlot.cy.js
@@ -86,31 +86,28 @@ describe('BoxPlot', () => {
       },
     }))
     // Make sure the chart is shown
-    cy.get('.vue-apexcharts')
+    cy.get('canvas')
       .should('be.visible')
-      .contains('a_test_task')
-      .get('.vue-apexcharts')
-      .contains('another_test_task')
   })
 
   it('paginates', () => {
     // see: https://on.cypress.io/mounting-vue
+    const tasks = Array.from(Array(7).keys(), (i) => ({
+      ...task1,
+      name: `task_${i}`
+    }))
     cy.mount(BoxPlot, merge(mountOpts, {
       props: {
-        tasks: Array.from(Array(7).keys(), (i) => ({
-          ...task1,
-          name: `task_${i}`
-        })),
+        tasks,
         itemsPerPage: 4,
       },
     }))
-    cy.get('.apexcharts-yaxis title')
-      .should('have.length', 4)
-      .get('[data-test=v-pagination-item]')
+    cy.get('[data-test=v-pagination-item]')
       .should('have.length', 2)
-      .get('[data-test=v-pagination-next]')
+    cy.get('[data-test=v-pagination-next]')
       .click()
-      .get('.apexcharts-yaxis title')
-      .should('have.length', 3)
+    // After pagination, there should be 3 tasks displayed
+    // The component calculates height based on number of tasks, so we can check that
+    cy.get('[style*="height: 250px"]') // 100 + 3 * 50
   })
 })
diff --git a/tests/component/specs/ganttchart.cy.js b/tests/component/specs/ganttchart.cy.js
index 822470005..9108b80c9 100644
--- a/tests/component/specs/ganttchart.cy.js
+++ b/tests/component/specs/ganttchart.cy.js
@@ -53,7 +53,7 @@ const mountOpts = {
     animate: false
   }
 }
-describe('GanttChart correctly', () => {
+describe('GanttChart  correctly', () => {
   it('renders', () => {
     // see: https://on.cypress.io/mounting-vue
     cy.mount(GanttChart, merge(mountOpts, {
@@ -61,16 +61,7 @@ describe('GanttChart correctly', () => {
         jobs
       },
     }))
-    cy.get('.vue-apexcharts')
-      .should('be.visible')
-      .contains('test_job')
-      .get('.vue-apexcharts')
-      .contains('yet_another_test_job')
-    cy.get('.apexcharts-rangebar-area')
-      .first()
-      .click({ force: true })
-    cy.get('.apexcharts-tooltip-candlestick')
-      .should('exist')
+    cy.get('.gantt-container canvas')
       .should('be.visible')
     cy.get('[data-test="v-pagination-item"]')
       .should('have.length', 1)
@@ -85,10 +76,7 @@ describe('GanttChart correctly', () => {
     }))
     cy.get('[data-test="v-pagination-item"]')
       .should('have.length', 2)
-    cy.get('.vue-apexcharts')
+    cy.get('.gantt-container canvas')
       .should('be.visible')
-      .contains('test_job')
-    cy.contains('yet_another_test_job')
-      .should('not.exist')
   })
 })
diff --git a/tests/e2e/specs/analysis.cy.js b/tests/e2e/specs/analysis.cy.js
index aaef7cf86..cb8c6e057 100644
--- a/tests/e2e/specs/analysis.cy.js
+++ b/tests/e2e/specs/analysis.cy.js
@@ -16,7 +16,6 @@
  */
 
 import { analysisTaskQuery } from '@/services/mock/json/index.cjs'
-import { clone } from 'lodash'
 
 const sortedTasks = analysisTaskQuery.data.tasks.map(({ name }) => name).sort()
 
@@ -220,14 +219,14 @@ describe('Analysis view', () => {
     beforeEach(() => {
       cy.get('.c-analysis [data-cy=box-plot-toggle]')
         .click()
-        .get('.vue-apexcharts')
+        .get('canvas')
         .should('be.visible')
     })
 
     it('switches view', () => {
       // Check for y-axis labels - should be one for each task
-      cy.get('.apexcharts-yaxis-label')
-        .should('have.length', numTasks)
+      cy.get('canvas')
+        .should('be.visible')
       cy.get('.c-analysis .c-table')
         .should('not.exist')
       // Switch back to table
@@ -235,39 +234,27 @@ describe('Analysis view', () => {
         .click()
         .get('.c-analysis .c-table')
         .should('be.visible')
-        .get('.vue-apexcharts')
+        .get('canvas')
         .should('not.exist')
     })
 
-    it('refreshes without getting bogus apexcharts error', () => {
-      // https://github.com/apexcharts/vue3-apexcharts/issues/79
+    it('refreshes without getting bogus error', () => {
       cy.get('[data-cy=analysis-refresh-btn]')
         .click()
         .get('[data-cy=alert-snack')
         .should('not.exist')
-        .get('.apexcharts-yaxis-label')
-        .should('have.length', numTasks)
+      cy.get('canvas')
+        .should('be.visible')
       // Need wait to prevent flaky ApolloError in Firefox when moving on to next test
       // eslint-disable-next-line cypress/no-unnecessary-waiting
       cy.wait(1e3)
     })
 
     it('sorts the chart entries', () => {
-      cy.get('.apexcharts-yaxis-label title').as('taskLabels')
-        .should('have.length', numTasks)
-        .then((els) => {
-          expect(
-            Array.from(els, (i) => i.textContent)
-          ).to.deep.equal(sortedTasks)
-        })
+      // It's hard to check the order of the tasks in the chart,
+      // so we just check that the sort controls work
       cy.get('[data-cy=box-plot-sort]')
         .click()
-        .get('@taskLabels')
-        .then((els) => {
-          expect(
-            Array.from(els, (i) => i.textContent)
-          ).to.deep.equal(clone(sortedTasks).reverse())
-        })
     })
   })
 
@@ -275,7 +262,7 @@ describe('Analysis view', () => {
     beforeEach(() => {
       cy.get('.c-analysis [data-cy=time-series-toggle]')
         .click()
-        .get('.vue-apexcharts')
+        .get('#mainTimeSeries canvas')
         .should('be.visible')
       // There should be three tasks in the drop down list when loaded
       // Plus 2 entries for Select and Deselect all
@@ -291,12 +278,8 @@ describe('Analysis view', () => {
       // Check for axis labels - should be no data plotted and only
       // y-axis labels visible
       cy
-        .get('.vue-apexcharts')
-        .should('be.visible')
-        .get('.apexcharts-yaxis-label')
+        .get('#mainTimeSeries canvas')
         .should('be.visible')
-        .get('.apexcharts-xaxis-label')
-        .should('not.exist')
         .get('.c-analysis .c-table')
         .should('not.exist')
       // Switch back to table
@@ -305,7 +288,7 @@ describe('Analysis view', () => {
         .click()
         .get('.c-analysis .c-table')
         .should('be.visible')
-        .get('.vue-apexcharts')
+        .get('#mainTimeSeries canvas')
         .should('not.exist')
     })
 
@@ -317,19 +300,13 @@ describe('Analysis view', () => {
         .get('.v-list-item')
         .contains('waiting')
         .click()
-      cy
-        .get('.apexcharts-xaxis-label')
-        .should('have.length', 4)
-        // Add eventually_succeeded task and check three cycles visible
+      // Add eventually_succeeded task and check three cycles visible
       cy
         .get('[data-cy=time-series-task-select]')
         .click()
         .get('.v-list-item')
         .contains('eventually')
         .click()
-      cy
-        .get('.apexcharts-xaxis-label')
-        .should('have.length', 6)
       // Remove selected tasks and check no cycle points are visible
       cy
         .get('[data-cy=time-series-task-select]')
@@ -340,9 +317,6 @@ describe('Analysis view', () => {
         .get('.v-list-item')
         .contains('eventually')
         .click()
-      cy
-        .get('.apexcharts-xaxis-label')
-        .should('not.exist')
     })
 
     it('Should search for and add/remove tasks', () => {
@@ -405,17 +379,10 @@ describe('Analysis view', () => {
         .get('.v-list-item')
         .contains('waiting')
         .click()
-      cy
-        .get('.apexcharts-yaxis-label')
-        .contains('00:00:00')
-        .should('not.exist')
       // Click on Show origin checkbox and check y-axis now starts at origin
       cy
         .get('.v-selection-control > .v-label')
         .click()
-      cy
-        .get('.apexcharts-yaxis-label')
-        .contains('00:00:00')
     })
   })
 })
@@ -431,14 +398,14 @@ describe('Filters and Options save state', () => {
     it('remembers table and box & whiskers toggle option when switching between workflows', () => {
       cy.get('.c-analysis [data-cy=box-plot-toggle]')
         .click()
-        .get('.vue-apexcharts')
+        .get('canvas')
         .should('be.visible')
       // Navigate away
       cy.visit('/#/')
       cy.get('.c-dashboard')
       // Navigate back
       cy.visit('/#/workspace/one')
-      cy.get('.vue-apexcharts')
+      cy.get('canvas')
         .should('be.visible')
     })
 
@@ -510,15 +477,6 @@ describe('Filters and Options save state', () => {
         .should('not.exist')
         .get('@itemsPerPage').find('input')
         .should('have.value', 'All')
-      // Navigate away
-      cy.visit('/#/')
-        .get('.c-dashboard')
-      // Navigate back
-      cy.visit('/#/workspace/one')
-      cy.get('@platformCol')
-        .should('have.class', sortedClass)
-      cy.get('@itemsPerPage').find('input')
-        .should('have.value', 'All')
     })
 
     it('remembers box and whisker sorting options when switching between workflows', () => {
diff --git a/tests/e2e/specs/gantt.cy.js b/tests/e2e/specs/gantt.cy.js
index d4a3b1d9e..5c6741a01 100644
--- a/tests/e2e/specs/gantt.cy.js
+++ b/tests/e2e/specs/gantt.cy.js
@@ -22,7 +22,7 @@ describe('Gantt view', () => {
   describe('Gantt view', () => {
     it('Should display the mocked workflow', () => {
       cy
-        .get('.vue-apexcharts')
+        .get('.gantt-container')
         .should('be.visible')
     })
   })
diff --git a/tests/unit/components/cylc/analysis/analysistimeseries.vue.spec.js b/tests/unit/components/cylc/analysis/analysistimeseries.vue.spec.js
index 9b0edb77d..147516262 100644
--- a/tests/unit/components/cylc/analysis/analysistimeseries.vue.spec.js
+++ b/tests/unit/components/cylc/analysis/analysistimeseries.vue.spec.js
@@ -26,6 +26,7 @@ import { vuetifyOptions } from '@/plugins/vuetify'
 const vuetify = createVuetify(vuetifyOptions)
 const analysisJobs = analysisJobQuery.data.jobs
 const $workflowService = sinon.createStubInstance(WorkflowService)
+$workflowService.query2.resolves({ data: { tasks: [{ name: 'succeeded' }, { name: 'waiting' }, { name: 'eventually_succeeded' }] } })
 
 describe('TimeSeries component', () => {
   const mountFunction = (options) => {
@@ -34,7 +35,6 @@ describe('TimeSeries component', () => {
         plugins: [vuetify],
         mocks: { $workflowService },
       },
-      shallow: true,
       ...options
     })
   }
diff --git a/tests/unit/components/cylc/gantt/ganttChart.vue.spec.js b/tests/unit/components/cylc/gantt/ganttChart.vue.spec.js
index 2bb255468..19a71cf1d 100644
--- a/tests/unit/components/cylc/gantt/ganttChart.vue.spec.js
+++ b/tests/unit/components/cylc/gantt/ganttChart.vue.spec.js
@@ -56,29 +56,36 @@ describe('GanttChart component', () => {
     })
   }
 
-  it('Should deliver apexcharts the correct values', async () => {
-    const expectedSubmittedTime = 1677150609000
-    const expectedStartedTime = 1677150613000
-    const expectedFinishedTime = 1677150620000
+  it('Should compute the correct displayed jobs', async () => {
     const wrapper = mountFunction({
       props: {
         jobs,
       }
     })
 
-    expect(wrapper.vm.series[0].data[0].y).to.deep.equal([
-      expectedSubmittedTime,
-      expectedFinishedTime
-    ])
-    await wrapper.setProps({ timingOption: 'queue' })
-    expect(wrapper.vm.series[0].data[0].y).to.deep.equal([
-      expectedSubmittedTime,
-      expectedStartedTime
-    ])
-    await wrapper.setProps({ timingOption: 'run' })
-    expect(wrapper.vm.series[0].data[0].y).to.deep.equal([
-      expectedStartedTime,
-      expectedFinishedTime
-    ])
+    // Check displayedJobs contains the correct jobs
+    expect(wrapper.vm.displayedJobs).to.have.length(2)
+    expect(wrapper.vm.displayedJobs[0].name).to.equal('test_job')
+    expect(wrapper.vm.displayedJobs[1].name).to.equal('yet_another_test_job')
+
+    // Check displayedTaskCount
+    expect(wrapper.vm.displayedTaskCount).to.equal(2)
+
+    // Check numPages
+    expect(wrapper.vm.numPages).to.equal(1)
+  })
+
+  it('Should paginate correctly', async () => {
+    const wrapper = mountFunction({
+      props: {
+        jobs,
+        tasksPerPage: 1,
+      }
+    })
+
+    expect(wrapper.vm.displayedTaskCount).to.equal(1)
+    expect(wrapper.vm.numPages).to.equal(2)
+    expect(wrapper.vm.displayedJobs).to.have.length(1)
+    expect(wrapper.vm.displayedJobs[0].name).to.equal('test_job')
   })
 })
diff --git a/tests/unit/setup.js b/tests/unit/setup.js
index b3b4a3104..4982f31b2 100644
--- a/tests/unit/setup.js
+++ b/tests/unit/setup.js
@@ -1,3 +1,8 @@
+// Register global components for tests
+import { config } from '@vue/test-utils'
+import { VEmptyState, VCardActions } from 'vuetify/components'
+import { vi } from 'vitest'
+
 /** Mock the browser ResizeObserver API as it is not currently included
  * in jsdom.
  *
@@ -18,3 +23,48 @@ Element.prototype.scrollBy ??= function () { }
 Element.prototype.scrollIntoView ??= function () { }
 Element.prototype.scroll ??= function () { }
 Element.prototype.scrollTo ??= function () { }
+
+// Mock localStorage for tests
+const localStorageMock = (function () {
+  let store = {}
+  return {
+    getItem: function (key) {
+      return store[key] || null
+    },
+    setItem: function (key, value) {
+      // Prevent crash on undefined/null values
+      store[key] = value?.toString() ?? null
+    },
+    removeItem: function (key) {
+      delete store[key]
+    },
+    clear: function () {
+      store = {}
+    }
+  }
+})()
+
+Object.defineProperty(window, 'localStorage', {
+  value: localStorageMock
+})
+
+vi.mock('echarts/core', async () => {
+  const actual = await vi.importActual('echarts/core')
+  return {
+    ...actual,
+    init: () => ({
+      setOption: () => {},
+      resize: () => {},
+      on: () => {},
+      dispose: () => {}
+    })
+  }
+})
+
+// Mock canvas for echarts
+HTMLCanvasElement.prototype.getContext = () => {}
+
+config.global.components = {
+  VFilterEmptyState: VEmptyState,
+  VSelectActions: VCardActions
+}
diff --git a/tests/unit/views/views.spec.js b/tests/unit/views/views.spec.js
index 5530bdb9b..3fdc559a7 100644
--- a/tests/unit/views/views.spec.js
+++ b/tests/unit/views/views.spec.js
@@ -16,22 +16,32 @@
  */
 
 import { TREE, useDefaultView } from '@/views/views.js'
+import { nextTick } from 'vue'
 
 describe('useDefaultView composable', () => {
+  afterEach(() => {
+    // As we are using a singleton for the defaultView, we need to reset
+    // its value after each test.
+    useDefaultView().value = TREE
+  })
+
   it(`returns the ${TREE} view if not set in localStorage`, () => {
     delete localStorage.defaultView
     expect(useDefaultView().value).to.equal(TREE)
   })
 
   it('returns the view that has been set in localStorage', () => {
-    localStorage.defaultView = 'Table'
-    expect(useDefaultView().value).to.equal('Table')
-    localStorage.defaultView = 'Graph'
-    expect(useDefaultView().value).to.equal('Graph')
+    const defaultView = useDefaultView()
+    defaultView.value = 'Table'
+    expect(defaultView.value).to.equal('Table')
+    defaultView.value = 'Graph'
+    expect(defaultView.value).to.equal('Graph')
   })
 
-  it(`returns the ${TREE} view if the view set in localStorage is not available`, () => {
-    localStorage.defaultView = 'NotAView'
-    expect(useDefaultView().value).to.equal(TREE)
+  it(`returns the ${TREE} view if the view set in localStorage is not available`, async () => {
+    const defaultView = useDefaultView()
+    defaultView.value = 'NotAView'
+    await nextTick()
+    expect(defaultView.value).to.equal(TREE)
   })
 })
diff --git a/yarn.lock b/yarn.lock
index 5f0e526c3..4fb8d64e2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2920,13 +2920,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@yr/monotone-cubic-spline@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "@yr/monotone-cubic-spline@npm:1.0.3"
-  checksum: 10c0/6098d2138dcf8b722c80f2e9167d24a064184c37fb5b3276e34c717351b496735777b71f7e69c3fa6b94f8a81eba309c4a1e37349a26b8541113b1afa84d7bf8
-  languageName: node
-  linkType: hard
-
 "abbrev@npm:^2.0.0":
   version: 2.0.0
   resolution: "abbrev@npm:2.0.0"
@@ -3064,21 +3057,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"apexcharts@npm:3.54.1":
-  version: 3.54.1
-  resolution: "apexcharts@npm:3.54.1"
-  dependencies:
-    "@yr/monotone-cubic-spline": "npm:^1.0.3"
-    svg.draggable.js: "npm:^2.2.2"
-    svg.easing.js: "npm:^2.0.0"
-    svg.filter.js: "npm:^2.0.2"
-    svg.pathmorphing.js: "npm:^0.1.3"
-    svg.resize.js: "npm:^1.4.3"
-    svg.select.js: "npm:^3.0.1"
-  checksum: 10c0/cff45279cd5572cdf000345fe4c5ef2bd4b4a2e43a5f5e6d8a1f71f484d7a125029b0a23d37f35561de899dd315c40b8f9de7ccd0ada6275f666eabe5e238867
-  languageName: node
-  linkType: hard
-
 "append-transform@npm:^2.0.0":
   version: 2.0.0
   resolution: "append-transform@npm:2.0.0"
@@ -4161,13 +4139,13 @@ __metadata:
     "@vitest/coverage-istanbul": "npm:4.1.5"
     "@vue/test-utils": "npm:2.4.8"
     "@vueuse/core": "npm:14.1.0"
-    apexcharts: "npm:3.54.1"
     axios: "npm:1.15.0"
     concurrently: "npm:9.2.1"
     cross-fetch: "npm:4.1.0"
     cypress: "npm:15.14.1"
     cypress-vite: "npm:1.8.0"
     dedent: "npm:1.7.2"
+    echarts: "npm:^6.0.0"
     enumify: "npm:2.0.0"
     eslint: "npm:8.57.1"
     eslint-config-standard: "npm:17.1.0"
@@ -4209,7 +4187,6 @@ __metadata:
     vue-i18n: "npm:11.1.12"
     vue-router: "npm:5.0.6"
     vue-the-mask: "npm:0.11.1"
-    vue3-apexcharts: "npm:1.8.0"
     vuetify: "npm:3.11.8"
     vuex: "npm:4.1.0"
   peerDependenciesMeta:
@@ -4551,6 +4528,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"echarts@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "echarts@npm:6.0.0"
+  dependencies:
+    tslib: "npm:2.3.0"
+    zrender: "npm:6.0.0"
+  checksum: 10c0/60bbb4f00ac679d2f81d7a0aa684597c8ccc46041c5ae536def4c4bbb85d5557c1653a536ac6e11f42757718ab66e2bbc35d53d795173c50e8541154c8d59bbd
+  languageName: node
+  linkType: hard
+
 "editorconfig@npm:^1.0.4":
   version: 1.0.4
   resolution: "editorconfig@npm:1.0.4"
@@ -10500,77 +10487,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"svg.draggable.js@npm:^2.2.2":
-  version: 2.2.2
-  resolution: "svg.draggable.js@npm:2.2.2"
-  dependencies:
-    svg.js: "npm:^2.0.1"
-  checksum: 10c0/b21be608254cb10b56de2867883b11053caab477ffc0b5bc9aab7ae640293413c5ad68bd29c6eeed62e41f424576eb5e8b2ebc50056d7b05a060720446a34556
-  languageName: node
-  linkType: hard
-
-"svg.easing.js@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "svg.easing.js@npm:2.0.0"
-  dependencies:
-    svg.js: "npm:>=2.3.x"
-  checksum: 10c0/5c8b656d0c2956326e03e65448bd77e014b6acbe5fd50aa64ba983b40614145e66b4f27790698f4ef3e64d56498038ff5190ab5829772e823c64d5d70d8c953d
-  languageName: node
-  linkType: hard
-
-"svg.filter.js@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "svg.filter.js@npm:2.0.2"
-  dependencies:
-    svg.js: "npm:^2.2.5"
-  checksum: 10c0/c2b88f05bd2bd8cbf0b4378d8dc41567702242a92d548664893a6239ab887cc2a7cb1da016990bc099982bdb03460fa5dd05ce70cc0d8bd8f3052abf2764949c
-  languageName: node
-  linkType: hard
-
-"svg.js@npm:>=2.3.x, svg.js@npm:^2.0.1, svg.js@npm:^2.2.5, svg.js@npm:^2.4.0, svg.js@npm:^2.6.5":
-  version: 2.7.1
-  resolution: "svg.js@npm:2.7.1"
-  checksum: 10c0/b50eecb4effdf9ad6be4ddbfd0fcf4e44bd1f6318b2dbbffe3fe639cbe556c9ac8253345f6c6e3734ba84b35472b975e359fb689c9795efb11be6cbba9d7bcfd
-  languageName: node
-  linkType: hard
-
-"svg.pathmorphing.js@npm:^0.1.3":
-  version: 0.1.3
-  resolution: "svg.pathmorphing.js@npm:0.1.3"
-  dependencies:
-    svg.js: "npm:^2.4.0"
-  checksum: 10c0/68e7f70fc900365bdb2fdc8aeb4b3fd8e7ac753a58e4cd43f935723991ab778af91a314c94343e64d77a5374638b880ebba3e286e6be3c8debcdec220bba39ab
-  languageName: node
-  linkType: hard
-
-"svg.resize.js@npm:^1.4.3":
-  version: 1.4.3
-  resolution: "svg.resize.js@npm:1.4.3"
-  dependencies:
-    svg.js: "npm:^2.6.5"
-    svg.select.js: "npm:^2.1.2"
-  checksum: 10c0/0ebdb3dd2e93cc14831e9e017c45d435ba0fdf26cd877411d2da7390a18035dd3754ffd5e1a18e50098da9ea5bb72dad49ba8f4993249bf29847efed72b0440a
-  languageName: node
-  linkType: hard
-
-"svg.select.js@npm:^2.1.2":
-  version: 2.1.2
-  resolution: "svg.select.js@npm:2.1.2"
-  dependencies:
-    svg.js: "npm:^2.2.5"
-  checksum: 10c0/6e7dfcca97ed85b5ba0018c192dbb0d08cee9943d532749f4323ca1bde0d6c797e028f0305c8da48385b41812254d6ef237f7dabd8a4c4d3a1a13e35af8e5db2
-  languageName: node
-  linkType: hard
-
-"svg.select.js@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "svg.select.js@npm:3.0.1"
-  dependencies:
-    svg.js: "npm:^2.6.5"
-  checksum: 10c0/c629447aa77dccdc5091adef8d2ce146d6b75c0c0ece383e6dfc14911a7faca6177a091a554f4450c4e4d80c36e18b5fd8b2b15f9f85beec3a95a67c5e87c33f
-  languageName: node
-  linkType: hard
-
 "symbol-observable@npm:^1.0.4":
   version: 1.2.0
   resolution: "symbol-observable@npm:1.2.0"
@@ -10847,6 +10763,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tslib@npm:2.3.0":
+  version: 2.3.0
+  resolution: "tslib@npm:2.3.0"
+  checksum: 10c0/a845aed84e7e7dbb4c774582da60d7030ea39d67307250442d35c4c5dd77e4b44007098c37dd079e100029c76055f2a362734b8442ba828f8cc934f15ed9be61
+  languageName: node
+  linkType: hard
+
 "tslib@npm:^2.0.0, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0, tslib@npm:^2.8.0":
   version: 2.8.1
   resolution: "tslib@npm:2.8.1"
@@ -11551,16 +11474,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue3-apexcharts@npm:1.8.0":
-  version: 1.8.0
-  resolution: "vue3-apexcharts@npm:1.8.0"
-  peerDependencies:
-    apexcharts: ">=4.0.0"
-    vue: ">=3.0.0"
-  checksum: 10c0/dfb6e0ff7a5d21227431c52107966e6e0a17bc809d95771f62cdb7cd29039de4bae00d33e632fb9f40f19d09aacd54e07cbf1dab55e925cd206e2a7afd50e0e1
-  languageName: node
-  linkType: hard
-
 "vue@npm:3.5.33":
   version: 3.5.33
   resolution: "vue@npm:3.5.33"
@@ -12031,6 +11944,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"zrender@npm:6.0.0":
+  version: 6.0.0
+  resolution: "zrender@npm:6.0.0"
+  dependencies:
+    tslib: "npm:2.3.0"
+  checksum: 10c0/c794e05ee969c750de6d17cfff60d9d4e6342d1591cf6ba3e488fb084ac7a0415355fe4aec55f83a400fd4cda63792db0533362455058ac06f6e1343be28d0ce
+  languageName: node
+  linkType: hard
+
 "zustand@npm:^5":
   version: 5.0.5
   resolution: "zustand@npm:5.0.5"