[Feature] Allow HTML formatter in textContent

[gioneves]

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)