apache / apache/echarts

[Feature] Allow HTML formatter in textContent

Open
#20,962 0 comments 0 reactions 0 assignees View on GitHub
en new-feature pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### What problem does this feature solve?

I'm creating interactive visualizations with Echarts and need to include styled, structured content—like a sidebar, modal, or in-chart notifications (similar to `awn.js`) — directly inside the chart area.

While tooltips support `HTML` via `formatter`, `textContent` and label do not. This limits the ability to display dynamic, styled UI components within the chart itself.

Allowing `textContent` to support a `formatter` that returns `HTML` would make it possible to build custom sidebars, modals, and alert-style notifications entirely within the chart, without relying on overlays or DOM elements outside the Echarts rendering layer.

End user experience:

This feature would enhance in-chart interaction, especially for dashboards or mobile views, by enabling self-contained UI elements (e.g. modals or notifications) that are both accessible and visually integrated with the chart. It would also align formatting capabilities with what tooltips already offer, making the API more consistent.

### What does the proposed API look like?

The proposal is to support `formatter` with `HTML` output in `textContent`, even inside custom series using `renderItem`. This would enable rendering rich HTML elements (e.g., modals, sidebars, notifications) directly within the canvas.

option = {
series: [{
type: 'custom',
renderItem: function (params, api) {
return {
type: 'group',
children: [
{
type: 'rect',
shape: {
x: 0,
y: 0,
width: 200,
height: 100
},
style: {
fill: '#fafafa',
stroke: '#ccc'
}
},
{
type: 'text',
textContent: {
formatter: function () {
return `


Sidebar

More details

Confirm

`;
}
},
x: 10,
y: 10
}
]
};
},
data: [0]
}]
};

This would allow embedded UIs like:

Modals (with buttons)

Sidebars (with structured content)

Notifications (like `awn.js`)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.