Lit Adapter

pnpm add @tanstack/charts @tanstack/lit-charts lit d3-scale

Register the element once:

import { defineChartElement } from '@tanstack/lit-charts'

defineChartElement()

Pass chart options as a property:

import { defineChart } from '@tanstack/charts'

html`<tanstack-chart
  .options=${{
    definition: defineChart(createRevenueChart(rows), { tooltip: true }),
    ariaLabel: 'Revenue by month',
  }}
></tanstack-chart>`

The element uses light DOM so it inherits application fonts and chart theme variables. Use a custom tag name with defineChartElement('revenue-chart').

Lifecycle#

The element prerenders through one shared adapter controller, mounts after its first update, forwards replacement options values, and destroys the mounted host when disconnected. Reconnecting the same element mounts the controller again. Assign options as a property; chart configuration is not reflected to HTML attributes.

Browser and server status#

The verified package contract covers browser registration, update, disconnect, and reconnect behavior. Lit SSR and hydration are not yet part of the adapter's tested public contract. Call defineChartElement only where customElements is available.

Presentation and rendering#

options.class and the string options.style apply to the inner .ts-chart-host; options.className applies to the rendered SVG surface. The package exposes the SVG custom element only. Use renderSvg to replace SVG serialization without replacing the shared host.

Exports: Chart, defineChartElement, ChartCommonProps, ChartPresentationProps, ChartProps, ChartTooltipBodyRenderContext, ChartDefinition, and ChartPoint.

Tooltip body composition#

Set options.renderTooltipBody to return any Lit-renderable value. Include its defaultBody TemplateResult to retain native rows and swatches. The shared host owns focus, placement, portaling, inert transient state, pinning, and dismissal; Lit owns the rendered template lifecycle.

See the Chart reference and Chart Definition API.