[Bug] Overflow truncate breaks axis label click target position

[ianschmitz]

Version

5.4.1

Link to Minimal Reproduction

No response

Steps to Reproduce

Paste the following in the echarts example:

option = {
  xAxis: {
    axisLabel: {
      // BUG: Overflow: "truncate" breaks the click target on axis label
      overflow: 'truncate',
      width: 80
    },
    triggerEvent: true,
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    axisLabel: {
      // BUG: Overflow: "truncate" breaks the click target on axis label
      overflow: 'truncate',
      width: 80
    },
    triggerEvent: true,
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};

Current Behavior

Hovering mouse over an axis label should have a click target that is aligned with the axis label text. Click target is where mouse pointer is hovering in the screenshot:

Expected Behavior

Click target is aligned with axis label text.

Environment

- OS:macOS Monterey
- Browser: Chrome 109
- Framework:

Any additional comments?

Related issues:

• [Bug] axisLabel设置了 overflow: 'truncate'后部分label无法响应点击事件 #17343

[Ovilia]

This seems to be a bug. If you are interested in making a pull request, it can help you fix this problem quicker. Please checkout the wiki to learn more.

[hanshupe007]

Is there any fix planned for this issue? Experiencing the same behavior, click event is not aligned with the text.

[psychopathh]

I added an empty rich: {} to the axisLabel and everything worked as expected

[gl260]

I added an empty rich: {} to the axisLabel and everything worked as expected

太棒了!

[amit-unravel]

I added an empty rich: {} to the axisLabel and everything worked as expected

This hack worked for me.