Skip to content
Pinky UI

data

Chart ↔ Table View

One dataset moves between an inspectable chart and a semantic table without losing selection context.

  • data
  • chart
  • table
  • accessibility
  • fallback

Live preview

Same data, two readings

Sun · 26k

Weekly usageThe same weekly usage data is available as a chart and a table.

The table is the same data source, not a hidden accessibility-only duplicate.

Quick usage

usage
import { ChartTableView } from "@pinky-ui/systems";

<ChartTableView data={points} label="Weekly usage" />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
dataVizPoint[]—The single ordered dataset shared by chart and table views.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Table mode uses real caption, headers, row headers and keyboard-selectable rows.
  • Chart and table preserve the same selected point; mobile users get the table as a first-class reading mode.

Performance

  • Chart and table share data and mount only the selected view; no duplicate chart state is required.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Product metrics where visual pattern and exact row reading both matter

When not to use

  • Decorative charts with no underlying inspectable values

Skill

Purpose

One dataset moves between an inspectable chart and a semantic table without losing selection context — the same row stays selected across both modes.

Good for

  • Product metrics where visual pattern and exact row reading both matter

Avoid for

  • Decorative charts with no underlying inspectable values

Usage

tsx
<ChartTableView data={points} label="Weekly usage" />

Accessibility

  • Table mode uses real caption, headers, row headers and keyboard-selectable rows.
  • Chart and table preserve the same selected point; mobile users get the table as a first-class reading mode, not a fallback.

Performance

  • Chart and table share data and mount only the selected view; no duplicate chart state is required.

Related: interactive-line-chart, data-lens.

Open this skill on its own page