# microsoft/flint-chart

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/microsoft-flint-chart).**

_How this analysis was created: the description and tags below were written by an AI model that read this project's README and public documentation pages; stars, license and language come straight from the GitHub API. The model does not read the source code._

4,551 stars · 269 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/microsoft/flint-chart
- Homepage: https://microsoft.github.io/flint-chart/
- awesome-repositories: https://awesome-repositories.com/repository/microsoft-flint-chart.md

## Topics

`ai-agents` `charting-library` `data-visualization` `mcp-server`

## Description

Flint Chart is a charting toolkit built around a human-editable, backend-neutral chart specification. A short spec names the chart type, the data fields, and a semantic type for each field, such as price, rank, or date. A compiler expands it into a fully formatted chart, deriving sizing, baselines, color scales, axis formatting, and sort order automatically. The same spec compiles to Vega-Lite, ECharts, Chart.js, Plotly, or native Excel output, so the rendering library can change without rewriting the spec. It is available as JavaScript and Python packages that accept the same input and produce matching output.

The toolkit also includes a Model Context Protocol server that exposes chart validation and rendering as tools, so AI agents in compatible clients can create charts in a conversation instead of writing drawing code. The server returns interactive cards, static PNG or SVG images, or backend-native specs, and reports warnings and unresolved targets before anything is drawn. For embedding, charts can be mounted in page elements or a React component. Declarative interaction presets cover highlighting, brushing, filtering, panning, zooming, and linked views, and the host application can observe selection and viewport state and apply live updates. A theming system with built-in presets and custom JSON themes keeps typography, color, and layout consistent across charts.

The chart catalog covers bar variants, part-to-whole charts, distributions, heatmaps, scatter plots with trendlines, Sankey diagrams, geographic maps, KPI cards, candlestick and waterfall charts, Gantt charts, and time trends. Charts can be edited, converted between compatible types, and recommended from the data without further model calls. The Excel backend compiles specs into versioned artifacts, native editable charts, or standalone Office.js code. The project site has a template gallery, a live spec playground, generated chart reference pages, and Chinese-language documentation.

## Tags

### User Interface & Experience

