# Interactive Click Events for ApexCharts - Capture Data Point Selection

**URL:** <https://forum.inductiveautomation.com/t/interactive-click-events-for-apexcharts-capture-data-point-selection/113015>\
**Category:** 3rd Party Modules\
**Tags:** perspective, ignition83\
**Created:** [December 29, 2025, 10:57pm UTC](https://forum.inductiveautomation.com/t/interactive-click-events-for-apexcharts-capture-data-point-selection/113015 "2025-12-29T22:57:21Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Eliott\_Hernandez](https://avatars.discourse-cdn.com/v4/letter/e/77aa72/32.png) [@Eliott\_Hernandez](https://forum.inductiveautomation.com/u/Eliott_Hernandez)\
**Post date:** [December 29, 2025, 10:57pm UTC](https://forum.inductiveautomation.com/t/interactive-click-events-for-apexcharts-capture-data-point-selection/113015/1 "2025-12-29T22:57:21Z")

</div>

### ApexCharts – Capturing Click / Selection Events in Perspective?

Hi community,

I’ve been searching through existing ApexCharts-related threads and found several covering styling, stacking, tooltips, and lifecycle events. However, I haven’t found a clear answer on whether it’s possible to **capture user clicks on chart data points** (bars/points) in order to trigger Perspective actions like navigation or filtering.

This is something the **native XY Chart handles very well** , so I wanted to check with the community before fully giving up on ApexCharts.

* * *

## Use Case

We’re trying to implement a very common **drill-down dashboard pattern** :

- User clicks **“Enero”** bar → navigate to `energy-detail?period=Enero`

- User clicks **“Febrero”** bar → navigate to `energy-detail?period=Febrero`

In other words:

> Click a bar/point → get the category/value → update dashboard state or navigate.

This is essential functionality for executive dashboards and data exploration.

* * *

## How the XY Chart Solves This (Working)

The native XY Chart exposes this cleanly via automatic property updates—no event handlers or JavaScript required.

**Setup:**

1. Enable selection:

```python
props.selection.enabled = true

```

1. User clicks → Perspective auto-updates:

```python
props.selection.data = [
  { "x": "Enero", "y": 1250.5, "seriesName": "Energy" }
]

```

1. Binding reacts to the change:

```python
selected = self.props.selection.data[0]
period = selected['x']

system.perspective.navigate(
    page='energy-detail',
    params={'period': period}
)

```

That’s it—simple, clean, and fully supported.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/0/10e1f3edd9e92dc99f7657ec854e416eb29efe34.png)

* * *

## The Problem with ApexCharts

What we need:

- A **supported way to expose selected data points** (category/value/series) from ApexCharts back into Perspective properties

- Ideally something similar to `props.selection.data`

What we found:

- ApexCharts has **no selection-related properties** exposed in Perspective

* * *

## What We Tried

**1. Looking for selection properties**  
Searched for things like:

- `props.selection.enabled`

- `props.selection.data`

- `props.selectedDataPoint`

→ Nothing exists.

**2. JavaScript events (ApexCharts docs)**  
Tried configuring:

```python
chart.events.dataPointSelection

```

→ JS context is isolated; no access to `self.props` or Perspective actions.

**3. JS → message handlers → custom properties**  
Attempted to bridge JS events back into Perspective.

→ No clear or supported path from ApexCharts JS events to Perspective properties.

* * *

## Current Status

At the moment, we’re **forced to use XY Charts solely for this interaction** , even though we strongly prefer ApexCharts for styling and visual flexibility.

If this limitation is simply due to the current module architecture, that’s totally fine—we’ll stick with XY Charts. We just wanted to confirm before abandoning ApexCharts for interactive dashboards.

* * *

## Questions for the Community

- Has anyone successfully gotten **click or selection events** working with ApexCharts in Perspective?

- Are we missing something obvious or undocumented?

- Is the recommended approach simply to use **XY Charts for interactivity**?

- Should we be looking at a **different charting approach** altogether?

Any guidance or alternative suggestions are welcome. Thanks in advance!

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [December 30, 2025, 1:00am UTC](https://forum.inductiveautomation.com/t/interactive-click-events-for-apexcharts-capture-data-point-selection/113015/2 "2025-12-30T01:00:58Z")

</div>

Seen, but I don’t have time to write up an example.

You’ll want to use `chart.events.dataPointSelection ` to either write to props or send a message to a handler.

In the JavaScripting context you have access to the component through the `this` reference.

I’m more than happy to help but maybe some other forum members can help fill in the details.

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [December 30, 2025, 2:43am UTC](https://forum.inductiveautomation.com/t/interactive-click-events-for-apexcharts-capture-data-point-selection/113015/3 "2025-12-30T02:43:20Z")

</div>

Eh, here you go:

> **View.json**
>
> ```json
> {
> "custom": {
> "lastClicked": {}
> },
> "params": {},
> "propConfig": {
> "custom.lastClicked": {
> "persistent": true
> }
> },
> "props": {},
> "root": {
> "children": [
> {
> "meta": {
> "name": "ApexCharts"
> },
> "position": {
> "height": 354,
> "width": 523,
> "x": 72,
> "y": 113
> },
> "props": {
> "options": {
> "chart": {
> "events": {
> "dataPointSelection": "(event, chartContext, opts) \u003d\u003e { \nconsole.log(opts);\n\nconst payload \u003d opts;\ndelete payload[\u0027w\u0027];\nperspective.sendMessage(\u0027bar-clicked\u0027, payload, \u0027view\u0027)\n}"
> }
> },
> "dataLabels": {
> "enabled": false
> },
> "fill": {
> "opacity": 1
> },
> "legend": {
> "horizontalAlign": "left",
> "offsetX": 40,
> "position": "top"
> },
> "plotOptions": {
> "bar": {
> "dataLabels": {
> "total": {
> "enabled": true,
> "style": {
> "fontSize": "13px",
> "fontWeight": 900
> }
> }
> },
> "horizontal": true
> }
> },
> "stroke": {
> "colors": [
> "#fff"
> ],
> "width": 1
> },
> "title": {
> "align": "left",
> "text": "Bar Chart"
> },
> "tooltip": {
> "y": {
> "formatter": "(val) \u003d\u003e val + \u0027K\u0027"
> }
> },
> "xaxis": {
> "labels": {
> "formatter": "(val) \u003d\u003e val + \u0027K\u0027"
> },
> "position": "bottom"
> }
> },
> "series": [
> {
> "data": [
> {
> "x": "2012",
> "y": 22
> },
> {
> "x": "2013",
> "y": 43
> },
> {
> "x": "2014",
> "y": 21
> }
> ],
> "name": "Marine Sprite"
> },
> {
> "data": [
> {
> "x": "2012",
> "y": 13
> },
> {
> "x": "2013",
> "y": 43
> },
> {
> "x": "2014",
> "y": 32
> }
> ],
> "name": "Striking Calf"
> },
> {
> "data": [
> {
> "x": "2012",
> "y": 15
> },
> {
> "x": "2013",
> "y": 11
> },
> {
> "x": "2014",
> "y": 20
> }
> ],
> "name": "Tank Picture"
> },
> {
> "data": [
> {
> "x": "2012",
> "y": 6
> },
> {
> "x": "2013",
> "y": 9
> },
> {
> "x": "2014",
> "y": 4
> }
> ],
> "name": "Bucket Slope"
> },
> {
> "data": [
> {
> "x": "2012",
> "y": 25
> },
> {
> "x": "2013",
> "y": 24
> },
> {
> "x": "2014",
> "y": 10
> }
> ],
> "name": "Reborn Kid"
> }
> ],
> "type": "bar"
> },
> "type": "embr.chart.apex-charts"
> },
> {
> "meta": {
> "name": "Markdown"
> },
> "position": {
> "height": 200,
> "width": 560,
> "x": 105,
> "y": 527
> },
> "propConfig": {
> "props.source": {
> "binding": {
> "config": {
> "expression": "\u0027Last Clicked : \u0027 + {view.custom.lastClicked}"
> },
> "type": "expr"
> }
> }
> },
> "type": "ia.display.markdown"
> }
> ],
> "meta": {
> "name": "root"
> },
> "scripts": {
> "customMethods": [],
> "extensionFunctions": null,
> "messageHandlers": [
> {
> "messageType": "bar-clicked",
> "pageScope": false,
> "script": "\tself.view.custom.lastClicked \u003d payload",
> "sessionScope": false,
> "viewScope": true
> }
> ]
> },
> "type": "ia.container.coord"
> }
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![Eliott\_Hernandez](https://avatars.discourse-cdn.com/v4/letter/e/77aa72/32.png) [@Eliott\_Hernandez](https://forum.inductiveautomation.com/u/Eliott_Hernandez)\
**Post date:** [January 2, 2026, 4:20pm UTC](https://forum.inductiveautomation.com/t/interactive-click-events-for-apexcharts-capture-data-point-selection/113015/4 "2026-01-02T16:20:56Z")

</div>

@bmusson - This is brilliant! Your solution with `perspective.sendMessage('bar-clicked', payload, 'view')` in the dataPointSelection event worked flawlessly. I was initially trying to interact directly with Perspective properties from the JavaScript context, which wasn't working as expected. The message handler pattern you demonstrated is much cleaner and more maintainable. Being able to access `opts.dataPointIndex` and `opts.seriesIndex` through the payload gives me exactly what I need to implement dynamic navigation in my dashboards. Really appreciate the working JSON example - made implementation straightforward. Cheers!

---

<div class="post-metadata">

**Author:** ![Pico\_Sankari](https://avatars.discourse-cdn.com/v4/letter/p/aeb1de/32.png) [@Pico\_Sankari](https://forum.inductiveautomation.com/u/Pico_Sankari)\
**Post date:** [February 17, 2026, 7:26pm UTC](https://forum.inductiveautomation.com/t/interactive-click-events-for-apexcharts-capture-data-point-selection/113015/5 "2026-02-17T19:26:50Z")

</div>

Is it possible to make this work with multi selection? I’ve added the ability to multi select with `{`  
`"active": {`  
`"allowMultipleDataPointsSelection": true,`  
`"filter": {`  
`"type": "darken"`  
`}`  
`},`  
`"hover": {`  
`"filter": {`  
`"type": "lighten"`  
`}`  
`}`  
`}`

However, I’m still only able to access the most recently selected data with dataPointSelectionHandler. Is all of the currently selected data stored somewhere?

---

<div class="post-metadata">

**Author:** ![uy\_huynh](https://avatars.discourse-cdn.com/v4/letter/u/54ee81/32.png) [@uy\_huynh](https://forum.inductiveautomation.com/u/uy_huynh)\
**Post date:** [July 24, 2026, 4:40am UTC](https://forum.inductiveautomation.com/t/interactive-click-events-for-apexcharts-capture-data-point-selection/113015/6 "2026-07-24T04:40:29Z")

</div>

> [@bmusson](#):
>
> `"(event, chartContext, opts) \u003d\u003e { \nconsole.log(opts);\n\nconst payload \u003d opts;\ndelete payload[\u0027w\u0027];\nperspective.sendMessage(\u0027bar-clicked\u0027, payload, \u0027view\u0027)\n}"`

Hi all,

Not sure why my config for datapointselection not working. I see nothing came up on my console log

```python
def onMessageReceived(self, payload):
    print(payload)

```

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/2/b29ba9ea3538051a0e6d981715cfadce051a8bad.png)

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [July 24, 2026, 4:50am UTC](https://forum.inductiveautomation.com/t/interactive-click-events-for-apexcharts-capture-data-point-selection/113015/7 "2026-07-24T04:50:01Z")

</div>

1. Are you using the `ApexCharts` component, or the `ApexCharts (legacy)` component? Only the non-legacy version has JavaScript support.
2. Do you see the `console.log(opts)` happening in the client?

---

<div class="post-metadata">

**Author:** ![uy\_huynh](https://avatars.discourse-cdn.com/v4/letter/u/54ee81/32.png) [@uy\_huynh](https://forum.inductiveautomation.com/u/uy_huynh)\
**Post date:** [July 27, 2026, 12:10am UTC](https://forum.inductiveautomation.com/t/interactive-click-events-for-apexcharts-capture-data-point-selection/113015/8 "2026-07-27T00:10:04Z")

</div>

Hi bmusson,

1. I'm using the non legacy line apexchart  
2.No I don't see anything on console tab of client ( running perspective on edge)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/a/aae501ed5b6302798ccbbcb6b9ebd4aa832b2f8d.png)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/2/6287e2f3de6b57fcd9df19909ca0da2301938938.png)

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [July 27, 2026, 3:49am UTC](https://forum.inductiveautomation.com/t/interactive-click-events-for-apexcharts-capture-data-point-selection/113015/9 "2026-07-27T03:49:09Z")

</div>

> [@uy\_huynh](#):
>
> 1. running

`print` will go to the wrapper log, not the browser console. you need to use `system.perspective.print` to print to the client browser console

---

<div class="post-metadata">

**Author:** ![uy\_huynh](https://avatars.discourse-cdn.com/v4/letter/u/54ee81/32.png) [@uy\_huynh](https://forum.inductiveautomation.com/u/uy_huynh)\
**Post date:** [July 27, 2026, 4:23am UTC](https://forum.inductiveautomation.com/t/interactive-click-events-for-apexcharts-capture-data-point-selection/113015/10 "2026-07-27T04:23:42Z")

</div>

> [@bmusson](#):
>
> ```python
> "dataPointSelection": "(event, chartContext, opts) \u003d\u003e { \nconsole.log(opts);\n\nconst payload \u003d opts;\ndelete payload[\u0027w\u0027];\nperspective.sendMessage(\u0027bar-clicked\u0027, payload, \u0027view\u0027)\n}"
> 
> ```

Yup. Supposed to be system.perspective.print !

Also, not sure why mine apex line chart only works with event click (with marker size has to be big enough to clickable). The datapointselection doesn't work for my case

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [July 27, 2026, 7:01am UTC](https://forum.inductiveautomation.com/t/interactive-click-events-for-apexcharts-capture-data-point-selection/113015/11 "2026-07-27T07:01:27Z")

</div>

> [@uy\_huynh](#):
>
> The datapointselection doesn't work for my case

It looks like `dataPointSelection` doesn't function on Line charts; the equivalent method seems to be `markerClick`: