@reincharts/series

Functions

Functions exported by @reincharts/series.

import { addColumn, addRow, areaFill, ... } from "@reincharts/series";

addColumn

Adds a pixel-aligned vertical bar (centred on cx, spanning y1..y2) to a path.

function addColumn(
    path: Path2D,
    cx: number,
    width: number,
    y1: number,
    y2: number,
    radius?: number,
): void

addRow

Adds a pixel-aligned horizontal bar (spanning x1..x2, centred on cy) to a path.

function addRow(
    path: Path2D,
    x1: number,
    x2: number,
    cy: number,
    height: number,
    radius?: number,
): void

areaFill

Resolves an area's fill (solid color or vertical gradient).

function areaFill(
    ctx: CanvasRenderingContext2D,
    theme: Theme,
    o: { color?: string; topColor?: string; bottomColor?: string; fill?: string; },
    y0: number,
    y1: number,
): string | CanvasGradient

barLeft

Left pixel edge of a bar of integer width centred on cx, aligned to the pixel grid.

function barLeft(cx: number, width: number): number

barWidth

Integer bar width for a bar spacing: ratio of the spacing, at least 1px, at most max.

function barWidth(barSpacing: number, ratio?: number, max?: number): number

drawMarker

Draws one marker immediately (convenience for annotations; series batch with traceMarker). Without a style it is filled with the current ctx.fillStyle.

function drawMarker(
    ctx: CanvasRenderingContext2D,
    shape: MarkerShape,
    x: number,
    y: number,
    size: number,
    { fill, stroke, strokeWidth }?: MarkerStyle,
): void

drawOhlcColumns

Draws OHLC data with several bars per pixel: one aggregated bar per pixel column (first open, max high, min low, last close) as a 1px line, merging pre-aggregated blocks when a whole block shares a pixel. The picture matches drawing every bar; the cost is proportional to the chart width.

function drawOhlcColumns<T>(
    ctx: CanvasRenderingContext2D,
    { data, start, end, x, y, barSpacing }: DrawScope<T>,
    open: Value<T>,
    high: Value<T>,
    low: Value<T>,
    close: Value<T>,
    color: (up: boolean, d: T, i: number) => string,
): void

formatValue

Plain number formatting for values on a non-price axis (horizontal bars).

function formatValue(v: number): string

getLod

The cached LOD index of data for a low / high accessor pair (the same function twice for a single value). Returns undefined for short series. Keyed by the data array and the accessor, so it is rebuilt only when they change.

function getLod<T>(data: readonly T[], low: Accessor<T>, high?: Accessor<T>): Lod | undefined

groupLayout

Splits a slot of slot pixels into count side-by-side bars separated by gap pixels. Returns the integer width of each bar and the offset of bar k's centre from the slot centre.

function groupLayout(
    slot: number,
    count: number,
    gap?: number,
): { width: number; offsets: number[]; }

linePoints

Collects [x, y] pixel points for bars start..end (null for gaps).

function linePoints<T>(
    data: readonly T[],
    start: number,
    end: number,
    x: (i: number) => number,
    y: (v: number) => number,
    value: (d: T, i: number) => number | undefined,
): (Point | null)[]

lodExtent

Exact [min, max] over bars start..end: whole blocks from the index, partial blocks bar by bar.

function lodExtent<T>(
    lod: Lod,
    data: readonly T[],
    start: number,
    end: number,
    low: Accessor<T>,
    high?: Accessor<T>,
): [number, number] | undefined

ohlcExtent

Fast autoscale for OHLC data: min low / max high (block index for large data, no per-bar allocations).

function ohlcExtent<T>(
    data: readonly T[],
    start: number,
    end: number,
    low: Value<T>,
    high: Value<T>,
): [number, number] | undefined

paletteColor

Palette color for value k.

function paletteColor(colors: readonly string[] | undefined, k: number, theme: Theme): string

pixelSpan

Rounded [start, size] of the span between two pixel positions (size at least min).

function pixelSpan(a: number, b: number, min?: number): [number, number]

resolveColor

Resolves a BarColor (static or per bar) for a datum, falling back to theme.line.

function resolveColor<T>(
    fill: BarColor<T> | undefined,
    d: T,
    i: number,
    theme: Theme,
    fallback?: string,
): string

stack

Stacks several values per datum. Returns one array per key with [y0, y1] for each datum (undefined where the value is missing). Positive values stack upwards from 0 and negative values downwards from 0 (diverging), so mixed-sign stacks never overlap.

function stack<T>(
    data: readonly T[],
    keys: readonly Accessor<T, number | undefined>[],
    { offset }?: StackOptions,
): (StackedValue | undefined)[][]

stackAt

Stacks the values of one datum, calling emit(keyIndex, [y0, y1]) per key (used per frame by series).

function stackAt<T>(
    d: T,
    i: number,
    fns: readonly ((d: T, i: number) => number | undefined)[],
    offset: StackOptions["offset"],
    emit: (k: number, v: StackedValue | undefined) => void,
): void

toArray

Normalizes SeriesValues (one value, several or none) to an array.

function toArray(v: SeriesValues): readonly (number | undefined)[]

traceArea

Traces closed area shapes between a top line and a bottom line (or a constant bottom y). Each contiguous run of defined points becomes one closed sub-path.

function traceArea(
    path: CanvasRenderingContext2D | Path2D,
    top: readonly (Point | null)[],
    bottom: readonly (Point | null)[] | number,
    curve?: Curve,
    connectGaps?: boolean,
): void

traceMarker

Adds a closed marker sub-path centred on (x, y) to a path or context. size is the marker's outer diameter in pixels. Every shape is a filled outline so markers can be batched per color.

function traceMarker(
    path: Path2D | CanvasRenderingContext2D,
    shape: MarkerShape,
    x: number,
    y: number,
    size: number,
): void

tracePath

Traces a path through points into ctx (shared by line and area series). null points are gaps.

function tracePath(
    ctx: CanvasRenderingContext2D | Path2D,
    points: readonly (Point | null)[],
    curve?: Curve,
    connectGaps?: boolean,
    continuePath?: boolean,
): void

verticalGradient

A vertical linear gradient between two colors over [y0, y1].

function verticalGradient(
    ctx: CanvasRenderingContext2D,
    y0: number,
    y1: number,
    from: string,
    to: string,
): CanvasGradient

volumeProfile

Buckets the volume of bars start..end into bins price rows. Each bar's volume is spread evenly over the rows its [low, high] price range overlaps (exported for tests and custom drawing).

function volumeProfile<T>(
    data: readonly T[],
    start: number,
    end: number,
    bins: number,
    range: (d: T, i: number) => readonly [number, number],
    volume: (d: T, i: number) => number,
    isUp: (d: T, i: number) => boolean,
): ProfileRow[]

PathBatch

Batches sub-paths by color so each color is filled / stroked once per frame.

Constants

Constants and presets exported by @reincharts/series.

On this page

addColumnaddRowareaFillbarLeftbarWidthdrawMarkerdrawOhlcColumnsformatValuegetLodgroupLayoutlinePointslodExtentohlcExtentpaletteColorpixelSpanresolveColorstackstackAttoArraytraceAreatraceMarkertracePathverticalGradientvolumeProfile