Saltar al contenido principal
NeuralUIv1.14.3Nuevo
GitHub
Componente

Gráficas

Gráficas reactivas basadas directamente en Chart.js bajo licencia MIT con estética Neural-Blue. Barras agrupadas, apiladas, horizontales, área, pie, donut y Pareto, con colores, tooltip, leyenda y alternativa de datos accesible.

TypeScript
import { NeuChartComponent } from '@neural-ui/core/chart';
import type { NeuChartSeries } from '@neural-ui/core/chart';

Barras verticales agrupadas

Docs de Chart.js ↗
Barras verticales agrupadas
EtiquetaIngresosCostes
Ene420310
Feb580390
Mar510350
Abr740490
May870560
Jun760510
Jul920610
Ago960640
Sep840550
Oct1120720
Nov1050680
Dic1230790
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] },
];