General

Chart

Experimental

Copy page

View as Markdown

Open in ChatGPT

Open in Claude

Beautiful charts built with Apache ECharts. Copy and paste into your apps.

Usage#

app.component.ts

import { WdsChartComponent } from '@wds/angular/chart';

Examples#

Default#

Bar chart (the default type). config, data and the formatters are properties (in HTML set them from a script); series and x-key are attributes. Each series gets its name and color from config. The chart needs the echarts package: pnpm add echarts.

Show code

chart-default.ts

import { Component } from '@angular/core';
import { WdsChartComponent } from '@wds/angular/chart';
import { CONFIG, MONTHS, shortMonth } from './chart-data';

@Component({
  selector: 'app-chart-default-demo',
  host: { class: 'block w-full max-w-xl' },
  imports: [WdsChartComponent],
  template: `
    <wds-chart
      label="Visits: desktop and mobile"
      [config]="config"
      [data]="months"
      [series]="['desktop', 'mobile']"
      x-key="month"
      [xFormatter]="shortMonth"
    />
  `,
})
export class ChartDefaultDemo {
  protected readonly config = CONFIG;
  protected readonly months = MONTHS;
  protected readonly shortMonth = shortMonth;
}

chart-data.ts

import type { WdsChartConfig } from '@wds/core/chart';

export const MONTHS = [
  { month: 'January', desktop: 186, mobile: 80 },
  { month: 'February', desktop: 305, mobile: 200 },
  { month: 'March', desktop: 237, mobile: 120 },
  { month: 'April', desktop: 73, mobile: 190 },
  { month: 'May', desktop: 209, mobile: 130 },
  { month: 'June', desktop: 214, mobile: 140 },
];

/** Names and colors of the series; `month` and `date` name the category column of the data table. */
export const CONFIG: WdsChartConfig = {
  month: { label: 'Month' },
  date: { label: 'Day' },
  desktop: { label: 'Desktop', color: 'var(--wds-chart-1)' },
  mobile: { label: 'Mobile', color: 'var(--wds-chart-2)' },
};

export const BROWSERS = [
  { browser: 'chrome', visitors: 275 },
  { browser: 'safari', visitors: 200 },
  { browser: 'firefox', visitors: 187 },
  { browser: 'edge', visitors: 173 },
  { browser: 'other', visitors: 90 },
];

/** In `pie` and `radial` every category (row) has its own name and color. */
export const BROWSER_CONFIG: WdsChartConfig = {
  browser: { label: 'Browser' },
  visitors: { label: 'Visitors' },
  chrome: { label: 'Chrome', color: 'var(--wds-chart-1)' },
  safari: { label: 'Safari', color: 'var(--wds-chart-2)' },
  firefox: { label: 'Firefox', color: 'var(--wds-chart-3)' },
  edge: { label: 'Edge', color: 'var(--wds-chart-4)' },
  other: { label: 'Other', color: 'var(--wds-chart-5)' },
};

/** 90 days of visits (computed, so it is the same on every render). */
export const DAILY = Array.from({ length: 90 }, (_, i) => {
  const wave = Math.sin(i / 6) * 90 + Math.cos(i / 2.3) * 40;
  return {
    date: new Date(Date.UTC(2026, 3, 1 + i)).toISOString().slice(0, 10),
    desktop: Math.round(260 + wave + (i % 7) * 12),
    mobile: Math.round(180 + wave * 0.6 + ((i * 5) % 11) * 9),
  };
});

/** `January` → `Jan`. */
export const shortMonth = (value: string) => value.slice(0, 3);

/** `2026-04-01` → `Apr 1`. */
export const shortDate = (value: string) =>
  new Date(`${value}T00:00`).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });

Horizontal#

horizontal turns the bars sideways, grid="none" hides the grid lines and value-labels writes the values next to the bars. With one series there is no legend: the chart label names it.

Show code

chart-horizontal.ts

import { Component } from '@angular/core';
import { WdsChartComponent } from '@wds/angular/chart';
import { CONFIG, MONTHS } from './chart-data';

@Component({
  selector: 'app-chart-horizontal-demo',
  host: { class: 'block w-full max-w-xl' },
  imports: [WdsChartComponent],
  template: `
    <wds-chart
      label="Desktop visits"
      [config]="config"
      [data]="months"
      [series]="['desktop']"
      x-key="month"
      horizontal
      grid="none"
      value-labels
    />
  `,
})
export class ChartHorizontalDemo {
  protected readonly config = CONFIG;
  protected readonly months = MONTHS;
}

chart-data.ts

import type { WdsChartConfig } from '@wds/core/chart';

export const MONTHS = [
  { month: 'January', desktop: 186, mobile: 80 },
  { month: 'February', desktop: 305, mobile: 200 },
  { month: 'March', desktop: 237, mobile: 120 },
  { month: 'April', desktop: 73, mobile: 190 },
  { month: 'May', desktop: 209, mobile: 130 },
  { month: 'June', desktop: 214, mobile: 140 },
];

/** Names and colors of the series; `month` and `date` name the category column of the data table. */
export const CONFIG: WdsChartConfig = {
  month: { label: 'Month' },
  date: { label: 'Day' },
  desktop: { label: 'Desktop', color: 'var(--wds-chart-1)' },
  mobile: { label: 'Mobile', color: 'var(--wds-chart-2)' },
};

export const BROWSERS = [
  { browser: 'chrome', visitors: 275 },
  { browser: 'safari', visitors: 200 },
  { browser: 'firefox', visitors: 187 },
  { browser: 'edge', visitors: 173 },
  { browser: 'other', visitors: 90 },
];

/** In `pie` and `radial` every category (row) has its own name and color. */
export const BROWSER_CONFIG: WdsChartConfig = {
  browser: { label: 'Browser' },
  visitors: { label: 'Visitors' },
  chrome: { label: 'Chrome', color: 'var(--wds-chart-1)' },
  safari: { label: 'Safari', color: 'var(--wds-chart-2)' },
  firefox: { label: 'Firefox', color: 'var(--wds-chart-3)' },
  edge: { label: 'Edge', color: 'var(--wds-chart-4)' },
  other: { label: 'Other', color: 'var(--wds-chart-5)' },
};

