Create
NewZoom, click events and a data table in every chart

Charts that follow your theme

Bar, line, area, pie, radar and radial charts built on Apache ECharts, colored by your design tokens and readable by screen readers.

Get started
Chart types

One element, every chart

Switch the type attribute and keep your data. Each example below is a live chart from the docs.

Built in

More than a picture of your data

Every chart follows your theme, works for screen readers and reacts to the people using it.

  • Your colors

    Series take the --wds-chart-1…5 tokens, so charts follow your theme in light and dark. Config sets names and colors.

  • Readable for everyone

    The data is also in a table: always for screen readers, and on screen with show-table.

  • Interactive

    The legend toggles series, the tooltip shows every series at a point, and zoom and click events are one attribute away.

  • Loaded when needed

    Built on Apache ECharts, an optional dependency loaded only by @wds/core/chart, so pages without charts stay light.

Frameworks

A chart in a few lines

Pass your data and the series to show. The same element works in Angular, React and plain HTML.

visitors.component.ts
import { Component } from '@angular/core';
import { WdsChartComponent } from '@wds/angular/chart';

@Component({
  selector: 'app-visitors',
  imports: [WdsChartComponent],
  template: `<wds-chart type="area" label="Visitors" gradient [data]="data" [series]="['desktop', 'mobile']" x-key="month" />`,
})
export class VisitorsComponent {
  data = [
    { month: 'January', desktop: 186, mobile: 80 },
    { month: 'February', desktop: 305, mobile: 200 },
    { month: 'March', desktop: 237, mobile: 120 },
  ];
}
FAQ

Everything you need to know

Quick answers about chart types, ECharts, colors and accessibility.

01 Which chart types are there?

Bar, line, area, pie (with donut), radar and radial. Bars can be horizontal or stacked, lines and areas smooth or stepped.

02 Do I need to install ECharts?

Yes, add the echarts package next to WDS. It is an optional dependency, loaded only by @wds/core/chart, so apps without charts never download it.

03 How do I set the colors?

By default series use the --wds-chart-1…5 tokens in order. Set your own names and colors per series in config.

04 Are the charts accessible?

Each chart has a label, and its data is also in a table that screen readers always get. show-table puts that table on screen too.

05 Can I react to clicks?

Yes. wds-chart-click fires on a bar, point or slice, and wds-legend-change when a series is hidden or shown.

Put your data on screen

Start from the examples on the Chart page and copy the one closest to your data.

Get started Installation

Apache ECharts · SVG · light and dark