linewisp

Facet Charts / developer preview

Charts that keep
the numbers close.

Facet Charts turn small and medium browser datasets into readable bar and line views without treating the visual as a replacement for the underlying values.

Preview statusFacet Charts currently provides bar and line visuals. The package namespace is @linewisp/wisp-charts; it is private and not published to npm yet.

Getting started

Register the custom element and configure a label, chart type, and an array of uniquely identified non-negative points. A visual selection is always backed by an exact text value.

import { defineWispChart } from '@linewisp/wisp-charts';

defineWispChart();
document.querySelector('wisp-chart').configure({
  label: 'Projects completed',
  type: 'bar',
  points: [
    { id: 'jan', label: 'January', value: 18 },
    { id: 'feb', label: 'February', value: 31 },
  ],
  valueLabel: value => `${value} projects`,
});

Current views

Two useful shapes

Start with the familiar shapes that suit simple comparisons and trends. More chart types should only arrive with matching accessibility and documentation.

BarFor direct comparison across a small number of categories. Each bar is a keyboard-operable button.
LineFor an ordered sequence. A visual SVG path is paired with a keyboard-operable point list.
Exact dataBoth views include a screen-reader data table and announce the current selected point.

Configuration API

OptionTypePurpose
labelrequired stringNames the chart group and data table.
type'bar' | 'line'Chooses the current accessible visual treatment.
pointsrequired arrayOne to 200 unique IDs with readable labels and finite, non-negative values.
descriptionstringAdds concise context beneath the title.
valueLabelfunctionFormats exact values for labels, announcements, and the data table. Unsafe callback output falls back to a number format.
theme, densityshared valuesApplies shared visual tokens and spacing density.

Methods and events

Selection state

  • selectedPointId exposes the current selection
  • selectPoint(id) selects a known ID
  • selectPoint(null) deliberately clears selection

Events

  • wisp-chart-select fires on selection and clearing
  • detail.point is the selected point or null when cleared
  • Use the event to coordinate details outside the chart.

Framework use

Facet Charts uses the same browser component in every environment. Typed React, Vue, and Angular adapters configure the chart, forward its selection detail, and expose the native element when you need selectPoint().

01JavaScriptDirect Web Component API02ReactTyped component and ref03VueReactive configuration and event04AngularStandalone component and output

JavaScript

import { defineWispChart } from '@linewisp/wisp-charts';

defineWispChart();
document.querySelector('wisp-chart').configure(chartConfiguration);

React

import { WispChart } from '@linewisp/wisp-charts-react';

<WispChart configuration={chartConfiguration}
  onChartSelect={({ point }) => inspect(point)} />

Vue

import { WispChart } from '@linewisp/wisp-charts-vue';

<WispChart :configuration="chartConfiguration" @chart-select="inspect" />

Angular

import { WispChartComponent } from '@linewisp/wisp-charts-angular';

<linewisp-chart [configuration]="chartConfiguration"
  (chartSelect)="inspect($event)" />

Accessibility and safety

Bar marks and line labels are buttons with an exact accessible name. Charts announce selection through a polite live region and include a visually hidden data table so the trend never obscures the data. Labels and values are inserted as text, not chart markup, and malformed configuration is rejected before rendering.

Open the live Charts demo ↗

Current boundary

Facet Charts is deliberately limited to accessible browser-side bar and line charts today. It does not claim dashboarding, streaming sources, server rendering, or the full chart catalogue found in older commercial suites. Future additions will be documented as a new vertical slice with live examples and tests.