Skip to content

adapter.md

Latest commit

 

History

History
74 lines (60 loc) · 2.83 KB

adapter.md

File metadata and controls

74 lines (60 loc) · 2.83 KB
Raw
title Angular Adapter
description Render TanStack Charts with an Angular standalone component. 
pnpm add @tanstack/charts @angular/common @angular/core @angular/platform-browser
import { Component } from '@angular/core'
import { Chart } from '@tanstack/charts/angular'
import { defineChart } from '@tanstack/charts'
import { tooltip } from '@tanstack/charts/tooltip'

@Component({
  imports: [Chart],
  template: `<tanstack-chart [options]="chartOptions" />`,
})
export class RevenueChart {
  chartOptions = {
    definition: defineChart(createRevenueChart(rows), { tooltip }),
    ariaLabel: 'Revenue by month',
    aspectRatio: 16 / 9,
  }
}

The single options input works with immutable values and signals. The standalone component ships as a partial-compiled Angular package.

Lifecycle

ngOnChanges creates or updates one shared adapter controller. Angular's afterNextRender mounts it into the prerendered surface in the browser, and ngOnDestroy cleans it up. Replace the complete options value when chart state changes; mutating the existing object does not produce an OnPush input change. Callbacks such as onFocusChange are functions inside options, not Angular outputs.

Browser and server status

The verified package contract covers complete SVG server rendering through Angular's renderApplication, browser mount, immutable updates, and teardown. With provideClientHydration, the adapter adopts the existing server-rendered SVG and mark nodes, preserves them through immutable updates, and cleans up on destruction. Installed-package checks cover Angular 19 and 22 AOT builds in Chromium, Firefox, and WebKit, not every version within the peer range.

Presentation and rendering

options.class and the string options.style apply to the inner .ts-chart-host; options.className applies to the rendered chart surface. The component starts with SVG and can compose marks that use canvasChartRenderer. Use renderSvg to replace SVG serialization without replacing the shared host.

Exports: Chart, ChartCommonOptions, ChartOptions, ChartPresentationOptions, ChartTooltipBodyDirective, ChartTooltipBodyRenderContext, ChartTooltipBodyTemplateContext, ChartDefinition, and ChartPoint.

Tooltip body composition

Project an ng-template with [tanstackChartTooltipBody]="chartOptions.definition" for Angular-owned content. The definition binding is the generic type witness for strict template checking; it does not configure behavior a second time. Render tooltip.defaultBody through NgTemplateOutlet to retain native rows and swatches. The shared host owns focus, placement, portaling, inert transient state, pinning, and dismissal; Angular owns the embedded-view lifecycle.

See the Chart reference and Chart Definition API.