Flint chart artifacts

Pinter chat renders flint_chart artifacts with flint-chart@0.4.1 and ECharts. The artifact content is a JSON-stringified ChartAssemblyInput:

{
  "type": "flint_chart",
  "title": "Sales by month",
  "content": "{\"data\":{\"values\":[...]},\"semantic_types\":{...},\"chart_spec\":{...}}"
}

content must contain data.values, semantic_types, and chart_spec. Each field referenced by encodings must exist in the data and have a semantic type. Use the canonical channels below for new artifacts.

Required shape

{
  "data": { "values": [{ "month": "Jan", "sales": 120 }] },
  "semantic_types": { "month": "Category", "sales": "Amount" },
  "chart_spec": {
    "chartType": "Bar Chart",
    "encodings": {
      "x": { "field": "month" },
      "y": { "field": "sales" }
    }
  }
}

Chart types and channels

Chart type	Required channels	Optional channels
`Scatter Plot`	`x`, `y`	`color`, `size`, `opacity`, `column`, `row`
`Regression`	`x`, `y`	`size`, `color`, `column`, `row`
`Connected Scatter Plot`	`x`, `y`	`order`, `color`, `detail`, `column`, `row`
`Ranged Dot Plot`	`x`, `y`	`color`
`Boxplot`	`x`, `y`	`color`, `opacity`, `column`, `row`
`Strip Plot`	`x`, `y`	`color`, `size`, `column`, `row`
`Bar Chart`	`x`, `y`	`color`, `opacity`, `column`, `row`
`Grouped Bar Chart`	`x`, `y`, `group`	`color`, `column`, `row`
`Stacked Bar Chart`	`x`, `y`, `color`	`column`, `row`
`Lollipop Chart`	`x`, `y`	`color`, `column`, `row`
`Pyramid Chart`	`x`, `y`	`color`
`Heatmap`	`x`, `y`, `color`	`column`, `row`
`Calendar Heatmap`	`x`, `color`	—
`Line Chart`	`x`, `y`	`color`, `opacity`, `column`, `row`
`Bump Chart`	`x`, `y`	`color`, `detail`, `column`, `row`
`Slope Chart`	`x`, `y`	`color`, `detail`, `column`, `row`
`Area Chart`	`x`, `y`	`color`, `opacity`, `column`, `row`
`Streamgraph`	`x`, `y`, `color`	`column`, `row`
`Range Area Chart`	`x`, `y`, `y2`	`color`, `column`, `row`
`Pie Chart`	`size`, `color`	`column`, `row`
`Funnel Chart`	`y`, `size`	—
`Treemap`	`color`	`size`, `detail`
`Sunburst Chart`	`color`	`size`, `group`, `detail`
`Tree`	`color`	`detail`, `size`
`Histogram`	`x`	`color`, `column`, `row`
`Density Plot`	`x`	`color`, `column`, `row`
`ECDF Plot`	`x`	`color`, `detail`, `column`, `row`
`Parallel Coordinates`	Two or more numeric data fields	`color`, `detail`
`Candlestick Chart`	`x`, `open`, `high`, `low`, `close`	`column`, `row`
`Waterfall Chart`	`x`, `y`	`color`, `column`, `row`
`Gantt Chart`	`y`, `x`, `x2`	`color`, `detail`, `column`, `row`
`Bullet Chart`	`y`, `x`, `goal`	`color`, `column`, `row`
`Radar Chart`	`x`, `y`	`color`, `column`, `row`
`Rose Chart`	`x`, `y`	`color`, `column`, `row`
`Gauge Chart`	`size`	`column`
`Sankey Diagram`	`x`, `y`, `size`	—
`Network Graph`	`x`, `y`, `size`	—

Flow, hierarchy, and polar charts

These charts are the most sensitive to channel selection:

Chart type	Canonical mapping
`Funnel Chart`	`y` = stage, `size` = count/value. Do not use `color` for the stage.
`Sankey Diagram`	`x` = source, `y` = target, `size` = flow value.
`Network Graph`	`x` = source node, `y` = target node, `size` = link weight.
`Rose Chart`	`x` = category, `y` = value. `color` is only for a separate series grouping.
`Radar Chart`	`x` = dimension, `y` = value. `color` is only for a separate series grouping.
`Treemap`	`color` = category, `size` = value, `detail` = child category.
`Sunburst Chart`	`color` = outer category, `group` = middle level, `detail` = leaf, `size` = value.
`Tree`	`color` = parent/category, `detail` = child, `size` = value.
`Gauge Chart`	`size` = value; `column` optionally creates one gauge per category.

Example: Sankey diagram

{
  "data": {
    "values": [
      { "source": "Pabrik A", "target": "Gudang", "value": 500 },
      { "source": "Gudang", "target": "Toko", "value": 500 }
    ]
  },
  "semantic_types": {
    "source": "Category",
    "target": "Category",
    "value": "Amount"
  },
  "chart_spec": {
    "chartType": "Sankey Diagram",
    "encodings": {
      "x": { "field": "source" },
      "y": { "field": "target" },
      "size": { "field": "value" }
    }
  }
}

Example: Funnel chart

{
  "data": {
    "values": [
      { "stage": "Applicants", "count": 1200 },
      { "stage": "Screening", "count": 400 },
      { "stage": "Hired", "count": 15 }
    ]
  },
  "semantic_types": { "stage": "Category", "count": "Count" },
  "chart_spec": {
    "chartType": "Funnel Chart",
    "encodings": {
      "y": { "field": "stage" },
      "size": { "field": "count" }
    }
  }
}

Compatibility aliases

The chat renderer accepts selected legacy/descriptive channel names for existing artifacts. This is a compatibility layer; agents and integrations should use the canonical channels above.

Chart type	Accepted legacy encoding	Normalized to
`Sankey Diagram`, `Network Graph`	`source`, `target`	`x`, `y`
`Funnel Chart`	`stage`, `category`, `label`, or `color`; `value`	`y`; `size`
`Rose Chart`	`color`, `size`	`x`, `y`

Common failures

Use exact chart type names, such as Sankey Diagram and Network Graph.
An encoding channel must reference a field in data.values exactly.
Do not use ECharts option JSON as an artifact; pass the Flint input shape above.
Do not use channels; the field is encodings.
If the chart is blank, verify required channels first. Flint may omit a series when a required channel is absent.

Get started

Architecture

Core workflows

Administration

Reference

Flint chart artifacts

Required shape

Chart types and channels

Flow, hierarchy, and polar charts

Example: Sankey diagram

Example: Funnel chart

Compatibility aliases

Common failures

​Required shape

​Chart types and channels

​Flow, hierarchy, and polar charts

​Example: Sankey diagram

​Example: Funnel chart

​Compatibility aliases

​Common failures

Required shape

Chart types and channels

Flow, hierarchy, and polar charts

Example: Sankey diagram

Example: Funnel chart

Compatibility aliases

Common failures