Skip to content

fix: Last Month Label Missing on X-Axis in Time Series Line Charts #36085

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.

Sign up for GitHub

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

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+725 −699
Open

fix: Last Month Label Missing on X-Axis in Time Series Line Charts #36085

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a5150af
fixed Last Month Label Missing on X-Axis in Time Series Line Charts
developerzohaib786 Nov 12, 2025
6913dff
attempt to fix the error that was review by msyavuz
developerzohaib786 Nov 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -525,7 +525,7 @@ export default function transformProps(
nameGap: convertInteger(xAxisTitleMargin),
nameLocation: 'middle',
axisLabel: {
hideOverlap: true,
hideOverlap: xAxisType !== AxisType.Time,
Copy link

@korbit-ai korbit-ai bot Nov 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Time axis label overlap not prevented category Functionality

Tell me more
What is the issue?

The conditional logic for hideOverlap may cause label overlap issues for time-based charts where labels could still overlap despite being disabled.

Why this matters

When xAxisType is AxisType.Time, hideOverlap will be set to false, which means overlapping labels will be displayed. This could result in unreadable or cluttered time axis labels, especially when there are many data points or long time labels that naturally overlap.

Suggested change ∙ Feature Preview

Consider the specific use case requirements. If time labels should never overlap, keep hideOverlap: true for all axis types. If time labels need to show all values even when overlapping, consider adding additional logic to handle label formatting or rotation:

hideOverlap: xAxisType !== AxisType.Time ? true : shouldShowAllTimeLabels,

Or implement proper label spacing/rotation for time axes to prevent overlap while showing all labels.

Provide feedback to improve future suggestions

Nice Catch Incorrect Not in Scope Not in coding standard Other

💬 Looking for more details? Reply to this comment to chat with Korbit.

Copy link

@korbit-ai korbit-ai bot Nov 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unnecessary computation in hideOverlap property category Performance

Tell me more
What is the issue?

The hideOverlap property is being computed on every render by comparing xAxisType to AxisType.Time, which is an unnecessary computation since these values don't change during the component lifecycle.

Why this matters

This creates a minor performance overhead as the comparison is executed on every function call, even though the result will be the same for a given xAxisType value throughout the component's lifecycle.

Suggested change ∙ Feature Preview

Pre-compute the boolean value and store it in a variable before the xAxis object definition:

const shouldHideOverlap = xAxisType !== AxisType.Time;

let xAxis: any = {
  type: xAxisType,
  name: xAxisTitle,
  nameGap: convertInteger(xAxisTitleMargin),
  nameLocation: 'middle',
  axisLabel: {
    hideOverlap: shouldHideOverlap,
    formatter: xAxisFormatter,
    rotate: xAxisLabelRotation,
    interval: xAxisLabelInterval,
  },
  // ... rest of config
};
Provide feedback to improve future suggestions

Nice Catch Incorrect Not in Scope Not in coding standard Other

💬 Looking for more details? Reply to this comment to chat with Korbit.

formatter: xAxisFormatter,
rotate: xAxisLabelRotation,
interval: xAxisLabelInterval,
Expand Down
37 changes: 37 additions & 0 deletions superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/transformProps.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -722,4 +722,41 @@ describe('legend sorting', () => {
'Boston',
]);
});

it('should set hideOverlap to false for time-based x-axis', () => {
const chartProps = new ChartProps(chartPropsConfig);
const transformed = transformProps(
chartProps as EchartsTimeseriesChartProps,
);

expect(transformed.echartOptions.xAxis).toEqual(
expect.objectContaining({
axisLabel: expect.objectContaining({
hideOverlap: false,
}),
}),
);
});

it('should set hideOverlap to true for categorical x-axis', () => {
const categoricalFormData = {
...formData,
xAxisForceCategorical: true,
};
const chartProps = new ChartProps({
...chartPropsConfig,
formData: categoricalFormData,
});
const transformed = transformProps(
chartProps as EchartsTimeseriesChartProps,
);

expect(transformed.echartOptions.xAxis).toEqual(
expect.objectContaining({
axisLabel: expect.objectContaining({
hideOverlap: true,
}),
}),
);
});
});
Loading