Getting StartedInstallation and package overview 2
Line15 line charts 15
Area8 area charts 8
Bar16 bar charts 16
Pie10 pie charts 10
Scatter11 scatter charts 11
Heatmap6 heatmap charts 6
Boxplot3 boxplot charts 3
Calendar5 calendar charts 5
Candlestick5 candlestick charts 5
Chord4 chord charts 4
Funnel4 funnel charts 4
Gauge9 gauge charts 9
Geo Map7 geo map charts 7
Graph6 graph charts 6
Lines2 lines charts 2
Matrix7 matrix charts 7
Parallel3 parallel charts 3
Pictorial Bar4 pictorial bar charts 4
Radar3 radar charts 3
Sankey6 sankey charts 6
Sunburst5 sunburst charts 5
Theme River1 theme river chart 1
Tree5 tree charts 5
Treemap4 treemap charts 4
CompositionSemi-headless chart surfaces and layout control 1

Semi-headless composition

Compose chart root, surface, and legend when you want to own the surrounding layout while reusing TailNG chart state and renderer isolation.

Composition

Semi-headless

Compose chart root, surface, and legend while reusing TailNG chart state and renderer isolation.

Use tng-chart-root as the state host, tng-chart-surface for the renderer, and tng-chart-legend for a TailNG-styled legend that reads from chart context.

Semi-headless chart layout

html
<tng-chart-root [optionFactory]="optionFactory" [legendItems]="legendItems">
  <tng-chart-surface />
  <tng-chart-legend />
</tng-chart-root>