gioneves opened a new issue, #20962:
URL: https://github.com/apache/echarts/issues/20962
### 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 `
<div style="padding:10px; font-family:sans-serif;">
<strong>Sidebar</strong><br/>
<span style="color:#888;">More details</span><br/>
<button style="margin-top:8px;">Confirm</button>
</div>
`;
}
},
x: 10,
y: 10
}
]
};
},
data: [0]
}]
};
This would allow embedded UIs like:
Modals (with buttons)
Sidebars (with structured content)
Notifications (like `awn.js`)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
