Charts

Responsive charts with up to five API series, typed point events, and an accessible data table.

Quick start

Add Charts1 in the Designer. Use the example in a page method.

Charts1.chartsConfig = {
  ...Charts1.chartsConfig,
  type: 'bar',
  title: 'Monthly sales',
  valuePrefix: '$',
  decimalPlaces: 2,
};
Charts1.data = [{
  id: 'sales', name: 'Sales', color: '#58b9f5',
  points: [{ label: 'January', value: 1200 }, { label: 'February', value: 1800 }],
}];
Charts1.onPointClick = (_sender, event) => {
  Message(event.detail.label + ': ' + event.detail.value);
};

Configure a chart

1. Add Charts from the palette. Double-click it or choose Configure Charts in the Inspector.
2. Choose doughnut, pie, bar, horizontal bar, line, area, radar, or polar-area presentation.
3. Set the title, subtitle, legend, grid, labels, stacking, and value formatting.
4. In Appearance → Fonts & colors, choose the general/legend fonts, colors, and optional Lucide title icon.
5. Configure up to five series. Each has its own name, color, API Client, endpoint, response list, label field, and numeric value field.
6. Click Save chart to persist the configuration. Cancel or Escape discards the draft.

Prepare the endpoint's response schema in API Client first. List and field selectors follow that schema. Paths use JSON Pointer, such as /data for the list and /name or /total for fields relative to one item.

Load and inspect data

Execute the configured API operation from a page event. Charts observes that response and subsequent successful executions; each series may use a different client or endpoint. It also reads a successful response already available when the binding is attached.

Use data for transient series supplied by code, or chartsConfig for presentation. clear() removes displayed points; an active API binding can populate them again on its next successful response. Runtime assignments do not change the saved project.

Invalid or missing numeric measurements are omitted. Circular charts exclude negative measurements from the drawing and keep them in the data table. Cartesian charts support negative values. Empty responses display the configured empty message.

Point interaction

Link OnPointClick in Interaction. event.detail contains label, value, seriesId, seriesName, and index. The same activation supports mouse, touch, Enter, and Space. selectedLabel, selectedValue, and selectedSeriesId expose the last selection.

The Designer and editor use an identified sample. Preview and exports show actual data or the empty state. The chart and accessible data table resize with the component.

More examples

// Configure a series bound to ApiClient1 in the chart editor first.
const series = Charts1.chartsConfig.series[0];
if (!series) throw new Error('Configure a chart series first.');
const operation = ApiClient1.operations.find(item => item.id === series.operationId);
if (!operation) throw new Error('Configure the series API operation first.');
const unsubscribe = Charts1.bindApiClient(ApiClient1, operation.id, series.id);
try {
  await ApiClient1.execute(operation.name);
} finally {
  unsubscribe(); // This example observes one execution.
}
// Designer-configured series are bound and released automatically.

Inspector properties

Component options and defaults. Fields without runtime access are configured in the Inspector.

API in code

clear(): void;

Charts1.clear();

bindApiClient(apiClient: WebApiClient, operationId: string, seriesId: string): () => void;

const series = Charts1.chartsConfig.series[0];
if (!series) throw new Error('Configure a series bound to ApiClient1 first.');
const unsubscribe = Charts1.bindApiClient(ApiClient1, series.operationId, series.id);
// Release a handwritten binding when it is no longer needed.
unsubscribe();

dispose(): void;

// Call only when disposing of an instance whose lifecycle you control.
Charts1.dispose();

focus(options?: FocusOptions): void;

show(): void;

hide(): void;

bindEvent(eventName: string, handler: WebComponentEventHandler<this> | null): () => void;

emit(eventName: string, detail?: unknown): boolean;

Events

Link methods in Interaction. How to use events.

import type { WebCharts, WebChartPointEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Charts1PointClick(
    sender: WebCharts,
    event: CustomEvent<WebChartPointEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { label, value, seriesId, seriesName, index } = event.detail;
    console.log(label, value, seriesId, seriesName, index);
  }
}

import type { WebCharts } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Charts1Click(
    sender: WebCharts,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}

import type { WebCharts } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Charts1MouseEnter(
    sender: WebCharts,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}

import type { WebCharts } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Charts1MouseLeave(
    sender: WebCharts,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}