- [Declarative Charting Libraries](https://awesome-repositories.com/f/user-interface-experience/declarative-charting-libraries.md) — Defines a short, human-editable, backend-neutral chart spec of chart type, fields, and semantic types that a compiler expands into a polished chart.
- [Chart Assembly APIs](https://awesome-repositories.com/f/user-interface-experience/chart-assembly-apis.md) — Accepts chart type, encodings, data table, semantic types, and size options and returns a render-ready spec for any supported backend. ([source](https://github.com/microsoft/flint-chart/tree/main/docs))
- [Interactive Chart Cards](https://awesome-repositories.com/f/user-interface-experience/chart-components/interactive-chart-cards.md) — Renders a chart spec as a live interactive card with a customization panel, validating first and reporting problems without drawing. ([source](https://github.com/microsoft/flint-chart/blob/main/agent-skills/flint-chart-author/SKILL.md))
- [Chart Embeddings](https://awesome-repositories.com/f/user-interface-experience/chart-embeddings.md) — Mounts charts in web pages or React components, exposing selection and viewport state and emitting change events to host code. ([source](https://github.com/microsoft/flint-chart/blob/main/agent-skills/flint-interaction-author/SKILL.md))
- [Chart Theme Specifications](https://awesome-repositories.com/f/user-interface-experience/chart-theme-specifications.md) — Accepts an all-optional JSON theme covering color, typography, axes, marks, legends, labels, and layout so design systems can grow in detail. ([source](https://github.com/microsoft/flint-chart/blob/main/docs/theme-spec.md))
- [Chart Color Theming](https://awesome-repositories.com/f/user-interface-experience/color-themes/chart-color-theming.md) — Applies built-in presets or custom JSON themes so charts share consistent typography, color, and layout, including themes derived from brand guidelines.
- [Bundled Chart Themes](https://awesome-repositories.com/f/user-interface-experience/color-themes/theme-application-switching/bundled-chart-themes.md) — Offers named house-style presets such as newsroom, consulting deck, and dashboard tile selectable by stable ID for colors, type, and layout. ([source](https://github.com/microsoft/flint-chart/blob/main/docs/theme-spec.md))
- [Interaction Presets](https://awesome-repositories.com/f/user-interface-experience/interaction-presets.md) — Declares highlighting, brushing, and pan-zoom as named presets in a separate spec resolved into gesture handlers returning layered chart updates.
- [Spec-Driven Chart Mounting](https://awesome-repositories.com/f/user-interface-experience/interactive-chart-components/spec-driven-chart-mounting.md) — Renders a chart into a page element from a spec and chosen backend, attaching interaction presets so readers can act on marks. ([source](https://github.com/microsoft/flint-chart/blob/main/docs/interaction-api.md))

### Artificial Intelligence & ML

- [Model Context Protocol Servers](https://awesome-repositories.com/f/artificial-intelligence-ml/agentic-systems-frameworks/agent-capabilities-skills-tooling/agent-tooling-protocols/model-context-protocol-servers.md) — Runs a local or hosted tool server exposing chart validation and rendering to AI agents, returning interactive cards, images, or native specs.
- [AI Agent Servers](https://awesome-repositories.com/f/artificial-intelligence-ml/ai-agent-servers.md) — Runs an MCP server exposing chart validation and rendering as tools so AI agents can create charts inside conversations.
- [Charting MCP Servers](https://awesome-repositories.com/f/artificial-intelligence-ml/ai-agent-servers/charting-mcp-servers.md) — Runs a Model Context Protocol server exposing chart validation and rendering tools so AI agents create charts in conversation without writing drawing code.
- [MCP Server Implementations](https://awesome-repositories.com/f/artificial-intelligence-ml/external-tool-integrations/mcp-protocol-integrations/mcp-server-implementations.md) — Runs a Model Context Protocol server exposing chart-generation and validation tools so AI agents can produce charts from simple specs. ([source](https://github.com/microsoft/flint-chart/blob/main/package.json))
- [Chart Spec Validators](https://awesome-repositories.com/f/artificial-intelligence-ml/llm-tool-calling/tool-call-accuracy-validators/chart-spec-validators.md) — Detects incompatible chart-data pairings, redundant encodings, and missing fields before rendering, returning readable explanations agents can parse and repair. ([source](https://github.com/microsoft/flint-chart/tree/main/docs))

### Part of an Awesome List

- [Charts and Visualization](https://awesome-repositories.com/f/awesome-lists/data/charts-and-visualization.md) — Covers a broad catalog of business and statistical charts for comparing categories, trends, distributions, proportions, prices, schedules, and geography.
- [Distribution Charts](https://awesome-repositories.com/f/awesome-lists/data/charts-and-visualization/distribution-charts.md) — Shows value spread using histograms, boxplots with configurable whiskers and outliers, and ridgeline density plots. ([source](https://github.com/microsoft/flint-chart/blob/main/docs/reference-vegalite.md))

### Data & Databases

- [Field Semantic Annotations](https://awesome-repositories.com/f/data-databases/field-semantic-annotations.md) — Labels each field with a meaning such as rank, month, price, or temperature, plus domain and units, to expand a short spec into a complete chart. ([source](https://github.com/microsoft/flint-chart#readme))
- [Semantic Type-Driven Charting](https://awesome-repositories.com/f/data-databases/semantic-type-driven-charting.md) — Labels fields with semantic types like price, rank, or date so sizing, baselines, color scales, axis formats, and sort order are derived automatically.
- [Standard Chart Types](https://awesome-repositories.com/f/data-databases/data-visualization-charts/radar-chart-renderers/standard-chart-types.md) — Maps data fields to visual channels such as axes, color, size, opacity, and facets and draws a registered chart type chosen by name. ([source](https://github.com/microsoft/flint-chart/blob/main/agent-skills/flint-chart-author/SKILL.md))
- [Field Semantic Type Inference](https://awesome-repositories.com/f/data-databases/field-semantic-type-inference.md) — Uses field meanings like price, date, or rank to derive formatting, baselines, color scales, and axis direction without manual configuration.
- [Declarative Interaction Presets](https://awesome-repositories.com/f/data-databases/interactive-data-charting/chart-interaction-controls/declarative-interaction-presets.md) — Attaches ready-made behaviors like highlighting, hover inspection, brushing, and zooming to charts through a declarative list of presets, without custom handler code. ([source](https://github.com/microsoft/flint-chart/blob/main/docs/interaction-spec.md))
- [Cross-Language Chart Specs](https://awesome-repositories.com/f/data-databases/interactive-data-charting/cross-language-chart-specs.md) — Accepts the same chart assembly input in Python and JavaScript so one human-editable spec works unchanged in both. ([source](https://github.com/microsoft/flint-chart/blob/main/packages/flint-py))
- [Interactive Data Exploration Tools](https://awesome-repositories.com/f/data-databases/interactive-data-exploration-tools.md) — Offers highlighting, brushing, filtering, panning, zooming, hover inspection, and linked views so a selection in one chart updates the others.

### Graphics & Multimedia

- [Chart Generators](https://awesome-repositories.com/f/graphics-multimedia/chart-generators.md) — Compiles a small human-editable spec of chart type, fields, and semantic types into a fully formatted chart with automatic sizing, colors, and baselines. ([source](https://github.com/microsoft/flint-chart/tree/main/docs))
- [Agent Chat Chart Generation](https://awesome-repositories.com/f/graphics-multimedia/chart-generators/agent-chat-chart-generation.md) — Lets AI agents in MCP-compatible clients create interactive charts, PNG or SVG images, or backend-native specs inside a conversation. ([source](https://github.com/microsoft/flint-chart/blob/main/README.md))
- [Multi-Backend Chart Compilers](https://awesome-repositories.com/f/graphics-multimedia/multi-backend-chart-compilers.md) — Compiles one portable chart spec into native output for Vega-Lite, ECharts, Chart.js, Plotly, and Excel so the rendering library can change freely.
- [Agent Chart Previews](https://awesome-repositories.com/f/graphics-multimedia/chart-generators/agent-chart-previews.md) — Validates and renders chart specs through an MCP server so agents can preview generated charts without hand-writing chart code. ([source](https://github.com/microsoft/flint-chart/blob/main/agent-skills))
- [Excel Native Charts](https://awesome-repositories.com/f/graphics-multimedia/chart-generators/excel-native-charts.md) — Compiles chart specs into native, editable Office.js charts in Excel with data range, axis, legend, and series settings across many chart types. ([source](https://github.com/microsoft/flint-chart/blob/main/CHANGELOG.md))

### Web Development

- [Chart Spec Compilation Pipelines](https://awesome-repositories.com/f/web-development/chart-spec-compilation-pipelines.md) — Expands a minimal chart spec into a finished chart through fixed stages of semantic resolution, temporal conversion, channel budgeting, layout, and backend encoding.
- [JavaScript Charting Libraries](https://awesome-repositories.com/f/web-development/javascript-charting-libraries.md) — Provides a JavaScript, React, and Python library for embedding interactive charts in apps with highlighting, brushing, filtering, zooming, and linked-view presets. ([source](https://github.com/microsoft/flint-chart/tree/main/packages))

### Scientific & Mathematical Computing

- [Bar Chart Generation](https://awesome-repositories.com/f/scientific-mathematical-computing/bar-chart-generation.md) — Draws simple, grouped, stacked, normalized, and centered bars with rounded corners, dodging options, and value labels to compare categories. ([source](https://github.com/microsoft/flint-chart/blob/main/docs/reference-vegalite.md))
- [Compositional Charting](https://awesome-repositories.com/f/scientific-mathematical-computing/proportional-data-plots/compositional-charting.md) — Represents proportions with pie, donut, rose, or treemap charts with sorting, labeling, inner radius, and breadcrumb options. ([source](https://github.com/microsoft/flint-chart/blob/main/docs/reference-vegalite.md))
- [Python Charting Libraries](https://awesome-repositories.com/f/scientific-mathematical-computing/python-charting-libraries.md) — Provides a Python package for creating chart specs and generating visualizations from Python code and data workflows. ([source](https://github.com/microsoft/flint-chart/tree/main/packages))