I am not able to change the legend icon colour in Echarts

Question

The issue I'm having with echarts (v4.0.4) is that I'm not able to change the legend hover colour on an icon to match my bar graph hover colour that I have provided using series[].empahsis.itemStyle.color.

Looking at the echarts legend api I have not found a property that would allow me to specify the colour I wish of the legend icon to be when hovered on.

For a clearer example see the pictures bellow. I have highlighted the problematic area (Picture one is the graph, picture 2 is when I hover the legend on Total clients. You can see the icon colour does not match the bar emphasis colour. The bar is dark, but the legend icon is barely visible)

Below I have provided my option json that I pass to echarts.

const options = {
  legend: {
    show: true,
    data: [
      {
        name: LANG.clientRetention
      },
      {
        name: LANG.totalClients
      }
    ]
  },
  series: [
    {
      name: LANG.clientRetention,
      type: "line",
      symbolSize: 7,
      lineStyle: {
        width: 3,
        color: style.lineColor
      },
      itemStyle: {
        color: style.lineColor,
        borderWidth: 3,
        opacity: 1
      },
      data: this.getRettention() //this returns a string array
    },
    {
      name: LANG.totalClients,
      type: "bar",
      data: this.getTotalClients(), // this returns a string array
      itemStyle: {
        barBorderRadius: [3, 3, 0, 0],
        color: style.graphColor
      },
      emphasis: {
        itemStyle: {
          color: "#D6E2E3"
        }
      }
    }
  ]
};

Answer 1

You cannot directly define the color field of an icon in Echarts. Fortunately, there is a workaround to do so. Just define the colors array in the option field like below, then the icons will use the colors in order.

option = {
      ...,
      color:['#ae1029','#0065c2','#26c238', '#9876aa', '#fb8649', 
             '#57904b','#d35b5c'],
      series: [...],
      ...
}

Hope this helps.

Answer 2

it's the same issue that i had

you should have the color array that matched with data on top level of option.

if the data have 2 items, color array should have 2 items.

const lineChartConfig = (x, data1, data2) => {
  const option = {
     color: [
              new graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0.5,
                  color: '#24e499',
                },
                {
                  offset: 1,
                  color: 'rgba(255,255,255,0)',
                },
              ]), 
              new graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0.5,
                  color: '#0b75e2',
                },
                {
                  offset: 1,
                  color: 'rgba(255,255,255,0)',
                },
              ])
    ],
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: x,
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    tooltip: {
      trigger: 'axis',
      position: 'top',
      textStyle: {
        color: '#fff',
      },
      borderColor: '#24e499',
      backgroundColor: '#24e499',
    },
    series: [
      {
        type: 'line',
        symbol: 'none',
        lineStyle: {
          width: 2,
          color: '#24e499',
        },
        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0.5,
              color: '#24e499',
            },
            {
              offset: 1,
              color: 'rgba(255,255,255,0)',
            },
          ]),
        },
        data: data1,
      },
      {
        type: 'line',
        symbol: 'none',
        lineStyle: {
          width: 2,
          color: '#0b75e2',
        },
        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0.5,
              color: '#0b75e2',
            },
            {
              offset: 1,
              color: 'rgba(255,255,255,0)',
            },
          ]),
        },
        data: data2,
      },
    ],
  };
  return option;
};

Answer 3

This might not be exactly what you want to do. But, thought of sharing this here, just in case it is useful to achieve what you are trying to do.

This is what I am doing to make sure that the emphasis has the same color as that of the plot.

I have included the required color in the data like below:

chartData = [
  {label: 'Label 1', value: 120, color: 'red'},
  {label: 'Label 2', value: 130, color: 'green'},
];

And used it in the option configuration as given below:

option: {
  color: color: chartData.map(data => data.color),
  series: []
}

You can also apply specific styling to legend/emphasis as given below:

emphasis: {
    itemStyle: {
        color: chartData.map(data => data.color)
    }
}