fix(echarts): allow forcing categorical x-axis for temporal columns

[rusackas]

SUMMARY

Fixes #28204

On a temporal x-axis (any chart using a time grain), Superset hands ECharts xAxis.type: 'time', a continuous linear scale. Bars/points are placed at their exact timestamp, but ECharts auto-computes "nice" tick positions (month boundaries, even N-day divisions) that don't coincide with the actual buckets. With weekly grain this is very visible: a bucket starting Nov 30 renders right on top of the Dec tick, and 5 weekly bars can produce 8 misaligned ticks.

Superset already has the right tool for this: the Force categorical toggle (xAxisForceCategoricalControl), which switches the axis to type: 'category' so each bucket becomes a discrete, tick-aligned category. The transform layer already handles temporal data on a categorical axis (the date formatter is selected by column type, not axis type). The only thing blocking these users was the control's visibility gate, which only showed the toggle for Numeric x-axis columns.

This PR expands that gate to include Temporal columns, so the toggle is exposed for time-grain charts. The numeric-only "auto-force when sorted" logic in initialValue is untouched, so existing temporal charts keep their continuous time scale unless the user explicitly opts in (default stays false).

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before: on weekly grain, the "Force categorical" toggle is hidden for date x-axes, so ticks land between the weekly markers (see the reporter's screenshots).

After: the toggle appears for temporal x-axes; enabling it renders one category per bucket with aligned, date-formatted ticks.

TESTING INSTRUCTIONS

1. Create a Bar Chart (or Line/Area/Mixed) with a temporal x-axis and Week time grain.
2. Confirm a new Force categorical checkbox now appears under the Query section (it previously only showed for numeric x-axes).
3. Enable it and verify each weekly bucket gets its own tick, with labels formatted as dates and aligned to the bars/markers.

ADDITIONAL INFORMATION

• Has associated issue: Fixes Weekly time grain in mixed chart: ticks and markers not aligned #28204
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

🤖 Generated with Claude Code

[bito-code-review]

Code Review Agent Run #b5120d

Actionable Suggestions - 0

Review Details

• Files reviewed - 3 · Commit Range: 66158aa..66158aa

  • superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/customControls.tsx
  • superset-frontend/packages/superset-ui-chart-controls/test/shared-controls/customControls.test.tsx
  • superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/transformProps.test.ts
• Files skipped - 0
• Tools

  • Whispers (Secret Scanner) - ✔︎ Successful
  • Detect-secrets (Secret Scanner) - ✔︎ Successful
  • Eslint (Linter) - ✔︎ Successful

---

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

• /review - Manually triggers a full AI review.

• /pause - Pauses automatic reviews on this pull request.

• /resume - Resumes automatic reviews.

• /resolve - Marks all Bito-posted review comments as resolved.

• /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

• Customize agent settings
• Review rules
• General documentation
• FAQ

AI Code Review powered by

[bito-code-review]

The suggestion to replace as any with a concrete type is correct and improves type safety in the test. You can resolve this by importing the ControlStateMapping type (which is already used in the visibility function signature) and using it to type the controls object.

Here is the corrected test snippet:

  const controls: ControlStateMapping = {
    x_axis: { value: 'date_column' },
    datasource: { datasource: {} },
  };

  const visible = xAxisForceCategoricalControl.config.visibility!({
    controls,
  });

There are no other review comments on this pull request. Would you like me to perform any other checks?

superset-frontend/packages/superset-ui-chart-controls/test/shared-controls/customControls.test.tsx

const controls: ControlStateMapping = {
    x_axis: { value: 'date_column' },
    datasource: { datasource: {} },
  };

  const visible = xAxisForceCategoricalControl.config.visibility!({
    controls,
  });

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 64.36%. Comparing base (79cfe4d) to head (28b19eb).

Additional details and impacted files

@@           Coverage Diff           @@
##           master   #41221   +/-   ##
=======================================
  Coverage   64.36%   64.36%           
=======================================
  Files        2651     2651           
  Lines      144812   144812           
  Branches    33417    33417           
=======================================
  Hits        93208    93208           
  Misses      49935    49935           
  Partials     1669     1669           

Flag	Coverage Δ
javascript	68.55% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[bito-code-review]

Code Review Agent Run #7968a2

Actionable Suggestions - 0

Review Details

• Files reviewed - 1 · Commit Range: 66158aa..28b19eb

  • superset-frontend/packages/superset-ui-chart-controls/test/shared-controls/customControls.test.tsx
• Files skipped - 0
• Tools

  • Whispers (Secret Scanner) - ✔︎ Successful
  • Detect-secrets (Secret Scanner) - ✔︎ Successful

---

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

• /review - Manually triggers a full AI review.

• /pause - Pauses automatic reviews on this pull request.

• /resume - Resumes automatic reviews.

• /resolve - Marks all Bito-posted review comments as resolved.

• /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

• Customize agent settings
• Review rules
• General documentation
• FAQ

AI Code Review powered by