/** 90 days of visits (computed, so it is the same on every render). */
export const DAILY = Array.from({ length: 90 }, (_, i) => {
  const wave = Math.sin(i / 6) * 90 + Math.cos(i / 2.3) * 40;
  return {
    date: new Date(Date.UTC(2026, 3, 1 + i)).toISOString().slice(0, 10),
    desktop: Math.round(260 + wave + (i % 7) * 12),
    mobile: Math.round(180 + wave * 0.6 + ((i * 5) % 11) * 9),
  };
});

/** `January` → `Jan`. */
export const shortMonth = (value: string) => value.slice(0, 3);

/** `2026-04-01` → `Apr 1`. */
export const shortDate = (value: string) =>
  new Date(`${value}T00:00`).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });

Stacked#

stacked puts the series on top of each other. tooltip sets the series indicator in the tooltip: dot (default), line or dashed.

Show code

chart-stacked.ts

import { Component } from '@angular/core';
import { WdsChartComponent } from '@wds/angular/chart';
import { CONFIG, MONTHS, shortMonth } from './chart-data';

@Component({
  selector: 'app-chart-stacked-demo',
  host: { class: 'block w-full max-w-xl' },
  imports: [WdsChartComponent],
  template: `
    <wds-chart
      label="Visits, stacked"
      [config]="config"
      [data]="months"
      [series]="['desktop', 'mobile']"
      x-key="month"
      [xFormatter]="shortMonth"
      stacked
      tooltip="line"
    />
  `,
})
export class ChartStackedDemo {
  protected readonly config = CONFIG;
  protected readonly months = MONTHS;
  protected readonly shortMonth = shortMonth;
}

chart-data.ts

import type { WdsChartConfig } from '@wds/core/chart';

export const MONTHS = [
  { month: 'January', desktop: 186, mobile: 80 },
  { month: 'February', desktop: 305, mobile: 200 },
  { month: 'March', desktop: 237, mobile: 120 },
  { month: 'April', desktop: 73, mobile: 190 },
  { month: 'May', desktop: 209, mobile: 130 },
  { month: 'June', desktop: 214, mobile: 140 },
];

/** Names and colors of the series; `month` and `date` name the category column of the data table. */
export const CONFIG: WdsChartConfig = {
  month: { label: 'Month' },
  date: { label: 'Day' },
  desktop: { label: 'Desktop', color: 'var(--wds-chart-1)' },
  mobile: { label: 'Mobile', color: 'var(--wds-chart-2)' },
};

export const BROWSERS = [
  { browser: 'chrome', visitors: 275 },
  { browser: 'safari', visitors: 200 },
  { browser: 'firefox', visitors: 187 },
  { browser: 'edge', visitors: 173 },
  { browser: 'other', visitors: 90 },
];

/** In `pie` and `radial` every category (row) has its own name and color. */
export const BROWSER_CONFIG: WdsChartConfig = {
  browser: { label: 'Browser' },
  visitors: { label: 'Visitors' },
  chrome: { label: 'Chrome', color: 'var(--wds-chart-1)' },
  safari: { label: 'Safari', color: 'var(--wds-chart-2)' },
  firefox: { label: 'Firefox', color: 'var(--wds-chart-3)' },
  edge: { label: 'Edge', color: 'var(--wds-chart-4)' },
  other: { label: 'Other', color: 'var(--wds-chart-5)' },
};

/** 90 days of visits (computed, so it is the same on every render). */
export const DAILY = Array.from({ length: 90 }, (_, i) => {
  const wave = Math.sin(i / 6) * 90 + Math.cos(i / 2.3) * 40;
  return {
    date: new Date(Date.UTC(2026, 3, 1 + i)).toISOString().slice(0, 10),
    desktop: Math.round(260 + wave + (i % 7) * 12),
    mobile: Math.round(180 + wave * 0.6 + ((i * 5) % 11) * 9),
  };
});

/** `January` → `Jan`. */
export const shortMonth = (value: string) => value.slice(0, 3);

/** `2026-04-01` → `Apr 1`. */
export const shortDate = (value: string) =>
  new Date(`${value}T00:00`).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });

Percentage#

stack-offset="expand" shows each stack as shares of 100%. y-axis shows the value axis labels.

Show code

chart-percentage.ts

import { Component } from '@angular/core';
import { WdsChartComponent } from '@wds/angular/chart';
import { CONFIG, MONTHS, shortMonth } from './chart-data';

@Component({
  selector: 'app-chart-percentage-demo',
  host: { class: 'block w-full max-w-xl' },
  imports: [WdsChartComponent],
  template: `
    <wds-chart
      label="Share of visits by device"
      [config]="config"
      [data]="months"
      [series]="['desktop', 'mobile']"
      x-key="month"
      [xFormatter]="shortMonth"
      stacked
      stack-offset="expand"
      y-axis
    />
  `,
})
export class ChartPercentageDemo {
  protected readonly config = CONFIG;
  protected readonly months = MONTHS;
  protected readonly shortMonth = shortMonth;
}

chart-data.ts

import type { WdsChartConfig } from '@wds/core/chart';

export const MONTHS = [
  { month: 'January', desktop: 186, mobile: 80 },
  { month: 'February', desktop: 305, mobile: 200 },
  { month: 'March', desktop: 237, mobile: 120 },
  { month: 'April', desktop: 73, mobile: 190 },
  { month: 'May', desktop: 209, mobile: 130 },
  { month: 'June', desktop: 214, mobile: 140 },
];

/** Names and colors of the series; `month` and `date` name the category column of the data table. */
export const CONFIG: WdsChartConfig = {
  month: { label: 'Month' },
  date: { label: 'Day' },
  desktop: { label: 'Desktop', color: 'var(--wds-chart-1)' },
  mobile: { label: 'Mobile', color: 'var(--wds-chart-2)' },
};

export const BROWSERS = [
  { browser: 'chrome', visitors: 275 },
  { browser: 'safari', visitors: 200 },
  { browser: 'firefox', visitors: 187 },
  { browser: 'edge', visitors: 173 },
  { browser: 'other', visitors: 90 },
];

/** In `pie` and `radial` every category (row) has its own name and color. */
export const BROWSER_CONFIG: WdsChartConfig = {
  browser: { label: 'Browser' },
  visitors: { label: 'Visitors' },
  chrome: { label: 'Chrome', color: 'var(--wds-chart-1)' },
  safari: { label: 'Safari', color: 'var(--wds-chart-2)' },
  firefox: { label: 'Firefox', color: 'var(--wds-chart-3)' },
  edge: { label: 'Edge', color: 'var(--wds-chart-4)' },
  other: { label: 'Other', color: 'var(--wds-chart-5)' },
};

