Components / Chart

Chart

An accessible, engine-agnostic chart frame with legend and semantic data composition.

Monthly revenueJanuary through April

Revenue

Monthly revenue values
January	$12k
April	$24k

example.component.html

html

<aevko-chart label="Monthly revenue" description="January through April" [series]="series">
  <svg aevkoChartVisual aria-hidden="true">
    ...
  </svg>
  <table aevkoChartData>
    ...
  </table>
</aevko-chart>

Installation

npx aevko-ui@latest add chart --yes

Source ownership

Customization

Project any SVG, canvas or Angular chart engine while keeping its package application-owned. Theme series with tokens and always include semantic data.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

Compose freelySlots accept native elements, SVG, images or Angular components.

API reference

Property or slot	Type	Default	Description
`label`	`string`	`required`	Accessible figure name.
`description`	`string`	`''`	Visible context for the displayed measure.
`series`	`readonly AevkoChartSeries[]`	`[]`	Legend labels and optional consumer colors.
`aevkoChartVisual`	`projected slot`	`empty`	Canvas, SVG or chart-engine component, hidden from assistive technology.
`aevkoChartData`	`projected slot`	`empty`	Native table or textual data alternative.

Accessibility contract

Accessibility

Included behavior

The visual is decorative while projected native table or text data remains available to assistive technology.

Your responsibility

Provide a native table or concise textual data alternative and never rely on color alone to distinguish series.

Back to all components