Open
Description
"zoomed" event not firing when chart zoomed out or zoomed in
npm requirements:
"apexcharts": "^3.49.2",
"vue3-apexcharts": "^1.5.3",
Installed Versions:
├── [email protected]
├── [email protected]
Vue3 Component:
<script setup lang="ts">
import {ChartDateSeries} from "@/interface/ChartDateSeries";
import waterProbeService from "@/service/WaterProbeService";
import {AxiosResponse} from "axios";
import {WaterProbeInterface} from "@/interface/WaterProbeInterface";
const options:ApexCharts.ApexOptions = {
tooltip: {
x: {
show: true,
format: 'dd MMM yyyy HH:mm'
},
y: {
formatter: undefined,
title: {
formatter: (seriesName: any) => `${seriesName}`
}
}
},
chart:{
events:{
zoomed: function (chart, options){console.log('zoom from opts')}
}
},
xaxis: {
type: 'datetime',
labels: {
datetimeUTC: false
}
}
}
;
const series = ref<ChartDateSeries[]>([]);
function load(){
waterProbeService.graph({}).then((response: AxiosResponse)=>{
const graph:ChartDateSeries = {name: "Pressure", data:[]}
series.value.push(graph);
response.data.map((item:WaterProbeInterface)=>{
const x:Date = new Date(item.dateTime *1000);
graph.data.push({x: x, y: Math.floor(item.data.pressure * 10)/10})
})
});
}
load()
</script>
<template>
<apexchart height="200px" type="line" :options="options" :series="series"></apexchart>
</template>
<style scoped lang="sass">
</style>