Implementation:Apache Druid ContinuousChartSingleRender

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

Overview

ContinuousChartSingleRender is a React component that renders a single measure's sub-chart within the ContinuousChartRender multi-panel layout, handling bar, area, and line mark rendering with facet coloring and Y-axis display.

Description

The component receives pre-stacked data for one measure index and renders it as an SVG group element. For bar marks, it draws individual rectangles for each data bucket with stacked offsets. For area and line marks, it uses D3 shape generators (area and line) with configurable curve interpolation (smooth via curveMonotoneX, linear, or step) and handles data gaps by inserting nulls. It renders facet-colored series, highlights the selected datum (as a rectangle for bars or a circle for area/line), displays optional horizontal gridlines, and positions a Y-axis on the left or right side using D3 axis generators. It also fills in missing facet data with zeros to maintain consistent stacking.

Usage

ContinuousChartSingleRender is rendered by ContinuousChartRender once for each measure in the measures array. It is placed within an SVG group that is vertically offset to create the multi-panel chart layout.

Code Reference

Source Location

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

Signature

export interface ContinuousChartSingleRenderProps {
  data: StackedRangeDatum[];
  measureIndex: number;
  facets: string[] | undefined;
  facetColorizer: (facet: string) => string;
  markType: ContinuousChartMarkType;
  curveType?: ContinuousChartCurveType;
  timeScale: ScaleTime<number, number>;
  measureScale: ScaleLinear<number, number>;
  innerStage: Stage;
  yAxisPosition?: 'left' | 'right';
  showHorizontalGridlines?: boolean;
  selectedDatum?: StackedRangeDatum;
  selectionFinalized?: boolean;
  transform?: string;
  title?: string;
}

export const ContinuousChartSingleRender = function ContinuousChartSingleRender(
  props: ContinuousChartSingleRenderProps,
): JSX.Element;

Import

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

I/O Contract

Inputs

Name	Type	Required	Description
data	StackedRangeDatum[]	Yes	Pre-stacked range data for this measure, with offset values for stacking
measureIndex	number	Yes	The index of the measure being rendered within the measures array
facets	undefined	No	Ordered list of facet values for consistent stacking and coloring
facetColorizer	(facet: string) => string	Yes	Function returning a CSS color string for each facet value
markType	ContinuousChartMarkType	Yes	The visual mark type: 'bar', 'area', or 'line'
curveType	ContinuousChartCurveType	No	Curve interpolation type for area/line marks: 'smooth', 'linear', or 'step'
timeScale	ScaleTime<number, number>	Yes	D3 time scale mapping timestamps to pixel x-coordinates
measureScale	ScaleLinear<number, number>	Yes	D3 linear scale mapping measure values to pixel y-coordinates
innerStage	Stage	Yes	The available width and height for the chart content area
yAxisPosition	'right'	No	Position of the Y-axis labels
showHorizontalGridlines	boolean	No	Whether to render horizontal gridlines
selectedDatum	StackedRangeDatum	No	The currently hovered/selected datum to highlight
selectionFinalized	boolean	No	Whether the selection has been finalized (click-confirmed vs hover)
transform	string	No	SVG transform attribute for positioning this sub-chart
title	string	No	Optional title text displayed at the top-left of the sub-chart

Outputs

Name	Type	Description
SVG group	JSX.Element	An SVG <g> element containing bars/area/line paths, gridlines, axis, selection highlight, and optional title

Usage Examples

Rendering within ContinuousChartRender

{stackedDataByMeasure.map((stackedData, measureIndex) => (
  <ContinuousChartSingleRender
    key={measureIndex}
    data={stackedData}
    measureIndex={measureIndex}
    facets={facets}
    facetColorizer={facetColorizer}
    markType="bar"
    timeScale={timeScale}
    measureScale={measureScales[measureIndex]}
    innerStage={innerStage}
    yAxisPosition="left"
    showHorizontalGridlines={true}
    selectedDatum={
      selection?.measureIndex === measureIndex ? selection.selectedDatum : undefined
    }
    selectionFinalized={selection?.finalized}
    transform={`translate(0,${measureIndex * (chartHeight + MEASURE_GAP)})`}
    title={measures.length > 1 ? measures[measureIndex].name : undefined}
  />
))}

Related Pages

• Environment:Apache_Druid_Web_Console_Development