Chart

Basic

Select a bar to inspect revenue, click a legend to toggle its series, or update the data.

Select a bar to inspect its value.

Pie

Compare the contribution of each traffic source.

Doughnut

The same proportions with a hollow center.

Vertical Bar

Compare online and retail sales across six months.

Horizontal Bar

Place categories on the vertical axis with indexAxis: y.

Stacked Bar

Combine both sales channels into a monthly total.

Line

Track the evolution of both sales channels.

MultiAxis

Show revenue and conversion rate using independent axes.

Line Styles

Use filled areas, curves and dashed lines to distinguish series.

Polar Area

Equal angles with radii proportional to the traffic share.

Radar

Compare two teams across five skills.

Combo

Combine a line target and monthly bars in one chart.

Usage

Install Chart.js 4.5 or newer in your application, then import AvChart into your standalone component.

npm install chart.js

import { AvChart, AvChartData, AvChartOptions } from 'avero-ui';

data: AvChartData = {
  labels: ['Q1', 'Q2', 'Q3', 'Q4'],
  datasets: [{ label: 'Revenue', data: [42, 58, 73, 91] }]
};
options: AvChartOptions = { scales: { y: { beginAtZero: true } } };

<av-chart type="bar" [data]="data" [options]="options"
  height="320px" ariaLabel="Quarterly revenue"
  (onDataSelect)="select($event)" />

API and accessibility

Inputs: type, data, options, plugins, responsive (true), width (100%), height (320px), ariaLabel, ariaLabelledBy and ariaDescribedBy. The type, datasets, options and plugins use Chart.js types and support mixed datasets.

Replace data or options to update a chart automatically. Call refresh() after in-place edits, reinit() to recreate the chart, resize() after layout changes, or update(mode) after changing the instance returned by getChart(). clear() clears the canvas; getCanvas() returns the canvas and getBase64Image() returns its current image after initialization.

Outputs: onReady provides the Chart.js instance; onDataSelect provides originalEvent, element, datasetIndex and index; onError reports loading or rendering failures. Existing options.onClick callbacks are preserved. Options default to maintainAspectRatio: false; responsive is controlled by the component input.

Charts initialize only in the browser after rendering. Data and plain options are copied before Chart.js receives them; custom plugins retain their identity. Instances and observers are released when the component is destroyed.

Canvas content does not provide keyboard access to individual data points. Supply a descriptive label and a data table or text alternative, as in these examples. Projected content appears below the canvas and is also available during SSR. Use options.animation: false when animation is unsuitable.