Area Chart overview
<tng-area-chart> Field-driven area wrapper for filled trends and cumulative shapes.
Simple sample
Compare the Area Chart preset in its default plain-CSS presentation and in a theme-aware Tailwind shell.
Simple sample (Plain-CSS)
Simple sample (Tailwind CSS)
Chart metadata
| Category | Area |
|---|---|
| Series type | line |
| Coordinate system | cartesian2d |
| Features | standard preset |
Imports
Chart imports
ts
import { TngAreaChart, type TngChartData } from '@tailng-ui/charts';
const data: TngChartData = [
{"label":"Jan","value":42},
{"label":"Feb","value":58},
{"label":"Mar","value":64},
{"label":"Apr","value":86},
];Minimal usage
Standalone component
ts
@Component({
imports: [TngAreaChart],
template: `<tng-area-chart [data]="data" xField="label" yField="value" [height]="320" />`,
})
export class AreaChartExample {
protected readonly data = data;
}