Implementation:Apache Druid MultiAxisChartModule
| Knowledge Sources | |
|---|---|
| Domains | Web_Console, Data_Visualization |
| Last Updated | 2026-02-10 10:00 GMT |
Overview
MultiAxisChartModule is a visualization module that renders multiple measures as overlaid time-series line charts with independent Y-axes using Apache ECharts.
Description
The module registers with the ModuleRepository under the id 'multi-axis-chart' and accepts measures and a time granularity parameter. It constructs a SQL query that groups data by TIME_FLOOR on the detected timestamp column and selects each measure as a separate aggregation. The resulting data is rendered using ECharts in dark mode with cross-axis tooltips, a brush tool for range selection, and multiple Y-axes positioned on the left and right sides of the chart. Users can brush-select a time range and zoom into that interval by updating the WHERE filter clause.
Usage
This module is available as "Multi-axis chart" in the explore view's module picker. It is rendered by ModulePane whenever a user wants to compare multiple measures over time on a single chart with independent scales.
Code Reference
Source Location
- Repository: Apache Druid
- File: web-console/src/views/explore-view/modules/multi-axis-chart-module/multi-axis-chart-module.tsx
- Lines: 1-341
Signature
interface MultiAxisChartParameterValues {
measures: ExpressionMeta[];
granularity: string;
}
// Registered via:
ModuleRepository.registerModule<MultiAxisChartParameterValues>({
id: 'multi-axis-chart',
title: 'Multi-axis chart',
icon: IconNames.SERIES_ADD,
parameters: { ... },
component: function MultiAxisChartModule(props): JSX.Element,
});
Import
// Module is auto-registered via side-effect import:
import './views/explore-view/modules/multi-axis-chart-module/multi-axis-chart-module';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| measures | ExpressionMeta[] | Yes | The measures to display, each rendered as a separate line with its own Y-axis |
| granularity | string | No | Time bucketing granularity: 'auto', 'PT1M', 'PT5M', 'PT30M', 'PT1H', or 'P1D' (default: 'auto') |
Outputs
| Name | Type | Description |
|---|---|---|
| Rendered chart | JSX.Element | An ECharts-based multi-axis line chart with brush selection and zoom-in capability |
Usage Examples
Module auto-registration
// The module registers itself when the file is imported.
// Users select "Multi-axis chart" from the ModulePicker.
// Example parameter values:
const parameterValues = {
measures: [sumRevenueMeasure, countMeasure],
granularity: 'PT1H',
};
Brush-to-zoom interaction
// When the user brush-selects a time range on the chart,
// a PortalBubble appears with "Zoom in" and "Close" buttons.
// Clicking "Zoom in" updates the WHERE clause:
setWhere(
updateFilterClause(
where,
F('TIME_IN_INTERVAL', C('__time'), '2024-01-01T00:00:00.000Z/2024-01-02T00:00:00.000Z'),
),
);