Charts
Reactive charts powered directly by MIT-licensed Chart.js with Neural-Blue aesthetics. Grouped, stacked, horizontal bars, area, pie, donut and Pareto diagram — all with integrated colors, tooltip, legend and an accessible data fallback.
TypeScript
import { NeuChartComponent } from '@neural-ui/core/chart';
import type { NeuChartSeries } from '@neural-ui/core/chart';Grouped vertical bars
Chart.js docs ↗| Label | Revenue | Costs |
|---|---|---|
| Jan | 420 | 310 |
| Feb | 580 | 390 |
| Mar | 510 | 350 |
| Apr | 740 | 490 |
| May | 870 | 560 |
| Jun | 760 | 510 |
| Jul | 920 | 610 |
| Aug | 960 | 640 |
| Sep | 840 | 550 |
| Oct | 1120 | 720 |
| Nov | 1050 | 680 |
| Dec | 1230 | 790 |
HTML
<neu-chart
type="bar"
[series]="barSeries"
[categories]="months"
[height]="280"
/>
// series: NeuChartSeries[]
barSeries = [
{ name: 'Revenue', data: [420, 580, 510, 740, 870, 760, 920, 960, 840, 1120, 1050, 1230] },
{ name: 'Costs', data: [310, 390, 350, 490, 560, 510, 610, 640, 550, 720, 680, 790] },
];