Click Event

[akbasferhat]

Hi everyone. I want to get series data when i click a points. i searched but i didnt find any solution. someone help me about it?

`
const chartRef = ref();

        ///////////////////////
        <ApexChart ref="chartRef" type="line" height="350vh" :series="summaryConsumption.series"
        :options="summaryConsumption.chartOptions"
        @markerClick="clickedDataFunc($e,$chart,$opts)"></ApexChart>
        
        <div> For example i want to show clicked datas into this div </div>
        
        function clickedDataFunc(e:any, chart:any, opts:any) {
        console.log(e) //undefined
        console.log(chart) //undefined
        console.log(opts) //undefined
        }

`

[jgs555]

chartOptions:{
chart: {
events: {
dataPointSelection: function(event, chartContext, config) {
// ...
}
}
}
}

[akbasferhat]

events doesnt work in chart defination, i can get click events from clickedDataFunc.

Here is my chart :
`
summaryConsumption = {
series: [],
chartOptions: {
grid: {
show: true,
borderColor: '#90A4AE',
strokeDashArray: 0.1,
position: 'back',
xaxis: {
lines: {
show: true
}
},
yaxis: {
lines: {
show: true
}
},
row: {
colors: undefined,
opacity: 0.5
},
column: {
colors: undefined,
opacity: 0.5
},
padding: {
top: 0,
right: 10,
bottom: 0,
left: 10
},
},
chart: {
height: 300,
type: "line",
animations: {
enabled: true,
},
locales: localesTranslation,
defaultLocale: "tr",

},
stroke: {
  width: 2,
  curve: "straight",
},
markers: {
  size: 5,
  shape: "circle",
  showNullDataPoints: true,
  hover: {
    size: 7,
    sizeOffset: 8
  }
},
colors: colors,
dataLabels: {
  enabled: false,
},
events: {
  dataPointSelection: function (event, chartContext, config) {

    console.log(event, chartContext)
  },
},
xaxis: {
  tickPlacement: 'on',
  type: "datetime",
  crosshairs: {
    show: true
  },
  axisBorder: {
    show: false,
  },
  axisTicks: {
    show: true,
  },
  labels: {
    show: true,
    hideOverlappingLabels: true,
    showDuplicates: false,
    datetimeUTC: false,
    format: 'MMMM',
  },
  tooltip: {
    enabled: true,
    offsetY: 0,
  },
},
yaxis: [
  {
    axisTicks: {
      show: true
    },
    axisBorder: {
      show: true,
    },
    title: {
    },
    labels: {
      show: true,
      offsetX: -15,
      offsetY: 0,
      rotate: 0,
      formatter: function (val: any) {
        return formattedNumber.format(val);
      },
    },
  },
  {
    opposite: true,
    axisTicks: {
      show: true
    },
    axisBorder: {
      show: true,
    },
    title: {
    },
    labels: {
      show: true,
      offsetX: -15,
      offsetY: 0,
      rotate: 0,
      formatter: function (val: any) {
        return formattedNumber.format(val);
      },
    },
  }],
tooltip: {
  followCursor: true,
  enabledOnSeries: true,
  shared: true,
  x: {
    show: true,
    format: 'MMMM',
  },
},
noData: {
  text: "Veri Yok",
  align: 'center',
  verticalAlign: 'middle',
  offsetX: 0,
  offsetY: 0,
  style: {
    color: undefined,
    fontSize: '14px',
    fontFamily: undefined
  }
}

}
}`

i can get click events like this but everythine undefined.
`

    <ApexChart ref="chartRef" type="line" height="350vh" :series="summaryConsumption.series"
    :options="summaryConsumption.chartOptions"
    @markerClick="clickedDataFunc($e,$chart,$opts)"></ApexChart>
    
    <div> For example i want to show clicked datas into this div </div>
    
    function clickedDataFunc(e:any, chart:any, opts:any) {
    console.log(e) //undefined
    console.log(chart) //undefined
    console.log(opts) //undefined
    }

`