/** 90 days of visits (computed, so it is the same on every render). */
export const DAILY = Array.from({ length: 90 }, (_, i) => {
  const wave = Math.sin(i / 6) * 90 + Math.cos(i / 2.3) * 40;
  return {
    date: new Date(Date.UTC(2026, 3, 1 + i)).toISOString().slice(0, 10),
    desktop: Math.round(260 + wave + (i % 7) * 12),
    mobile: Math.round(180 + wave * 0.6 + ((i * 5) % 11) * 9),
  };
});

/** `January` → `Jan`. */
export const shortMonth = (value: string) => value.slice(0, 3);

/** `2026-04-01` → `Apr 1`. */
export const shortDate = (value: string) =>
  new Date(`${value}T00:00`).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });

Line#

type="line". curve is linear, smooth or step; value-labels puts the last value at the end of each line.

Show code

chart-line.ts

import { Component } from '@angular/core';
import { WdsChartComponent } from '@wds/angular/chart';
import { CONFIG, MONTHS, shortMonth } from './chart-data';

@Component({
  selector: 'app-chart-line-demo',
  host: { class: 'block w-full max-w-xl' },
  imports: [WdsChartComponent],
  template: `
    <wds-chart
      label="Monthly visits"
      type="line"
      curve="smooth"
      y-axis
      value-labels
      [config]="config"
      [data]="months"
      [series]="['desktop', 'mobile']"
      x-key="month"
      [xFormatter]="shortMonth"
    />
  `,
})
export class ChartLineDemo {
  protected readonly config = CONFIG;
  protected readonly months = MONTHS;
  protected readonly shortMonth = shortMonth;
}

chart-data.ts

import type { WdsChartConfig } from '@wds/core/chart';

export const MONTHS = [
  { month: 'January', desktop: 186, mobile: 80 },
  { month: 'February', desktop: 305, mobile: 200 },
  { month: 'March', desktop: 237, mobile: 120 },
  { month: 'April', desktop: 73, mobile: 190 },
  { month: 'May', desktop: 209, mobile: 130 },
  { month: 'June', desktop: 214, mobile: 140 },
];

/** Names and colors of the series; `month` and `date` name the category column of the data table. */
export const CONFIG: WdsChartConfig = {
  month: { label: 'Month' },
  date: { label: 'Day' },
  desktop: { label: 'Desktop', color: 'var(--wds-chart-1)' },
  mobile: { label: 'Mobile', color: 'var(--wds-chart-2)' },
};

export const BROWSERS = [
  { browser: 'chrome', visitors: 275 },
  { browser: 'safari', visitors: 200 },
  { browser: 'firefox', visitors: 187 },
  { browser: 'edge', visitors: 173 },
  { browser: 'other', visitors: 90 },
];

/** In `pie` and `radial` every category (row) has its own name and color. */
export const BROWSER_CONFIG: WdsChartConfig = {
  browser: { label: 'Browser' },
  visitors: { label: 'Visitors' },
  chrome: { label: 'Chrome', color: 'var(--wds-chart-1)' },
  safari: { label: 'Safari', color: 'var(--wds-chart-2)' },
  firefox: { label: 'Firefox', color: 'var(--wds-chart-3)' },
  edge: { label: 'Edge', color: 'var(--wds-chart-4)' },
  other: { label: 'Other', color: 'var(--wds-chart-5)' },
};

/** 90 days of visits (computed, so it is the same on every render). */
export const DAILY = Array.from({ length: 90 }, (_, i) => {
  const wave = Math.sin(i / 6) * 90 + Math.cos(i / 2.3) * 40;
  return {
    date: new Date(Date.UTC(2026, 3, 1 + i)).toISOString().slice(0, 10),
    desktop: Math.round(260 + wave + (i % 7) * 12),
    mobile: Math.round(180 + wave * 0.6 + ((i * 5) % 11) * 9),
  };
});

/** `January` → `Jan`. */
export const shortMonth = (value: string) => value.slice(0, 3);

/** `2026-04-01` → `Apr 1`. */
export const shortDate = (value: string) =>
  new Date(`${value}T00:00`).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });

Area#

type="area" with gradient fills and a stack.

Show code

chart-area.ts

import { Component } from '@angular/core';
import { WdsChartComponent } from '@wds/angular/chart';
import { CONFIG, MONTHS, shortMonth } from './chart-data';

@Component({
  selector: 'app-chart-area-demo',
  host: { class: 'block w-full max-w-xl' },
  imports: [WdsChartComponent],
  template: `
    <wds-chart
      label="Visits, area"
      type="area"
      curve="smooth"
      gradient
      stacked
      tooltip="dashed"
      [config]="config"
      [data]="months"
      [series]="['mobile', 'desktop']"
      x-key="month"
      [xFormatter]="shortMonth"
    />
  `,
})
export class ChartAreaDemo {
  protected readonly config = CONFIG;
  protected readonly months = MONTHS;
  protected readonly shortMonth = shortMonth;
}

chart-data.ts

import type { WdsChartConfig } from '@wds/core/chart';

export const MONTHS = [
  { month: 'January', desktop: 186, mobile: 80 },
  { month: 'February', desktop: 305, mobile: 200 },
  { month: 'March', desktop: 237, mobile: 120 },
  { month: 'April', desktop: 73, mobile: 190 },
  { month: 'May', desktop: 209, mobile: 130 },
  { month: 'June', desktop: 214, mobile: 140 },
];

/** Names and colors of the series; `month` and `date` name the category column of the data table. */
export const CONFIG: WdsChartConfig = {
  month: { label: 'Month' },
  date: { label: 'Day' },
  desktop: { label: 'Desktop', color: 'var(--wds-chart-1)' },
  mobile: { label: 'Mobile', color: 'var(--wds-chart-2)' },
};

export const BROWSERS = [
  { browser: 'chrome', visitors: 275 },
  { browser: 'safari', visitors: 200 },
  { browser: 'firefox', visitors: 187 },
  { browser: 'edge', visitors: 173 },
  { browser: 'other', visitors: 90 },
];

