GitHub user dosubot[bot] added a comment to the discussion: Mixed Chart without
X-Axis Sort By
<!-- Answer -->
Here are the specific implementation steps and code changes to add X-Axis Sort
By to the Mixed Timeseries chart:
***
## Files to Modify
### 1.
`superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx`
**Add imports** at the top of the file:
```typescript
import {
// ... existing imports
xAxisForceCategoricalControl,
xAxisSortControl,
xAxisSortAscControl,
} from '@superset-ui/chart-controls';
```
**Update the "Shared query fields" section**
[[1]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx#L335-L339):
```typescript
// Before:
{
label: t('Shared query fields'),
expanded: true,
controlSetRows: [['x_axis'], ['time_grain_sqla']],
},
// After:
{
label: t('Shared query fields'),
expanded: true,
controlSetRows: [
['x_axis'],
['time_grain_sqla'],
[xAxisForceCategoricalControl],
[xAxisSortControl],
[xAxisSortAscControl],
],
},
```
***
### 2.
`superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/buildQuery.ts`
**Add imports**:
```typescript
import {
// ... existing imports
sortOperator,
extractExtraMetrics,
} from '@superset-ui/chart-controls';
```
**Add `extractExtraMetrics`** to include any metric selected for sorting that
isn't already in the main metrics:
```typescript
const extraMetrics = extractExtraMetrics(formData);
// Include extraMetrics in the query's metrics array
```
**Add `sortOperator` to the post-processing pipeline** for both queries
[[2]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/buildQuery.ts#L76-L83):
```typescript
// Before:
post_processing: [
pivotOperatorInRuntime,
rollingWindowOperator,
timeCompareOperator,
resampleOperator,
renameOperator,
flattenOperator,
].filter(Boolean),
// After:
post_processing: [
pivotOperatorInRuntime,
rollingWindowOperator,
timeCompareOperator,
resampleOperator,
renameOperator,
sortOperator(formData, queryObject),
flattenOperator,
].filter(Boolean),
```
Apply the same change to **Query B's** post-processing pipeline as well.
***
## How It Works
- `xAxisSortControl` provides a dropdown with available columns and metrics to
sort by
[[3]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/customControls.tsx#L91-L154)
- `xAxisSortAscControl` is a checkbox that only appears when a sort value is
selected
[[4]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/customControls.tsx#L156-L170)
- `xAxisForceCategoricalControl` forces the x-axis to be treated as categorical
(needed for proper sorting of non-temporal data)
- `sortOperator` handles the actual reordering of data in the post-processing
pipeline
[[5]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/buildQuery.ts#L106)
***
## Important Limitation
The `sortOperator` **does not work when `groupby` columns are populated**
[[6]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-ui-chart-controls/src/operators/sortOperator.ts#L44-L45):
```typescript
// From sortOperator.ts
isEmpty(formData.groupby) // sort is disabled when groupby has values
```
This means x-axis sorting will only work for charts without groupby columns
(single-series). If your Mixed Timeseries chart uses groupby to create multiple
series, the sort controls will appear but sorting won't take effect. This is
the same limitation that exists in regular Timeseries charts.
***
## Reference Implementation
For a working reference, see how the regular Line chart does it:
`superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/controlPanel.tsx`
uses `sections.echartsTimeSeriesQueryWithXAxisSort`
[[7]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-ui-chart-controls/src/sections/echartsTimeSeriesQuery.tsx#L47-L58),
and its `buildQuery.ts` includes `sortOperator` in the pipeline
[[5]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/buildQuery.ts#L106).
<!-- Dosu Comment Footer -->
*To reply, just mention
[@dosu](https://go.dosu.dev/dosubot?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=reply-with-mention&utm_term=apache%2Fsuperset).*
---
Share context across your team and agents. Try
[Dosu](https://dosu.dev?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=knowledge-infrastructure-tagline&utm_term=apache%2Fsuperset).
[](https://app.dosu.dev/response-feedback?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=knowledge-infrastructure-feedback&utm_term=apache%2Fsuperset&message_id=efd12038-adfe-4ca1-8757-6874001f543a)
[](https://github.dosu.com/apache/superset?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=knowledge-infrastructure-learn-repo&utm_term=apache%2Fsuperset)
[](https://app.dosu.dev/signup?referrer=openSource&source=github-footer&utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=knowledge-infrastructure-add-team&utm_term=apache%2Fsuperset)
GitHub link:
https://github.com/apache/superset/discussions/40413#discussioncomment-17048129
----
This is an automatically sent email for [email protected].
To unsubscribe, please send an email to:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
