Native SVG charts for dashboards — bar, line, donut, and compact sparklines. No third-party chart library required. Fully styled for light and dark mode. Lazy-load below the fold with @defer and the @defer cookbook.
Unlock it plus 90 pro blocks, widgets & layouts — $99 one-time. Lifetime updates, 14-day money-back guarantee.
Pass [data] as an array of label / value points. The tallest bar is highlighted automatically.
<base-chart type="bar" color="primary" [data]="monthlyRevenue"></base-chart>
TypeScript
import { Component } from '@angular/core';
// Install: npx base-ui-cli add chart
// Paths are relative to aliases.components (default: src/app/components)
import { ChartComponent } from './chart/chart.component';
@Component({
selector: 'app-chart-example',
imports: [
ChartComponent
],
template: `...`
})
export class ChartExampleComponent {}Install
npx base-ui-cli add chart
Use fillArea for an area chart and showGrid for horizontal guides.
<base-chart type="line" color="success" fillArea [data]="trafficTrend"></base-chart>
TypeScript
import { Component } from '@angular/core';
// Install: npx base-ui-cli add chart
// Paths are relative to aliases.components (default: src/app/components)
import { ChartComponent } from './chart/chart.component';
@Component({
selector: 'app-chart-example',
imports: [
ChartComponent
],
template: `...`
})
export class ChartExampleComponent {}Install
npx base-ui-cli add chart
Segments cycle the semantic palette. Set centerLabel and optional centerValue for the inner caption.
<base-chart type="donut" [data]="planMix" centerLabel="Customers" showLegend> </base-chart>
TypeScript
import { Component } from '@angular/core';
// Install: npx base-ui-cli add chart
// Paths are relative to aliases.components (default: src/app/components)
import { ChartComponent } from './chart/chart.component';
@Component({
selector: 'app-chart-example',
imports: [
ChartComponent
],
template: `...`
})
export class ChartExampleComponent {}Install
npx base-ui-cli add chart
Minimal inline trend line — ideal inside stat cards or cells.
Active sessions
1,284
+8.2%
<base-chart type="sparkline" color="primary" [data]="sparkline"></base-chart>
TypeScript
import { Component } from '@angular/core';
// Install: npx base-ui-cli add chart
// Paths are relative to aliases.components (default: src/app/components)
import { ChartComponent } from './chart/chart.component';
@Component({
selector: 'app-chart-example',
imports: [
ChartComponent
],
template: `...`
})
export class ChartExampleComponent {}Install
npx base-ui-cli add chart
Run the following command to add this component to your project:
npx base-ui-cli add chart
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.
npx -y base-ui-ng-mcp
Base UI provides standalone components. Import the exact elements you want to use into your component.
// Install: npx base-ui-cli add chart
// Paths are relative to aliases.components (default: src/app/components)
import { ChartComponent } from './chart/chart.component';
@Component({
selector: 'app-your-component',
imports: [
ChartComponent
],
template: `...`
})
export class YourComponent {} API for chart — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
base-chart | class | string | '' | Extra host classes merged via `cn()`. |
base-chart | type | ChartType | 'bar' | Chart visualization type. |
base-chart | data | ChartDataPoint[] | [] | Series data points. |
base-chart | color | ChartColor | 'primary' | Default series color when points do not specify their own. |
base-chart | height | number | CHART_HEIGHT | Plot height in pixels (bar, line, donut). Sparkline uses a fixed compact height. |
base-chart | showLabels | boolean | true | Shows category labels under bar charts and on the x-axis for line charts. |
base-chart | showGrid | boolean | true | Shows horizontal grid lines on line charts. |
base-chart | showLegend | boolean | true | Shows a color legend below donut charts. |
base-chart | fillArea | boolean | false | Fills the area under a line chart. |
base-chart | centerLabel | string | '' | Center caption on donut charts (e.g. "Total"). |
base-chart | centerValue | string | '' | Center value on donut charts. Defaults to the sum of segment values. |
base-chart | ariaLabel | unknown | 'Chart' | Accessible name announced to assistive tech. |
Content