Documentation / @ripl/charts / TrendChart

Class: TrendChart<TData>

Defined in: charts/src/charts/trend.ts:194

Trend chart combining bar and line series on shared categorical/value axes.

Renders bar series as grouped rectangles and line series as polylines with markers on the same chart area. Supports tooltips, legend, grid, and animated entry/update/exit transitions for both series types.

Extends

• Chart<TrendChartOptions<TData>, TrendChartEventMap>

Type Parameters

Type Parameter	Default type	Description
TData	unknown	The type of each data item in the dataset.

Constructors

Constructor

new TrendChart<TData>(target, options): TrendChart<TData>

Defined in: charts/src/charts/trend.ts:207

Parameters

Parameter	Type
target	string | Context<Element, Record<string, unknown>> | HTMLElement
options	TrendChartOptions<TData>

Returns

TrendChart<TData>

Overrides

Chart.constructor

Properties

Property	Modifier	Type	Description	Inherited from	Defined in
animationOptions	protected	ChartAnimationOptions	-	Chart.animationOptions	charts/src/core/chart.ts:135
autoRender	protected	boolean	-	Chart.autoRender	charts/src/core/chart.ts:134
colorGenerator	protected	Generator<string, string, any>	-	Chart.colorGenerator	charts/src/core/chart.ts:143
legend?	protected	Legend	-	Chart.legend	charts/src/core/chart.ts:138
options	protected	TrendChartOptions	-	Chart.options	charts/src/core/chart.ts:142
parent?	public	EventBus<TrendChartEventMap>	The parent event bus that emitted events bubble up to, if any.	Chart.parent	core/src/core/event-bus.ts:89
renderer	protected	Renderer	-	Chart.renderer	charts/src/core/chart.ts:133
scene	protected	Scene	-	Chart.scene	charts/src/core/chart.ts:132
title?	protected	ChartTitle	-	Chart.title	charts/src/core/chart.ts:137
titleOptions?	protected	ChartTitleOptions	-	Chart.titleOptions	charts/src/core/chart.ts:136
defaultKey	readonly	typeof defaultKey	The key under which resources are retained when no explicit key is provided.	Chart.defaultKey	core/src/core/disposer.ts:11

Methods

createLayout()

protected createLayout(): ChartLayout

Defined in: charts/src/core/chart.ts:208

Creates a fresh layout for the current canvas size and padding.

Returns

ChartLayout

Inherited from

Chart.createLayout

---

destroy()

destroy(): void

Defined in: charts/src/core/chart.ts:399

Destroys the chart, its scene, context, and cleans up all event subscriptions.

Returns

void

Inherited from

Chart.destroy

---

dispose()

protected dispose(key?): void

Defined in: core/src/core/disposer.ts:25

Disposes all resources under the given key, or all resources if no key is provided.

Parameters

Parameter	Type
key?	PropertyKey

Returns

void

Inherited from

Chart.dispose

---

emit()

Call Signature

emit<TEvent>(event): TEvent

Defined in: core/src/core/event-bus.ts:137

Emits an event, invoking all matching handlers and bubbling to the parent if applicable.

Type Parameters

Type Parameter	Default type
TEvent extends Event<undefined>	Event<undefined>

Parameters

Parameter	Type
event	TEvent

Returns

TEvent

Inherited from

Chart.emit

Call Signature

emit<TEvent>(type, data): Event<TrendChartEventMap[TEvent]>

Defined in: core/src/core/event-bus.ts:138

Emits an event, invoking all matching handlers and bubbling to the parent if applicable.

Type Parameters

Type Parameter
TEvent extends keyof TrendChartEventMap

Parameters

Parameter	Type
type	TEvent
data	TrendChartEventMap[TEvent]

Returns

Event<TrendChartEventMap[TEvent]>

Inherited from

Chart.emit

---

export()

export(): ContextExport

Defined in: charts/src/core/chart.ts:394

Exports a snapshot of the chart's rendered context (image, url, or string). See Context.export.

Returns

ContextExport

Inherited from

Chart.export

---

getAnimationDuration()

protected getAnimationDuration(referenceDuration?): number

Defined in: charts/src/core/chart.ts:198

Parameters

Parameter	Type	Default value
referenceDuration	number	1000

Returns

number

Inherited from

Chart.getAnimationDuration

---

getChartArea()

protected getChartArea(): ChartArea

Defined in: charts/src/core/chart.ts:309

Returns

ChartArea

Inherited from

Chart.getChartArea

---

getPadding()

protected getPadding(): ChartPadding

Defined in: charts/src/core/chart.ts:299

Returns

ChartPadding

Inherited from

Chart.getPadding

---

getSeriesColor()

protected getSeriesColor(seriesId): string

Defined in: charts/src/core/chart.ts:336

Parameters

Parameter	Type
seriesId	string

Returns

string

Inherited from

Chart.getSeriesColor

---

has()

has(type): boolean

Defined in: core/src/core/event-bus.ts:94

Returns whether there are any listeners registered for the given event type.

Parameters

Parameter	Type
type	keyof TrendChartEventMap

