How to change style of X-Axis or Y-Axis Name on hover in Echarts?

Question

I tried rich text for name but I am not able to find any way to add on hover style changes like font size, color, shadow. I looked in nameTextStyle key as well but it's not helping.

Answer 1

If you set the triggerEvent property of the axis to true you can catch the hover event and use setOption to customize everything to your needs.

Example:

option = {
  xAxis: {
    name: 'xAxisName',
    triggerEvent: true,
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    name: 'yAxisName',
    triggerEvent: true,
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

myChart.on('mouseover', changeColor);
myChart.on('mouseout', changeColor);

function changeColor(params) {
  if (params.targetType === 'axisName') {
    let color;
    if (params.type === 'mouseover') {
      color = 'red';
    }
    
    const axis = params.componentType;
    const option = {};
    option[axis] = {nameTextStyle: {color: color}};
    myChart.setOption(option);
  }
}