Interactive Click Events for ApexCharts - Capture Data Point Selection

3rd Party Modules
,
1

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:
props.selection.enabled = true
  1. User clicks → Perspective auto-updates:
props.selection.data = [
  { "x": "Enero", "y": 1250.5, "seriesName": "Energy" }
]
  1. Binding reacts to the change:
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
image843×617 36.8 KB

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:

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!

2

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.

3

Eh, here you go:

View.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"
  }
}
1 Like