Returns

boolean

Inherited from

Chart.has

---

highlightSeries()

protected highlightSeries(id): void

Defined in: charts/src/core/chart.ts:360

Highlights a single series/segment by id (dimming the others), or restores all when null. Wired to legend hover via reserveLegend. No-ops for charts that never registered highlight groups.

Dims the leaf elements of each group rather than the group itself: a group's opacity does not cascade multiplicatively, and the leaves carry no explicit opacity (so a group-level tween is a no-op — element.interpolate skips nil current values). Each leaf's rest opacity is captured once on the element (via a Symbol slot, like applyHoverHighlight), so hidden elements stay hidden and restoring returns to the true value.

Parameters

Parameter	Type
id	string | null

Returns

void

Inherited from

Chart.highlightSeries

---

init()

protected init(): void

Defined in: charts/src/core/chart.ts:166

Returns

void

Inherited from

Chart.init

---

off()

off<TEvent>(type, handler): void

Defined in: core/src/core/event-bus.ts:112

Removes a previously registered handler for the given event type.

Type Parameters

Type Parameter
TEvent extends keyof TrendChartEventMap

Parameters

Parameter	Type
type	TEvent
handler	EventHandler<TrendChartEventMap[TEvent]>

Returns

void

Inherited from

Chart.off

---

on()

on<TEvent>(type, handler, options?): Disposable

Defined in: core/src/core/event-bus.ts:99

Subscribes a handler to the given event type and returns a disposable for cleanup.

Type Parameters

Type Parameter
TEvent extends keyof TrendChartEventMap

Parameters

Parameter	Type
type	TEvent
handler	EventHandler<TrendChartEventMap[TEvent]>
options?	EventSubscriptionOptions

Returns

Disposable

Inherited from

Chart.on

---

once()

once<TEvent>(type, handler, options?): Disposable

Defined in: core/src/core/event-bus.ts:127

Subscribes a handler that is automatically removed after it fires once.

Type Parameters

Type Parameter
TEvent extends keyof TrendChartEventMap

Parameters

Parameter	Type
type	TEvent
handler	EventHandler<TrendChartEventMap[TEvent]>
options?	EventSubscriptionOptions

Returns

Disposable

Inherited from

Chart.once

---

registerHighlightGroups()

protected registerHighlightGroups(groups): void

Defined in: charts/src/core/chart.ts:345

Registers the top-level series/segment groups that map one-to-one to legend items (by matching group.id to the legend item id). Charts call this each render so highlightSeries can dim the other series when a legend entry is hovered. Replaces any previously registered set.

Parameters

Parameter	Type
groups	Group<ElementEventMap>[]

Returns

void

Inherited from

Chart.registerHighlightGroups

---

render()

render(): Promise<void>

Defined in: charts/src/charts/trend.ts:716

Runs a render pass, invoking callback to draw into the scene and marking the chart as rendered. Concrete charts override this and delegate to super.render(async () => { ... }); any error thrown by the callback is caught and the context cleared, so a failed render never leaves a partially-drawn chart.

Returns

Promise<void>

Overrides

Chart.render

---

reserveLegend()

protected reserveLegend(layout, items, input?): void

Defined in: charts/src/core/chart.ts:248

Reserves a band for the legend (when visible and given items) at its configured position and renders it into that band, reconciling against the previous render.

Parameters

Parameter	Type
layout	ChartLayout
items	LegendItem[]
input?	ChartLegendInput

Returns

void

Inherited from

Chart.reserveLegend

---

reserveTitle()

protected reserveTitle(layout): void

Defined in: charts/src/core/chart.ts:218

Reserves a band for the chart title (if configured) and renders it. Returns the remaining area unchanged when there is no title. Call this first in a chart's layout pass so the title sits outermost.

Parameters

Parameter	Type
layout	ChartLayout

Returns

void

Inherited from

Chart.reserveTitle

---

resolveAnimation()

protected resolveAnimation(referenceDuration?): ResolvedAnimation

Defined in: charts/src/core/chart.ts:203

Resolves the chart's animation options for a given reference duration (duration + easing + enabled).

Parameters

Parameter	Type	Default value
referenceDuration	number	ANIMATION_REFERENCE.update

Returns

ResolvedAnimation

Inherited from

Chart.resolveAnimation

---

resolveSeriesColors()

protected resolveSeriesColors(series): void

Defined in: charts/src/core/chart.ts:321

Parameters

Parameter	Type
series	object[]

Returns

void

Inherited from

Chart.resolveSeriesColors

---

retain()

protected retain(value, key?): void

Defined in: core/src/core/disposer.ts:14

Registers a disposable resource under an optional key for later cleanup.

Parameters

Parameter	Type	Default value
value	Disposable	undefined
key	PropertyKey	Disposer.defaultKey

Returns

void

Inherited from

Chart.retain

---

update()

update(options): void

Defined in: charts/src/core/chart.ts:179

Merges partial options into the current options and re-renders if autoRender is enabled.

Parameters

Parameter	Type
options	Partial<TOptions>

Returns

void

Inherited from

Chart.update