Bar Chart overview
<tng-bar-chart> Field-driven bar wrapper for category comparison and grouped values.
Simple sample
Compare the Bar 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 | Bar |
|---|---|
| Series type | bar |
| Coordinate system | cartesian2d |
| Features | standard preset |
Imports
Chart imports
ts
import { TngBarChart, 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: [TngBarChart],
template: `<tng-bar-chart [data]="data" xField="label" yField="value" [height]="320" />`,
})
export class BarChartExample {
protected readonly data = data;
}