Chart

Native SVG charts for dashboards — bar, line, donut, and compact sparklines. No third-party chart library required. Fully styled for light and dark mode.

Pronew

Bar chart

Pass [data] as an array of label / value points. The tallest bar is highlighted automatically.

Line chart

Use fillArea for an area chart and showGrid for horizontal guides.

Donut chart

Segments cycle the semantic palette. Set centerLabel and optional centerValue for the inner caption.

Sparkline

Minimal inline trend line — ideal inside stat cards or table cells.

Installation

Run the following command to add this component to your project:

npx base-ui-cli add chart

import { ChartComponent } from '@lussos/base-ui';

@Component({
  selector: 'app-your-component',
  imports: [
    ChartComponent
  ],
  template: `...`
})
export class YourComponent {}