Line Chart overview
<tng-line-chart> Field-driven line wrapper for trends over categories or time buckets.
Simple sample
Compare the Line 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 | Line |
|---|---|
| Series type | line |
| Coordinate system | cartesian2d |
| Features | standard preset |
Imports
Chart imports
ts
import { TngLineChart, 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: [TngLineChart],
template: `<tng-line-chart [data]="data" xField="label" yField="value" [height]="320" />`,
})
export class LineChartExample {
protected readonly data = data;
}