Charts · Composed

Mixed marks and dual axes

A second axis is a claim that two measures share a shape but not a unit. The API forces that claim to be explicit: every series names the axis it belongs to, and the axis carries its own formatter.

Dual axis

Price on the left in currency, realized volatility on the right in percent.

Price and realized volatility

Two marks, two axes, one tooltip that names both.

Bars and a line

Volume as bars on a secondary axis, price as a line — both prepared.

Price and volume

Area and line

The quiet pairing: an envelope in area, the series in line.

Volatility envelope

Return profile

Usage

<ComposedChart
  data={rows}
  xKey="time"
  axes={[
    { id: "primary", position: "right", format: { kind: "currency" } },
    { id: "secondary", position: "left", format: { kind: "percent" } },
  ]}
  series={[
    { key: "close", type: "line", axis: "primary" },
    { key: "rv30", type: "line", axis: "secondary", tone: "warning" },
  ]}
/>