dosubot[bot] commented on issue #29663:
URL: https://github.com/apache/superset/issues/29663#issuecomment-2244390022
<!-- Answer -->
Yes, there is a setting on the front end to prevent the x-axes from
overlapping when selecting the time period filter for the last quarter in a
mixed chart with red bars and a black line graph. You can use the
`xAxisLabelRotation` property to adjust the layout of the x-axis ticks.
Here is the relevant code snippet:
```ts
const echartOptions: EChartsCoreOption = {
xAxis: {
axisLabel: {
rotate: xAxisLabelRotation,
},
},
};
```
You can set `xAxisLabelRotation` to `45` or another angle to prevent the
x-axes from overlapping. This property is part of the `echartOptions`
configuration in the `transformProps` function.
Additionally, in the Superset configuration, you can set the `truncateXAxis`
parameter to `true` to help manage the x-axis labels:
```yaml
params:
truncateXAxis: true
```
This setting will truncate the x-axis labels, which can also help prevent
overlapping.
In the Superset control panel configuration, you can find the
`xAxisLabelRotation` and `truncateXAxis` settings under the "Chart Options"
section:
```tsx
const config: ControlPanelConfig = {
controlPanelSections: [
// other sections
{
label: t('Chart Options'),
expanded: true,
controlSetRows: [
// other controls
[<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
['x_axis_time_format'],
[xAxisLabelRotation],
[truncateXAxis],
// other controls
],
},
],
};
```
These settings allow you to customize the x-axis label rotation and
truncation directly from the Superset UI.
Here are the definitions for `truncateXAxis` and `xAxisLabelRotation`:
```tsx
export const truncateXAxis: ControlSetItem = {
name: 'truncateXAxis',
config: {
type: 'CheckboxControl',
label: t('Truncate X Axis'),
default: DEFAULT_FORM_DATA.truncateXAxis,
renderTrigger: true,
description: t(
'Truncate X Axis. Can be overridden by specifying a min or max bound.
Only applicable for numerical X axis.',
),
},
};
export const xAxisLabelRotation = {
name: 'xAxisLabelRotation',
config: {
type: 'SelectControl',
freeForm: true,
clearable: false,
label: t('Rotate x axis label'),
choices: [
[0, '0°'],
[45, '45°'],
[90, '90°'],
],
default: defaultXAxis.xAxisLabelRotation,
renderTrigger: true,
description: t('Input field supports custom rotation. e.g. 30 for 30°'),
},
};
```
<sup>[[1]](https://github.com/apache/superset/blob/master/superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js)</sup><sup>[[2]](https://github.com/apache/superset/blob/master/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts)</sup><sup>[[3]](https://github.com/apache/superset/blob/master/superset/examples/configs/charts/Featured
Charts/Mixed.yaml)</sup><sup>[[4]](https://github.com/apache/superset/blob/master/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx)</sup><sup>[[5]](https://github.com/apache/superset/blob/master/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx)</sup>
<!-- Dosu Comment Footer -->
*To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
