FacetViz

FacetViz is a modular, dependency-free TypeScript and SVG visualization library with a declarative configuration API.

Documentation · Feature guide · Examples · Playground

Visit the documentation website for supported charts, configuration options, themes, examples, and guides.

Installation

npm install facetviz

Quick start

import { FacetViz } from 'facetviz';

new FacetViz('#chart', {
  chart: { type: 'column' },
  title: { text: 'Fruit consumption' },
  xAxis: { categories: ['Apples', 'Pears', 'Bananas'] },
  series: [
    { name: 'Jane', data: [1, 5, 3] },
    { name: 'John', data: [4, 2, 6] },
  ],
});

Metric cards

FacetCard renders a dashboard measure with optional change analysis and any FacetViz chart. When previousValue is supplied, the difference and percentage change are derived automatically.

import { FacetCard } from 'facetviz';

new FacetCard('#revenue-card', {
  title: { text: 'Revenue', subtitle: 'Current month' },
  value: 1284000,
  format: '$,.1s',
  comparison: {
    previousValue: 1150000,
    display: 'both',
    label: 'vs last month',
  },
  chart: {
    chart: { type: 'sparkline' },
    series: [{ data: [82, 91, 88, 105, 116, 128] }],
  },
});

Use favorableDirection: 'decrease' for measures such as response time or defect count. Set layout: 'horizontal' to place the chart beside the measure. First-class analytical blocks include progress, breakdown, split comparison, radial goal, status, range, forecast, min/max context, and operational summary rows.

Development

npm install
npm run build
npm test
npm run dev

License

MIT