[Bug]: Y labels for chart are truncated

[floretan]

Is there an existing issue for this?

• [x] I have searched the existing issues

Description

When I create a chart with values in certain ranges, the labels of the Y axis are truncated or completely replaced with an ellipse. Here are a few examples:

Weirdly this doesn't affect very large labels, but relatively small ones.

Steps To Reproduce

• Create a chart component
• Replace the chart data with

[
  {
    "x": "Product1",
    "y": 4
  },
  {
    "x": "Product2",
    "y": 8
  },
  {
    "x": "Product3",
    "y": 12
  }
]

The chart labels are truncated.

Public Sample App

No response

Environment

Production

Severity

Medium (Frustrating UX)

Issue video log

No response

Version

Cloud v1.60.0-Snapshot

[shubham88fru]

Hi @rahulbarwal @floretan - can you tell me the expected behaviour? Should the entire label value be visible without any truncation or is there a character limit?

[floretan]

Yes, the entire label should be visible, or only be truncated if it's very long. Currently the label is always truncated, even when the chart is made very wide.

[ALOK9442]

hey @Nikhil-Nandagopal @pranavkanade @vivek-appsmith Could you please assign this issue to me? i've been working on it and have already resolved the issue. I can go ahead and raise a PR, or if you'd prefer, I can first discuss the solution before submitting the PR.

And Also, while working on this, I came across another UI issue. As shown in this picture, when the X-axis name is too long, it affects the placement of other X-axis values, which I believe shouldn't happen. Let me know if we should address this as well!

[ALOK9442]

hey @Nikhil-Nandagopal a gentle reminder for this

hey @Nikhil-Nandagopal @pranavkanade @vivek-appsmith Could you please assign this issue to me? i've been working on it and have already resolved the issue. I can go ahead and raise a PR, or if you'd prefer, I can first discuss the solution before submitting the PR.

And Also, while working on this, I came across another UI issue. As shown in this picture, when the X-axis name is too long, it affects the placement of other X-axis values, which I believe shouldn't happen. Let me know if we should address this as well!

[rahulbarwal]

Hey @ALOK9442 Thank you for taking the time to fix this. I have assigned this issue to you. Please feel free to raise a PR. I'd love to understand your fix for the X-axis problem as well.

[ALOK9442]

Hey @rahulbarwal , thanks for assigning!

Just to confirm, both the X-axis and Y-axis fixes will be handled in this PR, right?

For the X-axis fixes, when labelOrientation is set to AUTO, we rely on the default behavior of ECharts. However, ECharts does not truncate X-axis values by default. To handle this, we need to explicitly set a width and apply overflow: "truncate" when configuring the axis labels.

I was thinking of implementing it in one of these two ways:

Option 1: Handle only for LabelOrientation.AUTO

axisLabelConfig = (allocatedWidth: number) => { if (this.props.labelOrientation === LabelOrientation.AUTO) { return { width: allocatedWidth, overflow: "truncate", ellipsis: "...", hideOverlap: false, interval: 0, }; } else { return { width: allocatedWidth, overflow: "truncate", }; } };

Option 2: Apply truncation for all orientations axisLabelConfig = (allocatedWidth: number) => { return { width: allocatedWidth, overflow: "truncate", ellipsis: "...", hideOverlap: false, interval: 0, }; };

Previously, it was implemented like this:

axisLabelConfig = (allocatedXAxisHeight: number) => { if (this.props.labelOrientation === LabelOrientation.AUTO) { return {}; } else { return { width: allocatedXAxisHeight - this.defaultHeightForXAxisName - this.gapBetweenLabelAndName, overflow: "truncate", }; } }; This code is in: app\client\src\widgets\ChartWidget\component\LayoutBuilders\EChartsXAxisLayoutBuilder.ts

Let me know which approach you think is better or should I just raise the pr and you can check

[vivek-appsmith]

Taken care by @rajatagrawal

[Arup3201]

Hi @floretan @rajatagrawal I saw that the issue is still open. I wanted to know whether it is already resolved or any work is going on it? Thanks.

[floretan]

This is still not addressed. Here's a screenshot from an appsmith instance running version 1.84.0 where the axis labels are still completely replaced with ..., having values that would fit.

[Rexta4]

Greetings @floretan @rajatagrawal @pranavkanade ! I'd love to have a go at this issue if it's still open?

[freshflowbot]

Hi @Rexta4 this is actually still an issue. integers greater 99 are not displayed correctly (screenshot is from today)