Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] Overflow truncate breaks axis label click target position #18306

Open
ianschmitz opened this issue Feb 23, 2023 · 5 comments · May be fixed by ecomfe/zrender#1091
Open

[Bug] Overflow truncate breaks axis label click target position #18306

ianschmitz opened this issue Feb 23, 2023 · 5 comments · May be fixed by ecomfe/zrender#1091
Labels
bug en This issue is in English topic: axis
Milestone

Comments

@ianschmitz
Copy link

ianschmitz commented Feb 23, 2023

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:

image

Expected Behavior

Click target is aligned with axis label text.

Environment

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

Any additional comments?

Related issues:

@ianschmitz ianschmitz added the bug label Feb 23, 2023
@echarts-bot echarts-bot bot added en This issue is in English pending We are not sure about whether this is a bug/new feature. labels Feb 23, 2023
@Ovilia Ovilia removed the pending We are not sure about whether this is a bug/new feature. label Mar 3, 2023
@Ovilia Ovilia added this to the TBD milestone Mar 3, 2023
@Ovilia
Copy link
Contributor

Ovilia commented Mar 3, 2023

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
Copy link

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

@psychopathh
Copy link

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

@gl260
Copy link

gl260 commented Dec 13, 2023

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

太棒了!

@amit-unravel
Copy link

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

This hack worked for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug en This issue is in English topic: axis
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants