[I] [Feature] Allow HTML formatter in textContent [echarts]

["gioneves (via GitHub)" <gi...@apache.org>]

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: commits-unsubscribe@echarts.apache.org.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org