/** In `pie` and `radial` every category (row) has its own name and color. */
export const BROWSER_CONFIG: WdsChartConfig = {
  browser: { label: 'Browser' },
  visitors: { label: 'Visitors' },
  chrome: { label: 'Chrome', color: 'var(--wds-chart-1)' },
  safari: { label: 'Safari', color: 'var(--wds-chart-2)' },
  firefox: { label: 'Firefox', color: 'var(--wds-chart-3)' },
  edge: { label: 'Edge', color: 'var(--wds-chart-4)' },
  other: { label: 'Other', color: 'var(--wds-chart-5)' },
};

/** 90 days of visits (computed, so it is the same on every render). */
export const DAILY = Array.from({ length: 90 }, (_, i) => {
  const wave = Math.sin(i / 6) * 90 + Math.cos(i / 2.3) * 40;
  return {
    date: new Date(Date.UTC(2026, 3, 1 + i)).toISOString().slice(0, 10),
    desktop: Math.round(260 + wave + (i % 7) * 12),
    mobile: Math.round(180 + wave * 0.6 + ((i * 5) % 11) * 9),
  };
});

/** `January` → `Jan`. */
export const shortMonth = (value: string) => value.slice(0, 3);

/** `2026-04-01` → `Apr 1`. */
export const shortDate = (value: string) =>
  new Date(`${value}T00:00`).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });

Series options#

Instead of a key, a series can be a WdsChartSeries object with its own curve, showSymbol, color, stack or fillOpacity.

Show code

chart-series-options.ts

import { Component } from '@angular/core';
import { WdsChartComponent } from '@wds/angular/chart';
import type { WdsChartSeriesInput } from '@wds/core/chart';
import { CONFIG, MONTHS, shortMonth } from './chart-data';

@Component({
  selector: 'app-chart-series-options-demo',
  host: { class: 'block w-full max-w-xl' },
  imports: [WdsChartComponent],
  template: `
    <wds-chart
      label="Visits, step line"
      type="line"
      [config]="config"
      [data]="months"
      [series]="series"
      x-key="month"
      [xFormatter]="shortMonth"
    />
  `,
})
export class ChartSeriesOptionsDemo {
  protected readonly config = CONFIG;
  protected readonly months = MONTHS;
  protected readonly shortMonth = shortMonth;
  protected readonly series: WdsChartSeriesInput = [
    { key: 'desktop', curve: 'step' },
    { key: 'mobile', curve: 'linear', showSymbol: true },
  ];
}

chart-data.ts

import type { WdsChartConfig } from '@wds/core/chart';

export const MONTHS = [
  { month: 'January', desktop: 186, mobile: 80 },
  { month: 'February', desktop: 305, mobile: 200 },
  { month: 'March', desktop: 237, mobile: 120 },
  { month: 'April', desktop: 73, mobile: 190 },
  { month: 'May', desktop: 209, mobile: 130 },
  { month: 'June', desktop: 214, mobile: 140 },
];

/** Names and colors of the series; `month` and `date` name the category column of the data table. */
export const CONFIG: WdsChartConfig = {
  month: { label: 'Month' },
  date: { label: 'Day' },
  desktop: { label: 'Desktop', color: 'var(--wds-chart-1)' },
  mobile: { label: 'Mobile', color: 'var(--wds-chart-2)' },
};

export const BROWSERS = [
  { browser: 'chrome', visitors: 275 },
  { browser: 'safari', visitors: 200 },
  { browser: 'firefox', visitors: 187 },
  { browser: 'edge', visitors: 173 },
  { browser: 'other', visitors: 90 },
];

/** In `pie` and `radial` every category (row) has its own name and color. */
export const BROWSER_CONFIG: WdsChartConfig = {
  browser: { label: 'Browser' },
  visitors: { label: 'Visitors' },
  chrome: { label: 'Chrome', color: 'var(--wds-chart-1)' },
  safari: { label: 'Safari', color: 'var(--wds-chart-2)' },
  firefox: { label: 'Firefox', color: 'var(--wds-chart-3)' },
  edge: { label: 'Edge', color: 'var(--wds-chart-4)' },
  other: { label: 'Other', color: 'var(--wds-chart-5)' },
};

/** 90 days of visits (computed, so it is the same on every render). */
export const DAILY = Array.from({ length: 90 }, (_, i) => {
  const wave = Math.sin(i / 6) * 90 + Math.cos(i / 2.3) * 40;
  return {
    date: new Date(Date.UTC(2026, 3, 1 + i)).toISOString().slice(0, 10),
    desktop: Math.round(260 + wave + (i % 7) * 12),
    mobile: Math.round(180 + wave * 0.6 + ((i * 5) % 11) * 9),
  };
});

/** `January` → `Jan`. */
export const shortMonth = (value: string) => value.slice(0, 3);

/** `2026-04-01` → `Apr 1`. */
export const shortDate = (value: string) =>
  new Date(`${value}T00:00`).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });

Bars and a line#

A series with type: 'line' is drawn as a line on a bar chart.

Show code

chart-mixed.ts

import { Component } from '@angular/core';
import { WdsChartComponent } from '@wds/angular/chart';
import type { WdsChartSeriesInput } from '@wds/core/chart';
import { CONFIG, MONTHS, shortMonth } from './chart-data';

@Component({
  selector: 'app-chart-mixed-demo',
  host: { class: 'block w-full max-w-xl' },
  imports: [WdsChartComponent],
  template: `
    <wds-chart
      label="Desktop (bars) and mobile (line)"
      [config]="config"
      [data]="months"
      [series]="series"
      x-key="month"
      [xFormatter]="shortMonth"
    />
  `,
})
export class ChartMixedDemo {
  protected readonly config = CONFIG;
  protected readonly months = MONTHS;
  protected readonly shortMonth = shortMonth;
  protected readonly series: WdsChartSeriesInput = ['desktop', { key: 'mobile', type: 'line', curve: 'smooth' }];
}

chart-data.ts

import type { WdsChartConfig } from '@wds/core/chart';

export const MONTHS = [
  { month: 'January', desktop: 186, mobile: 80 },
  { month: 'February', desktop: 305, mobile: 200 },
  { month: 'March', desktop: 237, mobile: 120 },
  { month: 'April', desktop: 73, mobile: 190 },
  { month: 'May', desktop: 209, mobile: 130 },
  { month: 'June', desktop: 214, mobile: 140 },
];

/** Names and colors of the series; `month` and `date` name the category column of the data table. */
export const CONFIG: WdsChartConfig = {
  month: { label: 'Month' },
  date: { label: 'Day' },
  desktop: { label: 'Desktop', color: 'var(--wds-chart-1)' },
  mobile: { label: 'Mobile', color: 'var(--wds-chart-2)' },
};

