Turn data into clear, interactive stories.

FacetViz accepts simple number arrays, [x, y] pairs, or descriptive object rows. Start simple, then add fields as your visualization needs them.

Installation

Add the package and import the FacetViz class:

npm install facetviz

import { FacetViz } from 'facetviz';

new FacetViz('#container', {
  chart: { type: 'column' },
  title: { text: 'Hello FacetViz' },
  xAxis: { categories: ['A', 'B', 'C'] },
  series: [{ name: 'Demo', data: [3, 6, 4] }],
});

Or drop the pre-built ESM bundle into a page (no build step):

<script type="module">
  import { FacetViz } from './lib/facetviz.js';
  new FacetViz(document.getElementById('chart'), { /* options */ });
</script>

Tutorial

Build a chart step by step. Every example is live — the chart you see is rendered by the code shown.

1. A minimal chart

Pass a container and a series array. Numbers in data map to the category (or index) on the x-axis.

2. Titles, axes and multiple series

Series without stacking are drawn side-by-side (grouped). Give each axis a title.

3. Stack, and switch the chart type

Set stacking: 'normal' (or 'percent') and change chart.type — the same data works across types.

4. Tooltips, labels and events

Enable a shared tooltip, add formatted data labels, and wire a click handler.

Core concepts

An options object has a handful of top-level keys:

• chart — type, size, background, inversion, theme, animation, zoom, boost, events.
• series[] — one entry per data series; each may override type for combo charts.
• xAxis / yAxis — categories or value scales, titles, grid, plot lines/bands, rotation, opposite side, datetime, and nested dimensions.
• tooltip — hover content (per-point or shared), with token format strings.
• legend — placement (top / bottom / left / right) and layout.
• plotOptions — defaults applied to all series or per type.
• trellis — split into a grid of small multiples by data dimensions.

Continue with the feature guide to learn these capabilities by example, or use the full API reference for every key and value.

Chart types

Set chart.type or a per-series type. Each links to a live example that uses it.

Formatting

Data labels, tooltips and axis labels share one token engine — a token is {path} or {path:spec}.

yAxis:  { labels: { format: '${value:,.0f}' } },            // $1,000,000
series: [{
  dataLabels: { enabled: true, format: '{y:$,.1s} ({percentage:.0f}%)' },   // $1.3M (15%)
  tooltip:    { format: '<b>{name}</b><br/>{y:$,.0f} — {percentage:.1f}%' },
}]

Number specs [prefix][,][.decimals][type][suffix] — types: f fixed · % percent · s SI (k/M/B) · e exponential · d integer. Dates: {x:%Y-%m-%d}. Full details in the API reference.