Chart

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

stable · light DOM · 4.0.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

Markup

<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@4.0.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@4.0.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

Specimen density

Specimen profile

Chart `chart`

Family: Information display
Maturity: stable
Priority: R2
Since: 1.0.0
Native control: Native figure, accessible SVG and table
specified
demonstrated

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

Report an issue with this component

Tokens

Focus a role to inspect its values; follow its link for persistent usage and source details.

Part	Role	Value	Use
`root.bg`	`color.surface.default`approveduse	`#0d0707`	D-041 surface.default: color.primitive.modern.panel.
`root.text`	`color.text.default`approveduse	`#e99499`	D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills.
`root.border`	`color.border.control`approveduse	`#c81a1a`	D-041 owner correction: red control and floating-frame borders, distinct from rose text.
`heading.text`	`color.text.bright`approveduse	`#ffa2a7`	D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills.
`secondary.text`	`color.text.muted`approveduse	`#d4868b`	D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills.
`control.bg`	`color.surface.input`approveduse	`#000000`	Form-control fill.
`control.focus`	`color.interaction.focus.ring`observeduse	`#e53935`	1px dashed focus ring on controls and rows.
`dependency.role-border-width-default`	`border.width.default`observeduse	`1px`	Every border is 1px.
`dependency.role-color-chart-axis`	`color.chart.axis`observeduse	`#9e231f`	Axis lines.
`dependency.role-color-chart-grid`	`color.chart.grid`observeduse	`#2b0e0d`	Grid lines.
`dependency.role-color-chart-label`	`color.chart.label`approveduse	`#d4868b`	D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills.
`dependency.role-focus-offset`	`focus.offset`observeduse	`-2px`	outline-offset for controls.
`series.primary`	`color.chart.series-2`observeduse	`#f73f35`	Second series.
`header.text`	`color.text.bright`approveduse	`#ffa2a7`	D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills.
`row.text`	`color.text.default`approveduse	`#e99499`	D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills.
`dependency.role-radius-none`	`radius.none`observeduse	`0px`	The only radius. Nothing is rounded.
`dependency.role-space-12`	`space.12`observeduse	`12px`
`dependency.role-space-8`	`space.8`observeduse	`8px`

State matrix

Every declared state and combination, statically rendered; the default cell is live. Sizes: compact, comfortable (switch with the density control above).

State Default

default

Completed tasks by week

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

empty

loading

Purpose

One bounded numeric series, plotted beside the complete data table that carries its meaning.

Anatomy

Parts as listed in the anatomy; each SVG bar has a text label.

States

State	Visual	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

As in the key table.

Accessibility

The table stays visible without JavaScript and is never replaced by tooltips or colour-only legends. Text keeps its rose roles; only the series is red. A loading status distinguishes old data from a completed refresh. Column headers use color.text.bright; row labels and values use color.text.default, while row headers stay native th scope="row". Do not give every th the column-header colour.

Portability

Follows the shared component defaults in spec/portability.md (section “Shared component defaults”).

Non-examples

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

Contrast report

5 declared pairs measured on resolved sRGB values with the WCAG 2.x formula; 0 waived (decorative only), 0 failing. A pass is a design target for the named role, not an application-wide conformance claim.

Pair	State	Kind	Foreground	Background	Ratio	Min	Result
chart default text	default	text	`color.text.default` `#e99499`	`color.surface.default` `#0d0707`	8.72	4.5	pass
chart default border	default	ui	`color.border.control` `#c81a1a`	`color.surface.default` `#0d0707`	3.44	3	pass
Primary content	—	text	`color.text.default` `#e99499`	`color.surface.default` `#0d0707`	8.72	4.5	pass
Supporting content	—	text	`color.text.muted` `#d4868b`	`color.surface.default` `#0d0707`	7.22	4.5	pass
Control boundary	—	ui	`color.border.control` `#c81a1a`	`color.surface.default` `#0d0707`	3.44	3	pass

Keys

Key	Action
`Tab`	Visit any scrollable data region. Points do not add unnecessary tab stops.

For agents

Component JSON ·Implementation brief ·Build a task kit ·

Stress fixtures: FX-320 FX-360 FX-ZOOM-200 FX-I18N FX-RTL FX-RM FX-HC FX-TOUCH FX-DENSITY FX-STATE-MATRIX

j3w1 / theme

j3w1 / command

Chart

Live variants

default

Install and register

Copy the complete implementation

Public API

attributes

properties

methods

events

Dependencies and verification

Canonical specification

Chart `chart`

Tokens

State matrix

Purpose

Anatomy

States

Keyboard

Accessibility

Portability

Non-examples

Contrast report

Keys

For agents

Live variants

default

Install and register

Copy the complete implementation

Public API

attributes

properties

methods

events

Dependencies and verification

Canonical specification

Chart chart

Tokens

State matrix

Purpose

Anatomy

States

Keyboard

Accessibility

Portability

Non-examples

Contrast report

Keys

For agents

Chart `chart`