export const BROWSERS = [
  { browser: 'chrome', visitors: 275 },
  { browser: 'safari', visitors: 200 },
  { browser: 'firefox', visitors: 187 },
  { browser: 'edge', visitors: 173 },
  { browser: 'other', visitors: 90 },
];

/** In `pie` and `radial` every category (row) has its own name and color. */
export const BROWSER_CONFIG: WdsChartConfig = {
  browser: { label: 'Browser' },
  visitors: { label: 'Visitors' },
  chrome: { label: 'Chrome', color: 'var(--wds-chart-1)' },
  safari: { label: 'Safari', color: 'var(--wds-chart-2)' },
  firefox: { label: 'Firefox', color: 'var(--wds-chart-3)' },
  edge: { label: 'Edge', color: 'var(--wds-chart-4)' },
  other: { label: 'Other', color: 'var(--wds-chart-5)' },
};

/** 90 days of visits (computed, so it is the same on every render). */
export const DAILY = Array.from({ length: 90 }, (_, i) => {
  const wave = Math.sin(i / 6) * 90 + Math.cos(i / 2.3) * 40;
  return {
    date: new Date(Date.UTC(2026, 3, 1 + i)).toISOString().slice(0, 10),
    desktop: Math.round(260 + wave + (i % 7) * 12),
    mobile: Math.round(180 + wave * 0.6 + ((i * 5) % 11) * 9),
  };
});

/** `January` → `Jan`. */
export const shortMonth = (value: string) => value.slice(0, 3);

/** `2026-04-01` → `Apr 1`. */
export const shortDate = (value: string) =>
  new Date(`${value}T00:00`).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });

Donut#

In pie and radial the categories are the rows (x-key) and the value is the first series; config names and colors the categories (or fill in a row). inner-radius makes a donut, pad-angle separates the slices, and center-value with center-label fill the middle.

Show code

chart-donut.ts

import { Component } from '@angular/core';
import { WdsChartComponent } from '@wds/angular/chart';
import { BROWSERS, BROWSER_CONFIG } from './chart-data';

@Component({
  selector: 'app-chart-donut-demo',
  host: { class: 'block w-full max-w-xs' },
  imports: [WdsChartComponent],
  template: `
    <wds-chart
      label="Visitors by browser"
      type="pie"
      inner-radius="58%"
      pad-angle="2"
      center-value="925"
      center-label="visitors"
      [config]="browserConfig"
      [data]="browsers"
      [series]="['visitors']"
      x-key="browser"
      class="[--wds-chart-aspect-ratio:1]"
    />
  `,
})
export class ChartDonutDemo {
  protected readonly browsers = BROWSERS;
  protected readonly browserConfig = BROWSER_CONFIG;
}

chart-data.ts

import type { WdsChartConfig } from '@wds/core/chart';

export const MONTHS = [
  { month: 'January', desktop: 186, mobile: 80 },
  { month: 'February', desktop: 305, mobile: 200 },
  { month: 'March', desktop: 237, mobile: 120 },
  { month: 'April', desktop: 73, mobile: 190 },
  { month: 'May', desktop: 209, mobile: 130 },
  { month: 'June', desktop: 214, mobile: 140 },
];

/** Names and colors of the series; `month` and `date` name the category column of the data table. */
export const CONFIG: WdsChartConfig = {
  month: { label: 'Month' },
  date: { label: 'Day' },
  desktop: { label: 'Desktop', color: 'var(--wds-chart-1)' },
  mobile: { label: 'Mobile', color: 'var(--wds-chart-2)' },
};

export const BROWSERS = [
  { browser: 'chrome', visitors: 275 },
  { browser: 'safari', visitors: 200 },
  { browser: 'firefox', visitors: 187 },
  { browser: 'edge', visitors: 173 },
  { browser: 'other', visitors: 90 },
];

/** In `pie` and `radial` every category (row) has its own name and color. */
export const BROWSER_CONFIG: WdsChartConfig = {
  browser: { label: 'Browser' },
  visitors: { label: 'Visitors' },
  chrome: { label: 'Chrome', color: 'var(--wds-chart-1)' },
  safari: { label: 'Safari', color: 'var(--wds-chart-2)' },
  firefox: { label: 'Firefox', color: 'var(--wds-chart-3)' },
  edge: { label: 'Edge', color: 'var(--wds-chart-4)' },
  other: { label: 'Other', color: 'var(--wds-chart-5)' },
};

/** 90 days of visits (computed, so it is the same on every render). */
export const DAILY = Array.from({ length: 90 }, (_, i) => {
  const wave = Math.sin(i / 6) * 90 + Math.cos(i / 2.3) * 40;
  return {
    date: new Date(Date.UTC(2026, 3, 1 + i)).toISOString().slice(0, 10),
    desktop: Math.round(260 + wave + (i % 7) * 12),
    mobile: Math.round(180 + wave * 0.6 + ((i * 5) % 11) * 9),
  };
});

/** `January` → `Jan`. */
export const shortMonth = (value: string) => value.slice(0, 3);

/** `2026-04-01` → `Apr 1`. */
export const shortDate = (value: string) =>
  new Date(`${value}T00:00`).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });

Radar#

type="radar": one polygon per series, radar-shape="circle" for a round grid.

Show code

chart-radar.ts

import { Component } from '@angular/core';
import { WdsChartComponent } from '@wds/angular/chart';
import { CONFIG, MONTHS, shortMonth } from './chart-data';

@Component({
  selector: 'app-chart-radar-demo',
  host: { class: 'block w-full max-w-xs' },
  imports: [WdsChartComponent],
  template: `
    <wds-chart
      label="Visits on a radar"
      type="radar"
      [config]="config"
      [data]="months"
      [series]="['desktop', 'mobile']"
      x-key="month"
      [xFormatter]="shortMonth"
      class="[--wds-chart-aspect-ratio:1]"
    />
  `,
})
export class ChartRadarDemo {
  protected readonly config = CONFIG;
  protected readonly months = MONTHS;
  protected readonly shortMonth = shortMonth;
}

chart-data.ts

import type { WdsChartConfig } from '@wds/core/chart';

export const MONTHS = [
  { month: 'January', desktop: 186, mobile: 80 },
  { month: 'February', desktop: 305, mobile: 200 },
  { month: 'March', desktop: 237, mobile: 120 },
  { month: 'April', desktop: 73, mobile: 190 },
  { month: 'May', desktop: 209, mobile: 130 },
  { month: 'June', desktop: 214, mobile: 140 },
];

