Componente

Chart

Uma camada fina sobre o Chart.js. Passe um tipo e os dados, colora cada série pelo hbConfig e alcance qualquer opção do Chart.js pelo hbOptions; o tema, a legenda e o tooltip já são tratados.

Barra

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

import { HbChartImports, type HbChartConfig, type HbChartData } from '@herbst/ui';

@Component({
  selector: 'hb-demo-chart-bar',
  imports: [HbChartImports],
  template: `
    <hb-chart
      class="block w-[32rem] max-w-full"
      hbType="bar"
      hbHeight="240px"
      [hbData]="data"
      [hbConfig]="config"
    />
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoChartBarComponent {
  protected readonly data: HbChartData = {
    labels: ['Oak', 'Beech', 'Maple', 'Birch'],
    datasets: [
      { label: 'October', data: [12, 8, 5, 9] },
      { label: 'November', data: [7, 6, 4, 8] },
    ],
  };

  protected readonly config: HbChartConfig = {
    October: { label: 'October', color: '#A64B2A' },
    November: { label: 'November', color: '#6B7A55' },
  };
}

Linha

Rosca

Empilhado e opções customizadas

Referência de API

hb-chart

Propriedade	Descrição	Tipo	Padrão
[hbType]	Tipo de gráfico do Chart.js (bar, line, doughnut, pie, radar, …). Obrigatório.	ChartType	—
[hbData]	Dados do Chart.js — labels e datasets. Obrigatório.	HbChartData	—
[hbConfig]	Ajustes por série (label, color, icon, theme), indexados pela label do dataset ou da fatia.	HbChartConfig	{}
[hbOptions]	Opções cruas do Chart.js mescladas sobre os padrões do tema.	HbChartOptions	{}
[hbLegend]	Mostra a legenda.	boolean	true
[hbTooltip]	Habilita os tooltips ao passar o mouse.	boolean	true
[hbHeight]	Altura CSS do canvas do gráfico.	string	''
[class]	Classes CSS extras; dê uma largura definida ao host para o canvas responsivo.	string	''