Event Handlers and Custom Functions
This guide shows how to make your custom charts interactive using event handlers and reusable custom functions (customFn).
What Are Event Handlers
Event handlers let you define what happens when a user interacts with the chart, such as clicking or hovering over a data point. Use event handlers in the custom chart logic to display messages, log actions, or apply filters based on user input.
Common event handlers:
click
: Clicking a chart elementmousemove
: Hovering over a data pointlegendchanged
: Selecting or unselecting a legend item
Before you begin, note the following:
- Charts in OpenObserve use an
option
object. - Use the
o2_events
block to specify the event type, such asclick
. - Associate the event with a function that will run when the event occurs.
How to Create Event Handlers
Step 1: Create a basic chart with labels and values
Step 2: Add the o2_events
block to the chart logic
This tells the chart what kind of user action (event) you want to respond to.
Here, we want to respond to a click
event:
handleClick
function.
Step 3: Write the event handler function
This function runs every time the user clicks a bar.
What is params
?
params
contains information about the thing the user clicked, such as:
name
: The label of the bar (for example, A)value
: The number shown on the bar (for example, 10)
What is chart
?
This is a reference to the whole chart. You can use it to access other parts of the chart configuration such as to call custom functions.
Step 4: Apply and test
Click Apply in the OpenObserve custom chart editor.
Then click on a bar and check the browser console.
You should see something like:

Step 5 (optional): Add more events
Further, you can add more event handlers such as mousemove
, legendchanged
like this:
What Are Custom Functions
Custom functions (customFn) are special sections inside the chart’s option
object where you can define reusable functions.
These functions can be used:
- To format messages
- To apply logic such as filters
- To keep your event handlers simple
How to Create Custom Functions
Example: You have a chart showing bars for A, B, and C. When the user clicks on a bar, you want to format the output like:
click
event handler.
Step 1: Add a customFn
block inside your chart’s option
object
Note:
formatMessage
is the name of your reusable function.
Step 2: Write the custom function
This function takes a label and value, and returns a readable message.
Note: You can write this function anywhere in the script, as long as it is available when the chart runs.
Step 3: Update the event handler to use customFn
Update your click
handler to call this reusable function:
How to call a customFn
To call a function you defined in customFn
, use the following format: chart._model.option.customFn.formatMessage(...)
Note:
You need to pass in the label and value that the user clicked.
The result is logged to the console.
Step 4: Apply and test
Click Apply.
Then click a bar in the chart.
The browser console will show:

Troubleshooting
-
When the chart does not respond to clicks:
- Ensure
o2_events
is defined in theoption
object. - Confirm the handler function such as handleClick is defined correctly.
- Ensure
-
When
customFn is not a function
error occurs:- Ensure the function is defined outside the
option
object. - The name in
customFn
must match the actual function name.
- Ensure the function is defined outside the
-
When only one event works when multiple are defined:
- Verify each event uses a uniquely named handler.
- Ensure all handlers are declared before the chart is rendered.