[Feature] Allow HTML formatter in textContent
- 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
Assessment
This issue has not been assessed yet.