Flint's authoring surface is a compact chart request: rows, field semantics, chart type, channel encodings, and sizing intent. unstable_fromFlintChart treats that request as an inbound ecosystem format and compiles it to a SemioticChartConfig. Flint keeps doing what it is good at: agent-legible semantic chart authoring. Semiotic adds React rendering, accessibility, descriptions, annotations, SSR, diagnostics, and IDID metadata around the resulting chart.
Live Adapter
Choose a preset or edit the Flint request directly. The adapter runs in the browser and returns an inspectable Semiotic config plus warnings when a Flint feature is preserved but not rendered by this spike.
A compact Flint request becomes a Semiotic StackedBarChart, with size, labels, field semantics, and warnings preserved around the config.
Flint ChartAssemblyInput
Rendered Semiotic Chart
Generated Config
ChartConfig
JSON
{ "component": "StackedBarChart", "props": { "width": 560, "height": 320, "title": "Sales mix by region", "data": "6 rows", "categoryAccessor": "region", "valueAccessor": "value", "categoryLabel": "Region", "valueLabel": "Sales", "roundedTop": 3, "normalize": true, "colorScheme": "category10", "stackBy": "segment", "colorBy": "segment", "showLegend": true }, "flint": { "chartType": "Stacked Bar Chart", "semanticTypes": { "sales": "Currency", "region": "Region", "month": "YearMonth" }, "fieldDisplayNames": { "region": "Region", "sales": "Sales" }, "chartProperties": { "stackMode": "normalize", "cornerRadius": 3, "title": "Sales mix by region" }, "baseSize": { "width": 560, "height": 320 }, "canvasSize": { "width": 760, "height": 440 } } }
JSX
JSX
<StackedBarChart width={560} height={320} title="Sales mix by region" data={[ { "region": "North", "segment": "Consumer", "value": 10 }, { "region": "North", "segment": "Business", "value": 15 }, { "region": "South", "segment": "Consumer", "value": 12 }, { "region": "South", "segment": "Business", "value": 18 }, { "region": "West", "segment": "Consumer", "value": 9 }, { "region": "West", "segment": "Business", "value": 21 } ]} categoryAccessor="region" valueAccessor="value" categoryLabel="Region" valueLabel="Sales" roundedTop={3} normalize colorScheme="category10" stackBy="segment" colorBy="segment" showLegend />
What Semiotic Adds
A stacked bar chart of value by region, split by segment. value ranges from 9 (West) to 21 (West), with a mean of 14.17 across 6 points.
The same config can flow through Semiotic's accessibility audit, keyboard navigation, annotations, serialization, SSR rendering, and agent repair tools.
Usage
TS
import { unstable_fromFlintChart } from "semiotic/experimental" const config = unstable_fromFlintChart({ data: { values: rows }, semantic_types: { month: "YearMonth", sales: "Currency" }, chart_spec: { chartType: "Line Chart", encodings: { x: "month", y: "sales", color: "segment" }, baseSize: { width: 560, height: 300 }, canvasSize: { width: 760, height: 420 }, }, }) // config.component === "LineChart" // config.props is ready for rendering or configToJSX(config)
Current Scope
This is intentionally staged behind unstable_. The spike covers bar, grouped bar, stacked bar, line, area, scatter and bubble charts, heatmap, pie and donut charts, histogram, and boxplot. It preserves Flint URLs, field semantics, chart properties, sizing, and unmapped encodings under config.flint so hosts can inspect what did not render. It does not fetch data URLs, compile Flint to Vega-Lite/ECharts/Chart.js, or render Flint facets as small multiples.