sanganasrikanth9618 opened a new issue, #19691:
URL: https://github.com/apache/echarts/issues/19691

   ### Version
   
   5.5.0, 5.4.3
   
   ### Link to Minimal Reproduction
   
   https://codepen.io/Srikanth-Sangana/pen/ZEZQyMd
   
   ### Steps to Reproduce
   
   1. I have added a simple suing below options with base64 image but i wan to 
add SVG  icon
   
   Options:
   import * as echarts from 'echarts';
   var chartDom = document.getElementById('main');
   var myChart = echarts.init(chartDom);
   var option;
   
   const base64ImageUpArrow = 
'data:png;base64,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';
   var labelFormatters = [
     '{{title|$61,18M} (-37,31M {upArrow|})}',
     '$23,87M (-0,00M {upArrow|})',
     '$3,32M (20,55M {upArrow|})'
   ];
   
   option = {
     xAxis: {
       type: 'category',
       data: ['Mon', 'Tue', 'Wed']
     },
     yAxis: {
       type: 'value'
     },
     series: [
       {
         data: [120, 200, 150],
         type: 'bar',
         label: {
           show: true,
           fontSize: 10,
           position: 'outside',
           formatter: (params) => {
             return `${labelFormatters[params.dataIndex]}`;
           },
           rich: {
             upArrow: {
               height: 20,
               align: 'center',
               backgroundColor: {
                 image: base64ImageUpArrow // Path to your icon
               }
             }
           }
         }
       }
     ]
   };
   
   option && myChart.setOption(option);
   
   ![Sending 
imgae](https://github.com/apache/echarts/assets/144200834/1f5d2091-23a1-4e9c-bc64-38448fc40655)
   
   
   ### Current Behavior
   
   I have tried a couple of ways, but I don't think SVG icons are supported 
correctly at series label background color image
   
   ### Expected Behavior
   
   I want to add an SVG icon in the Label background color Image prop.
   
   ### Environment
   
   ```markdown
   - OS:
   - Browser:
   - Framework:
   ```
   
   
   ### Any additional comments?
   
   _No response_


-- 
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]

Reply via email to