/** Names and colors of the series; `month` and `date` name the category column of the data table. */
export const CONFIG: WdsChartConfig = {
  month: { label: 'Month' },
  date: { label: 'Day' },
  desktop: { label: 'Desktop', color: 'var(--wds-chart-1)' },
  mobile: { label: 'Mobile', color: 'var(--wds-chart-2)' },
};

export const BROWSERS = [
  { browser: 'chrome', visitors: 275 },
  { browser: 'safari', visitors: 200 },
  { browser: 'firefox', visitors: 187 },
  { browser: 'edge', visitors: 173 },
  { browser: 'other', visitors: 90 },
];

/** In `pie` and `radial` every category (row) has its own name and color. */
export const BROWSER_CONFIG: WdsChartConfig = {
  browser: { label: 'Browser' },
  visitors: { label: 'Visitors' },
  chrome: { label: 'Chrome', color: 'var(--wds-chart-1)' },
  safari: { label: 'Safari', color: 'var(--wds-chart-2)' },
  firefox: { label: 'Firefox', color: 'var(--wds-chart-3)' },
  edge: { label: 'Edge', color: 'var(--wds-chart-4)' },
  other: { label: 'Other', color: 'var(--wds-chart-5)' },
};

/** 90 days of visits (computed, so it is the same on every render). */
export const DAILY = Array.from({ length: 90 }, (_, i) => {
  const wave = Math.sin(i / 6) * 90 + Math.cos(i / 2.3) * 40;
  return {
    date: new Date(Date.UTC(2026, 3, 1 + i)).toISOString().slice(0, 10),
    desktop: Math.round(260 + wave + (i % 7) * 12),
    mobile: Math.round(180 + wave * 0.6 + ((i * 5) % 11) * 9),
  };
});

/** `January` → `Jan`. */
export const shortMonth = (value: string) => value.slice(0, 3);

/** `2026-04-01` → `Apr 1`. */
export const shortDate = (value: string) =>
  new Date(`${value}T00:00`).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });

Radial#

type="radial": one ring per category; a full ring is the largest value. hide-track hides the ring background.

Show code

chart-radial.ts

import { Component } from '@angular/core';
import { WdsChartComponent } from '@wds/angular/chart';
import { BROWSERS, BROWSER_CONFIG } from './chart-data';

@Component({
  selector: 'app-chart-radial-demo',
  host: { class: 'block w-full max-w-xs' },
  imports: [WdsChartComponent],
  template: `
    <wds-chart
      label="Visitors by browser, rings"
      type="radial"
      inner-radius="24%"
      [config]="browserConfig"
      [data]="browsers"
      [series]="['visitors']"
      x-key="browser"
      class="[--wds-chart-aspect-ratio:1]"
    />
  `,
})
export class ChartRadialDemo {
  protected readonly browsers = BROWSERS;
  protected readonly browserConfig = BROWSER_CONFIG;
}

chart-data.ts

import type { WdsChartConfig } from '@wds/core/chart';

export const MONTHS = [
  { month: 'January', desktop: 186, mobile: 80 },
  { month: 'February', desktop: 305, mobile: 200 },
  { month: 'March', desktop: 237, mobile: 120 },
  { month: 'April', desktop: 73, mobile: 190 },
  { month: 'May', desktop: 209, mobile: 130 },
  { month: 'June', desktop: 214, mobile: 140 },
];

/** Names and colors of the series; `month` and `date` name the category column of the data table. */
export const CONFIG: WdsChartConfig = {
  month: { label: 'Month' },
  date: { label: 'Day' },
  desktop: { label: 'Desktop', color: 'var(--wds-chart-1)' },
  mobile: { label: 'Mobile', color: 'var(--wds-chart-2)' },
};

export const BROWSERS = [
  { browser: 'chrome', visitors: 275 },
  { browser: 'safari', visitors: 200 },
  { browser: 'firefox', visitors: 187 },
  { browser: 'edge', visitors: 173 },
  { browser: 'other', visitors: 90 },
];

/** In `pie` and `radial` every category (row) has its own name and color. */
export const BROWSER_CONFIG: WdsChartConfig = {
  browser: { label: 'Browser' },
  visitors: { label: 'Visitors' },
  chrome: { label: 'Chrome', color: 'var(--wds-chart-1)' },
  safari: { label: 'Safari', color: 'var(--wds-chart-2)' },
  firefox: { label: 'Firefox', color: 'var(--wds-chart-3)' },
  edge: { label: 'Edge', color: 'var(--wds-chart-4)' },
  other: { label: 'Other', color: 'var(--wds-chart-5)' },
};

/** 90 days of visits (computed, so it is the same on every render). */
export const DAILY = Array.from({ length: 90 }, (_, i) => {
  const wave = Math.sin(i / 6) * 90 + Math.cos(i / 2.3) * 40;
  return {
    date: new Date(Date.UTC(2026, 3, 1 + i)).toISOString().slice(0, 10),
    desktop: Math.round(260 + wave + (i % 7) * 12),
    mobile: Math.round(180 + wave * 0.6 + ((i * 5) % 11) * 9),
  };
});

/** `January` → `Jan`. */
export const shortMonth = (value: string) => value.slice(0, 3);

/** `2026-04-01` → `Apr 1`. */
export const shortDate = (value: string) =>
  new Date(`${value}T00:00`).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });

Custom colors#

By default series get the --wds-chart-1…5 tokens in a fixed order, so a series keeps its color when another one is hidden. color in config sets any CSS color, and theme sets separate colors for light and dark backgrounds.

Show code

chart-custom-colors.ts

import { Component } from '@angular/core';
import { WdsChartComponent } from '@wds/angular/chart';
import type { WdsChartConfig } from '@wds/core/chart';
import { MONTHS, shortMonth } from './chart-data';

@Component({
  selector: 'app-chart-custom-colors-demo',
  host: { class: 'block w-full max-w-xl' },
  imports: [WdsChartComponent],
  template: `
    <wds-chart
      label="Visits in custom colors"
      [config]="colors"
      [data]="months"
      [series]="['desktop', 'mobile']"
      x-key="month"
      [xFormatter]="shortMonth"
    />
  `,
})
export class ChartCustomColorsDemo {
  protected readonly months = MONTHS;
  protected readonly shortMonth = shortMonth;
  protected readonly colors: WdsChartConfig = {
    month: { label: 'Month' },
    desktop: { label: 'Desktop', color: '#0d9488' },
    mobile: { label: 'Mobile', theme: { light: '#c2410c', dark: '#fb923c' } },
  };
}

