apache / apache/echarts

[Feature] Standardized id Field in Mouse Click Event Data

Open
#20,928 0 comments 0 reactions 0 assignees View on GitHub
en new-feature pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
15h 17m
Merged PRs (30d)
5

Description

### What problem does this feature solve?

Currently, the event data associated with a mouse click varies depending on the type of chart element clicked. For example, when a `series` is clicked, the `seriesId` is passed. However, many chart elements—such as `xAxis`, `yAxis`, and `series`—share a common `id` property.

It would be extremely helpful if this `id` value were included as a standard field in the event data (e.g., simply as `id`), regardless of the chart element type. This would allow for straightforward identification without requiring developers to implement complex type-specific matching logic using various properties currently provided.

Developers would still be responsible for assigning unique `id` values when configuring chart options.

**Use Case:**
I maintain a Vaadin add-on ([SOCharts](https://github.com/syampillai/SOCharts)), which wraps ECharts as a [Vaadin](https://vaadin.com/directory/component/so-charts) component. One of the key challenges I face is identifying the chart element clicked and relaying that information back to the Java application in a standardized manner. A consistent id field across all chart elements in the event payload would greatly simplify this process.

### What does the proposed API look like?

```
{
// 'id' of the component
id: string,

// Others just copied from the documentation

// type of the component to which the clicked glyph belongs
// i.e., 'series', 'markLine', 'markPoint', 'timeLine'
componentType: string,
// series type (make sense when componentType is 'series')
// i.e., 'line', 'bar', 'pie'
seriesType: string,
// series index in incoming option.series (make sense when componentType is 'series')
seriesIndex: number,
// series name (make sense when componentType is 'series')
seriesName: string,
// data name, category name
name: string,
// data index in incoming data array
dataIndex: number,
// incoming rwa data item
data: Object,
// Some series, such as sankey or graph, maintains more than
// one types of data (nodeData and edgeData), which can be
// distinguished from each other by dataType with its value
// 'node' and 'edge'.
// On the other hand, most series has only one type of data,
// where dataType is not needed.
dataType: string,
// incoming data value
value: number|Array,
// color of component (make sense when componentType is 'series')
color: string,
// User info (only available in graphic component
// and custom series, if element option has info
// property, e.g., {type: 'circle', info: {some: 123}})
info: *
}
```

Contributor guide

Open the contributing guide

Research direction

Start from the mouse click event data API and compare the payloads produced for series, xAxis, yAxis, markLine, markPoint, and timeLine elements. Determine how each element's configured id is exposed and define the behavior for elements without an id. Done means the event payload consistently includes the standardized id field across the supported chart elements, with coverage for the documented cases.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.