ChartBlock

Inline token-driven metric chart — horizontal bars or a vertical column chart with y-axis ticks and data-tone intents.

All components · Theme builder · Implementation source

Live preview

Install

Shell

netscript ui:add chart-block

Usage and examples

The preview runs this JSX with the installed components. Import any composed primitives from your UI directory.

TypeScript

import { useState } from 'preact/hooks';
import { ChartBlock } from '@app/components/ui/chart-block.tsx';

export function Example() {
  const [value, setValue] = useState('standard');
  const [open, setOpen] = useState(false);
  const [notice, report] = useState('');
  return (<><div><ChartBlock title="Orders by channel" data={[{label:"Online",value:72},{label:"Wholesale",value:28}]} /></div><p role="status">{notice}</p></>);
}

Props

Generated from native deno doc --json --private over the shipped implementation. Compound component props retain their owning interface; native attributes pass through where declared.

Owner	Prop	Type	Optional	Description
`ChartBlockProps`	`data`	`ChartDatum[]`	No
`ChartBlockProps`	`title`	`string`	Yes
`ChartBlockProps`	`sub`	`string`	Yes
`ChartBlockProps`	`unit`	`string`	Yes
`ChartBlockProps`	`variant`	`"bar" \| "column"`	Yes
`ChartBlockProps`	`valueDisplay`	`"always" \| "interactive"`	Yes	Column values can be revealed on hover or keyboard focus instead of always shown.
`ChartBlockProps`	`class`	`string`	Yes

TypeScript

type ChartTone = "primary" | "success" | "warning" | "destructive" | "secondary"
ChartBlockProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "class">

Keyboard

Presentation component; no component-specific keyboard interactions.

Tokens

Semantic contract roles: border/subtle, material/track, text/muted.

CSS custom properties referenced directly: --ns-bg, --ns-border, --ns-chart-1, --ns-chart-2, --ns-chart-3, --ns-chart-4, --ns-chart-5, --ns-destructive, --ns-ease-normal, --ns-fg, --ns-font-mono, --ns-font-sans, --ns-leading-caption, --ns-leading-strong, --ns-material-track, --ns-muted, --ns-muted-fg, --ns-primary, --ns-radius-control, --ns-radius-full, --ns-radius-sm, --ns-ring, --ns-secondary, --ns-secondary-text, --ns-space-1, --ns-space-2, --ns-space-4, --ns-space-9, --ns-success, --ns-text-2xs, --ns-text-3xs, --ns-text-caption, --ns-text-sm, --ns-text-strong, --ns-text-xs, --ns-tracking-caption, --ns-tracking-strong, --ns-warning, --ns-weight-caption, --ns-weight-strong.

Contract and compatibility

Accessibility pattern: noninteractive presentation

Native DOM attributes pass through where the implementation accepts them.
data-series is emitted only for automatic palette entries; explicit tone keeps semantic intent.

Design contract values marked planned are not implementation props. The props above describe what ships today.