chart-data.ts

import type { WdsChartConfig } from '@wds/core/chart';

export const MONTHS = [
  { month: 'January', desktop: 186, mobile: 80 },
  { month: 'February', desktop: 305, mobile: 200 },
  { month: 'March', desktop: 237, mobile: 120 },
  { month: 'April', desktop: 73, mobile: 190 },
  { month: 'May', desktop: 209, mobile: 130 },
  { month: 'June', desktop: 214, mobile: 140 },
];

/** Names and colors of the series; `month` and `date` name the category column of the data table. */
export const CONFIG: WdsChartConfig = {
  month: { label: 'Month' },
  date: { label: 'Day' },
  desktop: { label: 'Desktop', color: 'var(--wds-chart-1)' },
  mobile: { label: 'Mobile', color: 'var(--wds-chart-2)' },
};

export const BROWSERS = [
  { browser: 'chrome', visitors: 275 },
  { browser: 'safari', visitors: 200 },
  { browser: 'firefox', visitors: 187 },
  { browser: 'edge', visitors: 173 },
  { browser: 'other', visitors: 90 },
];

/** In `pie` and `radial` every category (row) has its own name and color. */
export const BROWSER_CONFIG: WdsChartConfig = {
  browser: { label: 'Browser' },
  visitors: { label: 'Visitors' },
  chrome: { label: 'Chrome', color: 'var(--wds-chart-1)' },
  safari: { label: 'Safari', color: 'var(--wds-chart-2)' },
  firefox: { label: 'Firefox', color: 'var(--wds-chart-3)' },
  edge: { label: 'Edge', color: 'var(--wds-chart-4)' },
  other: { label: 'Other', color: 'var(--wds-chart-5)' },
};

/** 90 days of visits (computed, so it is the same on every render). */
export const DAILY = Array.from({ length: 90 }, (_, i) => {
  const wave = Math.sin(i / 6) * 90 + Math.cos(i / 2.3) * 40;
  return {
    date: new Date(Date.UTC(2026, 3, 1 + i)).toISOString().slice(0, 10),
    desktop: Math.round(260 + wave + (i % 7) * 12),
    mobile: Math.round(180 + wave * 0.6 + ((i * 5) % 11) * 9),
  };
});

/** `January` → `Jan`. */
export const shortMonth = (value: string) => value.slice(0, 3);

/** `2026-04-01` → `Apr 1`. */
export const shortDate = (value: string) =>
  new Date(`${value}T00:00`).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });

Interactive#

zoom adds zooming (wheel, gesture and a slider), wds-chart-click returns the clicked point, and show-table shows the data as a table. Changing type redraws the chart with the same data.

Area

Line

Bar

Table

Clicked: none

Show code

chart-interactive.ts

import { Component, signal } from '@angular/core';
import { WdsChartComponent } from '@wds/angular/chart';
import { WDS_SELECT } from '@wds/angular/select';
import { WdsSwitchComponent } from '@wds/angular/switch';
import type { WdsChartClickDetail } from '@wds/core/chart';
import { CONFIG, DAILY, shortDate } from './chart-data';

@Component({
  selector: 'app-chart-interactive-demo',
  host: { class: 'flex w-full max-w-2xl flex-col gap-3' },
  imports: [WdsChartComponent, ...WDS_SELECT, WdsSwitchComponent],
  template: `
    <div class="flex flex-wrap items-center gap-4">
      <wds-select class="w-36" aria-label="Chart type" [value]="type()" (wdsChange)="type.set($any($event.value))">
        <wds-select-item value="area">Area</wds-select-item>
        <wds-select-item value="line">Line</wds-select-item>
        <wds-select-item value="bar">Bar</wds-select-item>
      </wds-select>
      <wds-switch class="text-sm" [checked]="table()" (wdsChange)="table.set($event.checked)">Table</wds-switch>
    </div>
    <wds-chart
      label="Daily visits"
      [type]="type()"
      zoom
      y-axis
      gradient
      stacked
      curve="smooth"
      [showTable]="table()"
      [config]="config"
      [data]="daily"
      [series]="['mobile', 'desktop']"
      x-key="date"
      [xFormatter]="shortDate"
      class="[--wds-chart-height:300px] [&::part(table)]:mt-2"
      (wdsChartClick)="onClick($event)"
    />
    <p class="m-0 text-sm text-muted-foreground">Clicked: {{ clicked() || 'none' }}</p>
  `,
})
export class ChartInteractiveDemo {
  protected readonly config = CONFIG;
  protected readonly daily = DAILY;
  protected readonly shortDate = shortDate;
  protected readonly type = signal<'area' | 'line' | 'bar'>('area');
  protected readonly table = signal(false);
  protected readonly clicked = signal('');

  protected onClick({ key, name, value }: WdsChartClickDetail): void {
    this.clicked.set(`${CONFIG[key]?.label ?? key}, ${shortDate(name)}: ${value}`);
  }
}

chart-data.ts

import type { WdsChartConfig } from '@wds/core/chart';

export const MONTHS = [
  { month: 'January', desktop: 186, mobile: 80 },
  { month: 'February', desktop: 305, mobile: 200 },
  { month: 'March', desktop: 237, mobile: 120 },
  { month: 'April', desktop: 73, mobile: 190 },
  { month: 'May', desktop: 209, mobile: 130 },
  { month: 'June', desktop: 214, mobile: 140 },
];

/** Names and colors of the series; `month` and `date` name the category column of the data table. */
export const CONFIG: WdsChartConfig = {
  month: { label: 'Month' },
  date: { label: 'Day' },
  desktop: { label: 'Desktop', color: 'var(--wds-chart-1)' },
  mobile: { label: 'Mobile', color: 'var(--wds-chart-2)' },
};

export const BROWSERS = [
  { browser: 'chrome', visitors: 275 },
  { browser: 'safari', visitors: 200 },
  { browser: 'firefox', visitors: 187 },
  { browser: 'edge', visitors: 173 },
  { browser: 'other', visitors: 90 },
];

