Second level axis labels

[richardfogaca]

Second level axis labels

Contribution Summary

This contribution introduces an optional secondary axis labels for the ECharts Timeseries chart when configured as a stacked bar chart. When enabled, this secondary axis displays grouping information derived from the metric names, providing an additional layer of context directly on the axis. This is particularly useful when visualizing data with multiple grouping dimensions where the series name contains concatenated dimension values (e.g., "Sales, West", "Sales, East").

How It Works

1. Control Panel Option: A new checkbox, "Show Secondary X Axis," has been added to the X-Axis section of the control panel for the Bar chart variant (superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx). This option is stored in the form data as showSecondaryXAxis.
2. Data Transformation (transformProps.ts):
   • The main transformProps function now checks for the showSecondaryXAxis flag.
   • If enabled, and if the chart is a stacked bar chart (seriesType === 'bar' and stack is true), it calls a new function stackBarXAxisSecondLevel.
3. Splitting Stacks (transformers.ts):
   • The transformSeries function now calls a new helper splitStack.
   • splitStack processes the transformedSeries object. If stacking is enabled and the series name contains commas (indicating multiple dimensions based on Superset's convention), it splits the name.
   • The part before the first comma is treated as the primary legend item (e.g., "Sales").
   • The remaining parts are joined and assigned to the stack property of the series (e.g., "West" or "East"). This stack property is ECharts' mechanism for grouping bars visually.
4. Secondary Axis Logic (stackBarXAxisSecondLevel in transformers.ts):
   • This function modifies the echartOptions.xAxis.
   • It iterates through the processed series to extract the unique stack values (e.g., "West", "East"). These become the labels for the secondary axis.
   • It also extracts the unique primary x-axis categories from the original data based on the xAxis column.
   • It reconfigures echartOptions.xAxis into an array of two axis definitions:
     • The first (original) x-axis is offset downwards (offset: offsetReal) to make space for the second axis. Its labels represent the primary categories (e.g., time periods or categories from the main x-axis dimension).
     • The second x-axis is added at the bottom (position: 'bottom'). Its data property is populated with the derived stack labels (e.g., "West", "East", "West", "East", ...) repeating for each primary category. This creates the visual grouping effect.
   • It dynamically calculates label rotation and offset based on the length of the secondary axis labels to improve readability.
   • It updates the echartOptions.legend.data to use the modified (split) series names for consistency.

This prototype currently implements the secondary level for the X-axis. A similar approach could be adopted to implement a secondary Y-axis for horizontally oriented charts by adapting the logic in stackBarXAxisSecondLevel (or a new similar function) to modify echartOptions.yAxis instead.

Screenshots

Fork with working prototype

A prototype with the implementation is available in this fork

Why This Matters

For stacked bar charts representing multiple levels of grouping (often encoded in the metric name), the standard visualization can become cluttered or difficult to interpret subgroup totals. Adding a secondary axis level directly displays these subgroupings (e.g., Regions within a Product Category) below the primary axis categories (e.g., Time Periods). This significantly enhances readability by:

• Clearly delineating subgroups within the chart structure.
• Allowing users to quickly compare totals across these subgroups for each primary category.
• Reducing the reliance on complex legend entries or tooltips to understand the hierarchical structure of the data.

[rusackas]

This seems eminently reasonable to me, but how far does the rabbit hole go? If people add lots of dimensions, to they get lots of x axis layers?

[richardfogaca]

@rusackas I see your point, well the initial idea is to limit it to the first 2 levels only