Implementation:Apache Druid ContinuousChartRender

Knowledge Sources	Apache_Druid
Domains	Web_Console, Data_Visualization
Last Updated	2026-02-10 10:00 GMT

Overview

ContinuousChartRender is a React component that renders an SVG-based continuous time-series chart with support for multiple measures, stacked/faceted data, bar/area/line mark types, interactive selection, and time-shift panning.

Description

The component accepts pre-processed RangeDatum data (ordered in reverse chronological order) and renders it as a multi-panel SVG chart using D3 scales and axes. Each measure gets its own vertically stacked sub-chart with an independent Y-axis scale. It supports three mark types (bar, area, line) with configurable curve interpolation (smooth, linear, step), optional faceting with color-coded series, and horizontal gridlines. User interactions include click-and-drag to select a time range (with a PortalBubble showing sum/value and a "Zoom in" button), shift-drag to pan the time domain, keyboard Escape to cancel, and a zoom-out button. The component tracks the current time with a "now" line and adapts to stage resizing.

Usage

ContinuousChartRender is used by the TimeChartModule to render the primary time-series visualization. It is instantiated with pre-fetched and processed data whenever the time chart module needs to display its chart area.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/views/explore-view/modules/time-chart-module/continuous-chart-render.tsx
• Lines: 1-659

Signature

export type Range = [number, number];

export interface RangeDatum {
  start: number;
  end: number;
  measures: number[];
  facet: string | undefined;
}

export interface StackedRangeDatum extends RangeDatum {
  offset: number;
}

export type ContinuousChartMarkType = 'bar' | 'area' | 'line';
export type ContinuousChartCurveType = 'smooth' | 'linear' | 'step';

export interface ContinuousChartRenderProps {
  data: RangeDatum[];
  facets: string[] | undefined;
  facetColorizer: (facet: string) => string;
  granularity: Duration;
  markType: ContinuousChartMarkType;
  curveType?: ContinuousChartCurveType;
  measures: readonly ExpressionMeta[];
  stage: Stage;
  margin?: Margin;
  timezone: Timezone;
  yAxisPosition?: 'left' | 'right';
  showHorizontalGridlines?: 'auto' | 'always' | 'never';
  domainRange: Range | undefined;
  onChangeRange(range: Range): void;
}

export const ContinuousChartRender = function ContinuousChartRender(
  props: ContinuousChartRenderProps,
): JSX.Element | undefined;

Import

import { ContinuousChartRender } from './views/explore-view/modules/time-chart-module/continuous-chart-render';

I/O Contract

Inputs

Name	Type	Required	Description
data	RangeDatum[]	Yes	Time-bucketed data ordered in reverse chronological order; each datum has start/end timestamps, measure values, and optional facet
facets	undefined	No	List of facet values for stacked/colored rendering
facetColorizer	(facet: string) => string	Yes	Function returning a color string for a given facet value
granularity	Duration	Yes	The time bucketing granularity used for snapping selections
markType	ContinuousChartMarkType	Yes	Visual mark type: 'bar', 'area', or 'line'
curveType	ContinuousChartCurveType	No	Curve interpolation for area/line marks: 'smooth', 'linear', or 'step'
measures	readonly ExpressionMeta[]	Yes	The measures being displayed, one sub-chart per measure
stage	Stage	Yes	The width and height available for rendering
margin	Margin	No	Optional custom margin overrides
timezone	Timezone	Yes	Timezone for axis formatting and time rounding
yAxisPosition	'right'	No	Position of the Y-axis
showHorizontalGridlines	'always' | 'never'	No	Control horizontal gridline visibility
domainRange	undefined	No	The x-axis domain as [start, end] timestamps; defaults to data extent
onChangeRange	(range: Range) => void	Yes	Callback invoked when the user zooms in or pans the time range

Outputs

Name	Type	Description
Rendered SVG chart	undefined	Multi-panel SVG time-series chart with interactive selection, panning, and zoom; returns undefined if the inner stage is invalid

Usage Examples

Rendering a time chart with bar marks

<ContinuousChartRender
  data={processedData}
  facets={facetValues}
  facetColorizer={(facet) => colorAssigner.getColor(facet)}
  granularity={new Duration('PT1H')}
  markType="bar"
  measures={[countMeasure, sumRevenueMeasure]}
  stage={chartStage}
  timezone={timezone}
  yAxisPosition="left"
  showHorizontalGridlines="auto"
  domainRange={currentRange}
  onChangeRange={(range) => setDomainRange(range)}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development