Chart

Native SVG charts for dashboards — bar, horizontal bar, stacked bar, line, area, donut, pie, 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.

Pronew@defer

Pro — licensed

Chart — part of Ply Pro

Unlock it plus 92 pro blocks, widgets & layouts — $99 one-time. Lifetime updates, 14-day money-back guarantee.

Unlock Pro

Bar chart

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

HTML

<ply-chart type="bar" color="primary" [data]="monthlyRevenue"></ply-chart>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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

bash

npx ply-ui-cli add chart

Line chart

fillArea fills under this line. type="area" is the same fill without the extra flag. showGrid draws the guides.

HTML

<ply-chart type="line" color="success" fillArea [data]="trafficTrend"></ply-chart>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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

bash

npx ply-ui-cli add chart

Donut chart

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

Customers100

Starter(24%)
Pro(46%)
Team(18%)
Enterprise(12%)

HTML

<ply-chart
  type="donut"
  [data]="planMix"
  centerLabel="Customers"
  showLegend>
</ply-chart>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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

bash

npx ply-ui-cli add chart

Area, horizontal, stacked, and pie

area fills under the line. horizontal-bar draws categories down the side. stacked-bar reads segments on each point. pie is a donut with no hole.

New
Returning

Starter(24%)
Pro(46%)
Team(18%)
Enterprise(12%)

HTML

<ply-chart type="area" [data]="traffic"></ply-chart>
<ply-chart type="horizontal-bar" [data]="plans"></ply-chart>
<ply-chart type="stacked-bar" [data]="quarters"></ply-chart>
<ply-chart type="pie" [data]="plans"></ply-chart>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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

bash

npx ply-ui-cli add chart

Sparkline

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

Active sessions

1,284

+8.2%

HTML

<ply-chart type="sparkline" color="primary" [data]="sparkline"></ply-chart>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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

bash

npx ply-ui-cli add chart

Installation

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

bash

npx ply-ui-cli add chart

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.

bash

npx -y ply-ui-mcp

Ply provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx ply-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 reference for chart
API	Member	Type	Default	Description
`ply-chart`	`class`	`string`	`''`	Extra host classes merged via `cn()`.
`ply-chart`	`type`	`ChartType`	`'bar'`	Chart visualization type.
`ply-chart`	`data`	`ChartDataPoint[]`	`[]`	Series data points.
`ply-chart`	`color`	`ChartColor`	`'primary'`	Default series color when points do not specify their own.
`ply-chart`	`height`	`number`	`CHART_HEIGHT`	Plot height in pixels (bar, line, donut). Sparkline uses a fixed compact height.
`ply-chart`	`showLabels`	`boolean`	`true`	Shows category labels under bar charts and on the x-axis for line charts.
`ply-chart`	`showGrid`	`boolean`	`true`	Shows horizontal grid lines on line charts.
`ply-chart`	`showLegend`	`boolean`	`true`	Shows a color legend below donut charts.
`ply-chart`	`fillArea`	`boolean`	`false`	Fills the area under a line chart.
`ply-chart`	`centerLabel`	`string`	`''`	Center caption on donut charts (e.g. "Total").
`ply-chart`	`centerValue`	`string`	`''`	Center value on donut charts. Defaults to the sum of segment values.
`ply-chart`	`ariaLabel`	`unknown`	`'Chart'`	Accessible name announced to assistive tech.

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 220 components and blocks (128 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).