ECharts Axis Configuration#

Superset's ECharts plugins distinguish between two separate axis concepts that are easily conflated:

• Axis labels — data-derived strings rendered by ECharts on each tick (e.g., time values, category names). These are controlled via axisLabel formatter, rotation, and interval settings.
• Axis titles — optional user-provided text set in form data as xAxisTitle / yAxisTitle. These map to ECharts' name, nameGap, and nameLocation properties on each axis object.

This distinction matters because axis title presence also drives chart padding: transformProps checks !!yAxisTitle and !!xAxisTitle to set boolean flags that getPadding uses to expand the plot grid 1.

Axis Title Configuration#

Axis titles are form-data fields with empty-string defaults 2:

These are applied directly in transformProps.ts when building the ECharts xAxis and yAxis objects.

Axis Label Controls (Shared)#

Shared label controls are defined in controls.tsx and reused across chart types:

• xAxisLabelRotation — SelectControl (freeForm) with preset choices 0°/45°/90°; default 0 3.
• xAxisLabelInterval — SelectControl with 'auto' (default) or '0' (show all labels) 4.
• truncateXAxis — Checkbox to truncate the X axis range; only applies to numerical axes 5.
• xAxisBounds — BoundsControl for explicit min/max; only visible when truncateXAxis is enabled 6.

Default values for rotation and interval come from defaultXAxis in defaults.ts.

The axisLabel object in the ECharts config receives formatter, rotate, interval, and hideOverlap: true 7.

Note on Y-axis labels: Y-axis label formatting is controlled by y_axis_format / yAxisFormat (plus optional currencyFormat). The formatter is built via getYAxisFormatter and applied to yAxis.axisLabel.formatter 8. There is no equivalent yAxisLabelRotation user control — ECharts defaults to 0° for value axes.

Axis Swapping and Orientation#

The orientation field (OrientationType.Vertical | OrientationType.Horizontal) controls whether x and y axes are swapped. The OrientationType enum is defined in Timeseries/types.ts:

Vertical = 'vertical' (default)
Horizontal = 'horizontal'

After building both axis objects independently, transformProps swaps them when isHorizontal is true 9:

if (isHorizontal) {
  [xAxis, yAxis] = [yAxis, xAxis];
  [padding.bottom, padding.left] = [padding.left, padding.bottom];
}

This means the logical "value axis" (with log scale, bounds, format options) and the logical "category/time axis" (with time format, label rotation) are swapped as complete objects — there is no selective property migration.

Orientation-Aware Visibility in the Bar Chart Control Panel#

The Bar Chart (Regular/Bar/controlPanel.tsx) is the primary chart type with a user-facing orientation toggle. It uses two factory functions to generate orientation-aware control rows 10:

• createAxisTitleControl(axis) — produces x_axis_title, x_axis_title_margin, y_axis_title, y_axis_title_margin, and y_axis_title_position rows. Each control's visibility callback checks OrientationType to show only the controls that correspond to the "horizontal" or "vertical" semantic axis.
• createAxisControl(axis) — produces time format, label rotation, label interval, value format, log scale, truncate, and bounds controls; each with the same orientation-based visibility logic.

The key pattern is: each control always stores its value in a fixed form-data key (x_axis_title, y_axis_title, etc.), but is shown or hidden depending on whether the current orientation makes it the "category axis" or the "value axis" 11. disableStash: true and resetOnHide: false are set on all these controls so their values persist when the user switches orientation 12.

getPadding and Grid Offset#

getPadding in transformers.ts calculates the ECharts grid padding. Relevant axis-title logic:

• When a Y-axis title is present and positioned 'Top', the top padding is increased by yAxisTitleMargin 13.
• When positioned 'Left', the left padding is increased by yAxisTitleMargin 14.
• When an X-axis title is present, bottom padding grows by xAxisTitleMargin 15.
• The isHorizontal flag is forwarded to getChartPadding (from @superset-ui/chart-controls), which handles legend-position offsets in the horizontal case 16.

Key Files#