flint-chart

flint-chart

A semantic-level visualization library that compiles data + semantic types into chart specifications for Vega-Lite, ECharts, and Chart.js.

You (or an LLM) describe a chart at the semantic level: chart type, field assignments, and a semantic type per field (e.g. Revenue, Rank, CategoryCode). A deterministic compiler derives the low-level parameters (sizing, zero-baseline, number formatting, color schemes, mark templates) so charts look good and stay editable without another model call.

Pure TypeScript. No UI framework dependencies. Data in, spec out.

Install

npm install flint-chart

Quick start

import { assembleVegaLite, type ChartAssemblyInput } from 'flint-chart';

const input: ChartAssemblyInput = {
  data: {
    values: [
      { region: 'North', revenue: 120 },
      { region: 'South', revenue: 90 },
      { region: 'East', revenue: 150 },
    ],
  },
  semantic_types: { region: 'Category', revenue: 'Quantity' },
  chart_spec: {
    chartType: 'Bar Chart',
    encodings: { x: { field: 'region' }, y: { field: 'revenue' } },
  },
};

const vegaLiteSpec = assembleVegaLite(input);

The same ChartAssemblyInput compiles to any backend:

import { assembleVegaLite, assembleECharts, assembleChartjs } from 'flint-chart';

const vl = assembleVegaLite(input);   // Vega-Lite spec
const ec = assembleECharts(input);    // ECharts option
const cj = assembleChartjs(input);    // Chart.js config

Subpath exports

Both ESM (import) and CommonJS (require) builds are published, with type declarations for every entry point.

Rendering

This package produces specs, not pixels. To render those specs to PNG or SVG without a browser, use the companion flint-chart-mcp server (or pass the spec to your own Vega-Lite / ECharts / Chart.js renderer).

Documentation

• Project overview & docs
• Semantic-type model & rationale
• Stretch / banking layout model
• Agent authoring skill

License

MIT Microsoft Corporation