echartsapache-echartsngx-echarts

In ngx-echarts, is there a way to configure the legend icon inactive state?


I'm configuring the legend of my scatter chart using ngx-echarts. Instead of a fixed symbol to represent my data series in the legend, I would like to display an icon that represents a checked checkbox when active and an unchecked checkbox when inactive.

I achieved the first one using the "icon" parameter:

this.chartOption = {
  legend: {
   data: {
      name: 'serie1',
      icon: 'path://m419-321 289-290-43-43-246 247-119-119-43 43 162 162ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Z'
      },
   data: {
      name: 'serie2',
      icon: 'path://m419-321 289-290-43-43-246 247-119-119-43 43 162 162ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Z'
      }
   }
}

But, while the documentation mentions inactiveColor, inactiveBorderColor etc. to configure the behaviour of the legend when inactive, I don't see an equivalent for the icon (like "inactiveIcon").

Is there anything I've missed?

Thanks in advance


Solution

  • You can use the legendselectchanged event to dynamically change the icon (or any other) properties of the legend.

    Assuming that you set the svg path in a string and create the echarts instance myChart by the standard recipe:

    const myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    
    const iconCheckedPath = 'path://m419-321 289-290-43-43-246 247-119-119-43 43 162 162ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Z';
    

    with the initial legend option as

    const option = {
        // ........ other options
        legend: {
            data: [{
                    name: 'serie1',
                    icon: iconCheckedPath
                },
                {
                    name: 'serie2',
                    icon: iconCheckedPath
                }
            ],
            // .....        
        }
        // ....
    };
    myChart.setOption(option);
    

    you may set the event handler as

    myChart.on('legendselectchanged', function ({selected}) {
        myChart.setOption({
            legend:{
                data: Object.entries(selected)
                    .map(([name, nameSelected]) =>
                        ({name, icon: nameSelected ? iconCheckedPath: 'square'}))
            }
        })
    });
    

    Here's a working example in a codesandbox, forked from one of echart's standard examples.

    In case there are other options in legend.data, one may merge them with the new options with something on the lines of

    myChart.on('legendselectchanged', function ({selected}) {
        const actualData = myChart.getOption().legend[0].data;
        Object.entries(selected).forEach(([name, nameSelected])=>{
          const dataObj = actualData.find(({name: actualName})=>actualName === name);
          if(dataObj){
            dataObj.icon = nameSelected ? iconCheckedPath: 'square';
          }
        });
        myChart.setOption({
            legend:{
                data: actualData
            }
        })
    });
    

    Here's a codepen example with that.