Skip to content

Chart models and extensions

Extend the native chart grammar and renderer without creating another data or interaction owner.

Keep the native definition

ChartProps<TDatum, TX, TY> uses TanStack's typed definition and channel values. Marks may have different natural data, and a composition may layer several marks. Ghost does not require one global rows array or rename native marks, scales, transforms or plugins. Follow TanStack's grammar for those contracts.

For data-only calculations or non-React output, use @tanstack/charts directly. Ghost's Chart is React UI; the upstream model's independence from React does not make the Ghost component framework-independent.

Choose a render path

The default SVG host accepts renderSvg and onRender. Custom renderer mode takes renderer and onRendererRender; it rejects renderSvg or onRender at runtime and in the public union type. Choose one renderer per host. Keep lifecycle subscriptions scoped to the host and clean up external resources when it unmounts.

Use renderTooltipBody(context) to customize content; context.defaultBody retains the native body. Returning null, undefined or false suppresses it. The application owns any action in that content and its effects. ChartToolbar is an optional React composition: its callbacks request actions, they do not fetch data or choose a persistence policy.

Extend through the right owner

Configure data transformations, interaction and renderer capabilities through the native definition. Configure Ghost's presentation policies through the host's props; their defaults and styling belong in the component API. A native feature does not need a renamed Ghost option.

See Chart API for view props and Chart examples for concrete definitions. Use native state/interaction options for linked inspection and selection rather than synchronizing a second Ghost hover store. If a renderer supplies presentation-point subscriptions, Ghost follows those positions; do not infer that every custom renderer supports every appearance enhancement.

Export and application operations

A rendered plot and a downloadable data file have different contracts. Choose the native renderer/export API for SVG/PNG and build CSV from the caller's intended dataset, including units and filters. A toolbar click is a request, not evidence that an export succeeded. Handle unsupported formats, asynchronous failure and cleanup in the application. Ghost does not supply a server chart renderer, remote query engine or universal renderer compatibility layer.