J3W1 / DESIGN SYSTEM

Chart

A one-series numeric chart with an always-visible complete data table.

stable · LIGHT DOM · 1.1.0

Light DOM retains static content, native semantics, label relationships and host composition without duplicating controls.

Standalone example ↗Copy file manifest Canonical JSON Vue gallery ↗Prepare an agent kit →

Live variants

default

Completed tasks by week

Completed tasks
Week	Tasks
Week 1	24
Week 2	36
Week 3	48

<j3w1-chart id="example-chart-default"><figure class="chart"><figcaption>Completed tasks by week</figcaption><svg viewBox="0 0 300 120" role="img" aria-label="Week 1: 24; Week 2: 36; Week 3: 48"><g class="chart-series"><rect x="20" y="62" width="50" height="48"></rect><rect x="120" y="38" width="50" height="72"></rect><rect x="220" y="14" width="50" height="96"></rect></g></svg><table><caption>Completed tasks</caption><thead><tr><th scope="col">Week</th><th scope="col">Tasks</th></tr></thead><tbody><tr><th scope="row">Week 1</th><td>24</td></tr><tr><th scope="row">Week 2</th><td>36</td></tr><tr><th scope="row">Week 3</th><td>48</td></tr></tbody></table><p data-chart-empty="" hidden="">No data available.</p></figure></j3w1-chart>

Install and register

Use the exact version. If npm publication is pending, install the release tarball from the installation guide.

npm install --save-exact @j3w1/ui@1.1.0

import '@j3w1/ui/tokens.css';
import '@j3w1/ui/styles/chart.css';
import '@j3w1/ui/register/chart';

Insert the maintained markup above after loading these imports. Its native children provide accessible names and form behavior; the empty custom tag alone does not create a control.

Vue SFC, React, Astro and plain HTML integration →

Copy the complete implementation

npx --package=@j3w1/ui@1.1.0 j3w1-ui copy chart --out ./vendor/j3w1/chart

The CLI verifies every file before writing and refuses overwrites. Serve the output over HTTP and open index.html. Keep its modules, CSS, tokens and licence notices together.

Public API

attributes

Name	Type / signature	Meaning
`disabled`	`CustomEvent`	Disable the native controls owned by this instance.
`loading`	`CustomEvent`	Mark the primary control busy and prevent duplicate activation.

properties

Name	Type / signature	Meaning
`disabled`	`boolean`	Delegates disabled state to native children.
`name`	`string`	Native control name; application form keys remain explicit.
`data`	`Array<{ label: string; value: number }>`	Finite non-negative one-series data; at most 200 rows.

methods

Name	Type / signature	Meaning
`refresh`	`(): void`	Reconnect behavior after replacing native child structure.
`focus`	`(options?: FocusOptions): void`	Focus the first usable native control.

events

Name	Type / signature	Meaning

Dependencies and verification

Registered components: none. Style dependencies: none.

Package presence establishes an available implementation. Actual passes depend on the tested artifact and environment. Read specification execution evidence; read packed-consumer evidence; inspect the complete state matrix.

Full implementation manifest, API and token dependency closure

Canonical specification

Purpose

Show one bounded numeric series with its complete textual data table. Labels and exact values carry the meaning without color. The API accepts finite non-negative values; it rejects invalid data rather than silently inventing missing numbers.

Anatomy

figure: Caption identifies the measure and units.
plot: Responsive SVG with an accessible name.
table: Always-visible labels and exact values.
empty: Explicit message when the supplied series is empty.

States

State	Presentation	Non-colour channel
default	Red primary series (`color.chart.series-2`), with canonical axis and label roles.	Complete labelled data table.
empty	Plot and rows are absent.	Explicit No data available text.
loading	Existing data remains readable under a busy indicator.	aria-busy with named loading text from the host.

Keyboard

Tab: Visit any scrollable data region. Points do not add unnecessary tab stops.

Accessibility

Keep the table visible without JavaScript. Do not replace it with tooltips or color-only legends. The single series uses the approved red chart role color.chart.series-2, as requested by the owner for graphs; foreground typography retains its rose roles. Each SVG bar has a text label. A loading status must distinguish old data from a completed refresh.

Column headers use color.text.bright; body row labels and numeric values use color.text.default. Row-header semantics remain native th scope="row" even though their typography matches body values. Do not apply the column-header color to every th indiscriminately.

Portability

Wrap labels and actions without changing source order. Use logical spacing in RTL. Preserve native target sizes at both densities; only bounded data regions may scroll horizontally. Use equivalent native semantics and approved roles; record any unsupported behavior as a mapping deviation. The host owns application data, persistence, permissions and services.

Non-examples

Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.