Pie Chart overview
<tng-pie-chart> Field-driven pie wrapper for part-to-whole breakdowns and donut charts.
Simple sample
Compare the Pie 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 | Pie |
|---|---|
| Series type | pie |
| Coordinate system | none |
| Features | standard preset |
Imports
Chart imports
ts
import { TngPieChart, type TngChartData } from '@tailng-ui/charts';
const data: TngChartData = [
{"name":"Core","value":44},
{"name":"Pro","value":31},
{"name":"Enterprise","value":18},
{"name":"Add-ons","value":12},
];Minimal usage
Standalone component
ts
@Component({
imports: [TngPieChart],
template: `<tng-pie-chart [data]="data" nameField="name" valueField="value" [height]="320" />`,
})
export class PieChartExample {
protected readonly data = data;
}