/** In `pie` and `radial` every category (row) has its own name and color. */
export const BROWSER_CONFIG: WdsChartConfig = {
  browser: { label: 'Browser' },
  visitors: { label: 'Visitors' },
  chrome: { label: 'Chrome', color: 'var(--wds-chart-1)' },
  safari: { label: 'Safari', color: 'var(--wds-chart-2)' },
  firefox: { label: 'Firefox', color: 'var(--wds-chart-3)' },
  edge: { label: 'Edge', color: 'var(--wds-chart-4)' },
  other: { label: 'Other', color: 'var(--wds-chart-5)' },
};

/** 90 days of visits (computed, so it is the same on every render). */
export const DAILY = Array.from({ length: 90 }, (_, i) => {
  const wave = Math.sin(i / 6) * 90 + Math.cos(i / 2.3) * 40;
  return {
    date: new Date(Date.UTC(2026, 3, 1 + i)).toISOString().slice(0, 10),
    desktop: Math.round(260 + wave + (i % 7) * 12),
    mobile: Math.round(180 + wave * 0.6 + ((i * 5) % 11) * 9),
  };
});

/** `January` → `Jan`. */
export const shortMonth = (value: string) => value.slice(0, 3);

/** `2026-04-01` → `Apr 1`. */
export const shortDate = (value: string) =>
  new Date(`${value}T00:00`).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });

API References#

wds-chart#

A chart built on Apache ECharts: bar, line, area, pie, radar, radial. Series colors are the --wds-chart-1…5 tokens (in a fixed order); config sets names and colors. The legend toggles series, the tooltip shows every series at a point, and the data is also in a table (always for screen readers, on screen with show-table). Requires the echarts package (an optional dependency of @wds/core, loaded only by @wds/core/chart).

Attributes

Attribute	Type	Default	Description
type	WdsChartType	'bar'	Chart type.
series	WdsChartSeriesInput	[]	Series keys (`series="desktop, mobile"`) or full `WdsChartSeries` objects. In `pie`/`radial` the first series is the value.
x-key.xKey	string	''	Key of the category in a row (the X axis, the slice name).
stacked	boolean	false	Stacks bars or areas.
stack-offset.stackOffset	WdsChartStackOffset	'none'	`expand`: the stack as a percentage share (0–100%).
horizontal	boolean	false	Horizontal bars.
grid	WdsChartGrid	'horizontal'	Grid lines.
hide-x-axis.hideXAxis	boolean	false	Hides the category axis labels.
y-axis.yAxis	boolean	false	Shows the value axis labels.
curve	WdsChartCurve	'linear'	Line shape of `line`/`area` (a series can override it).
gradient	boolean	false	A gradient instead of a solid `area` fill.
value-labels.valueLabels	boolean	false	Values next to bars, at the end of lines and next to slices.
legend	WdsChartLegend	'auto'	Legend: `auto` (from 2 series), `top`, `bottom`, `none`.
tooltip	WdsChartTooltipIndicator \| 'none'	'dot'	Series indicator in the tooltip; `none` turns the tooltip off.
inner-radius.innerRadius	string \| undefined		Inner radius of `pie` (donut) and `radial`, e.g. `60%`.
outer-radius.outerRadius	string \| undefined		Outer radius of `pie` and `radial`.
start-angle.startAngle	number \| undefined		Start angle of `pie`/`radial` in degrees (default 90, i.e. 12 o'clock).
end-angle.endAngle	number \| undefined		End angle of `pie`/`radial` in degrees.
pad-angle.padAngle	number	0	Gap between `pie` slices in degrees.
center-value.centerValue	string	''	Large value in the center of a donut or radial chart.
center-label.centerLabel	string	''	Caption under the center value.
radar-shape.radarShape	'polygon' \| 'circle'	'polygon'	Shape of the radar grid.
hide-track.hideTrack	boolean	false	Hides the background track of `radial` rings.
zoom	boolean	false	Axis zoom (wheel or gesture, and a slider under the chart).
disable-animation.disableAnimation	boolean	false	Turns animation off (it is also off with `prefers-reduced-motion`).
renderer	'svg' \| 'canvas'	'svg'	`svg` (sharp text, print) or `canvas` (many points).
label	string	''	Chart name for screen readers and the table caption.
show-table.showTable	boolean	false	Shows the data table under the chart.
locale	string \| undefined		Locale for number formatting (default: the document language).

Properties

Property	Description
configWdsChartConfig	Names and colors of the series (or of the categories in `pie`/`radial`).
dataWdsChartDatum[]	Data rows.
xFormatter(value: string) => string \| undefined	Category label (axis, tooltip, table).
yFormatter(value: number) => string \| undefined	Value axis label.
valueFormatter(value: number, key: string) => string \| undefined	Value in the tooltip, labels and table.
optionRecord<string, unknown> \| undefined	Extra ECharts options merged over the generated ones (e.g. `markLine`).

Events

Event	Description
wds-chart-clickCustomEvent<WdsChartClickDetail>	Click on a bar, point or slice.
wds-legend-changeCustomEvent<WdsChartLegendChangeDetail>	A series is hidden or shown from the legend.

Methods

Method	Description
getInstance()	The ECharts instance (after the first draw), e.g. for `dispatchAction`.
resize()	Fits the chart to its container (it also does this on its own when the size changes).

CSS parts (::part)

Part	Description
plot	The drawing area.
legend	The legend.
table	The data table.

CSS custom properties

Property	Description
--wds-chart-height	Chart height (by default from the aspect ratio).
--wds-chart-aspect-ratio	Aspect ratio when no height is set (default 16 / 9).

Accessibility#

The element has role="figure" and label as its accessible name. The drawing itself is hidden from screen readers (aria-hidden); instead the data is in a table with the label as its caption, visually hidden unless show-table is set.

The legend is a list of toggle buttons with aria-pressed; a hidden series stays in the table. The legend name and the fallback table caption are built in and are in Polish for now (Legenda, Dane wykresu).

The tooltip and the center value of a donut are visual only; the same values are in the table.

Keyboard support#

Key	Function
Tab	Moves focus through the legend buttons.
EnterSpace	Hides or shows the series (or category) of the focused legend button.

Usage#

Examples#

Default#

Horizontal#

Stacked#

Percentage#

Line#

Area#

Series options#

Bars and a line#

Donut#

Radar#

Radial#

Custom colors#

Interactive#

API References#

wds-chart#

Attributes

Properties

Events

Methods

CSS parts (::part)

CSS custom properties

Accessibility#

Screen reader#

Keyboard support#