Chart

A lightweight SVG line/area/bar chart.

MonTueWedThuFriSatSun

import { BuiChart } from 'ng-blatui';

<bui-chart type="area" [series]="series" [labels]="labels" />

Bar

Mon

Tue

Wed

Thu

Fri

Sat

Sun

<bui-chart type="bar" [series]="series" [labels]="labels" />

Line

MonTueWedThuFriSatSun

<bui-chart type="line" [series]="series" [labels]="labels" />

API reference

Inputs

Prop	Type	Default	Description
`type`	`"area" \| "bar" \| "donut" \| "gauge" \| "line"`	`'line'`	Chart render style: line, bar, filled area, a donut ring, or a half-ring gauge.
`series`	`readonly ChartSeries[]`	`[]`	Series to plot; bar/donut use only the first series.
`labels`	`readonly string[]`	`[]`	X-axis tick labels rendered below the chart.
`height`	`number`	`220`	Chart height in pixels (SVG viewBox height / donut diameter).
`max`	`number \| null`	`null`	Override for the value the chart scales against. For a donut it defines the full ring (e.g. `max=100` with data `[62]` fills 62%); otherwise the max of the series data is used.
`thickness`	`number`	`12`	Donut ring thickness, in the 100×100 viewBox units.
`activeIndex`	`number \| null`	`null`	Index of the highlighted bar (bar charts). When set, the active bar renders solid and the rest are tinted; when `null` every bar renders solid.
`barLabels`	`readonly string[]`	`[]`	Value text shown above each bar (bar charts); pass one entry per data point.
`stacked`	`boolean`	`false`	Stack every series into one bar per data point, bottom-to-top (bar charts).
`grouped`	`boolean`	`false`	Render every series side-by-side within each data slot (grouped bar charts).
`barColors`	`readonly string[]`	`[]`	Per-bar fill colors (bar charts); index-aligned with the first series' data. Overrides the series color.
`track`	`boolean`	`false`	Draw a faint full-height track behind each bar (bar charts).
`dots`	`boolean`	`false`	Render a dot marker at each data point (line/area charts).
`gridX`	`number`	`0`	Number of evenly-spaced vertical grid lines (line/area charts; 0 hides them).
`label`	`string`	`'Chart'`	Accessible label for the chart's `aria-label`.

Types

ChartSeries

Field	Type	Description
`name`?	`string`	Optional series name (used for legends/identification).
`data`	`number[]`	Y-axis values plotted in order along the series.
`color`?	`string`	Optional explicit stroke/fill colour; falls back to the palette.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.