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
    }

`

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.