---
id: "packages/active-charts/all-exports/range-series-options"
title: "Range series options"
description: "DumbbellSeriesOptions, LollipopSeriesOptions, RangeAreaSeriesOptions, RangeBarSeriesOptions: generated from the source of active-charts."
url: "/packages/active-charts/all-exports/range-series-options"
locale: "en"
revision: "g0mvjxwj5c-88bdbe1c:range-series-options"
---

# Range series options

Exported by `@workspace/active-charts`. Generated from the package source; part of [the index of every export](/packages/active-charts/all-exports).

## Types

**DumbbellSeriesOptions**

```ts
interface DumbbellSeriesOptions {
  type: 'dumbbell';
  xKey: string;
  yLowKey: string;
  yHighKey: string;
  id?: string;
  name?: string;
  lowName?: string;
  highName?: string;
  visible?: boolean;
  showInLegend?: boolean;
  yAxisId?: string;
  startFill?: string;
  endFill?: string;
  connectorStroke?: string;
  connectorWidth?: number;
  markerSize?: number;
  paint?: DatumPaintResolver<DatumFill>;
  markerShape?: MarkerShape;
  horizontal?: boolean;
  label?: EndpointLabelOptions;
  highlightStyle?: HighlightStyleOptions;
  animation?: boolean | SeriesAnimationOptions;
}
```

Series options for the Dumbbell chart type — two y-values per category
connected by a thin line, with a marker at each endpoint. Primary
use-case: before/after comparisons (e.g. "Coverage ratio Q1 2024 vs
Q1 2025 per fund"). Unlike `range-bar`, dumbbell renders endpoint
markers on both ends and is keyboard-navigable: voronoi emits two
flatpoints per row (low first, then high) so the WAI-ARIA hover-pipe
model steps low→high→next-low→next-high.

**LollipopSeriesOptions**

```ts
interface LollipopSeriesOptions {
  type: 'lollipop';
  xKey: string;
  yKey: string;
  id?: string;
  name?: string;
  visible?: boolean;
  showInLegend?: boolean;
  yAxisId?: string;
  fill?: string;
  stickStroke?: string;
  stickWidth?: number;
  markerSize?: number;
  paint?: DatumPaintResolver<DatumFill>;
  markerShape?: MarkerShape;
  horizontal?: boolean;
  label?: PointLabelOptions;
  highlightStyle?: HighlightStyleOptions;
  animation?: boolean | SeriesAnimationOptions;
}
```

Series options for the Lollipop chart type — a thin stick from the
baseline to a marker at each datum's value. Visually a sparser
alternative to `bar` for ranking visualisations and event timelines
where the value emphasis is on the endpoint, not the area.

Lollipop has a single y-value per row, so voronoi treats it like
any other y-keyed Cartesian series (`scatter`/`bar`/`line`) — no
dual-flatpoint emission needed.

**RangeAreaSeriesOptions**

```ts
interface RangeAreaSeriesOptions {
  type: 'range-area';
  xKey: string;
  yHighKey: string;
  yLowKey: string;
  id?: string;
  name?: string;
  visible?: boolean;
  showInLegend?: boolean;
  yAxisId?: string;
  fill?: string;
  fillOpacity?: number;
  stroke?: string;
  strokeWidth?: number;
  curve?: CurveType;
  label?: EndpointLabelOptions;
  highlightStyle?: HighlightStyleOptions;
  animation?: boolean | SeriesAnimationOptions;
}
```

**RangeBarSeriesOptions**

```ts
interface RangeBarSeriesOptions extends BarSizingOptions {
  type: 'range-bar';
  xKey: string;
  yHighKey: string;
  yLowKey: string;
  id?: string;
  name?: string;
  visible?: boolean;
  showInLegend?: boolean;
  yAxisId?: string;
  fill?: string;
  stroke?: string;
  paint?: DatumPaintResolver<DatumFill>;
  cornerRadius?: number;
  horizontal?: boolean;
  label?: EndpointLabelOptions;
  highlightStyle?: HighlightStyleOptions;
  animation?: boolean | SeriesAnimationOptions;
}
```