Component

Chart

A thin wrapper over Chart.js. Pass a type and data, colour each series through hbConfig, and reach any Chart.js option through hbOptions; the theme, legend, and tooltip are handled for you.

Bar

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' },
  };
}

Line

Doughnut

Stacked & custom options

API reference

hb-chart

Property	Description	Type	Default
[hbType]	Chart.js chart type (bar, line, doughnut, pie, radar, …). Required.	ChartType	—
[hbData]	Chart.js data — labels and datasets. Required.	HbChartData	—
[hbConfig]	Per-series settings (label, color, icon, theme), keyed by dataset or slice label.	HbChartConfig	{}
[hbOptions]	Raw Chart.js options merged over the themed defaults.	HbChartOptions	{}
[hbLegend]	Show the legend.	boolean	true
[hbTooltip]	Enable hover tooltips.	boolean	true
[hbHeight]	CSS height of the chart canvas.	string	''
[class]	Extra CSS classes; give the host a definite width for the responsive canvas.	string	''