# ganapativs/microcharts [Health: Active]

**Category:** 📊 Data Visualization  
**Repository:** https://github.com/ganapativs/microcharts/tree/main/packages/mcp  
**GitHub Stars:** 206  
**npm Downloads (last month):** 355  
**Views:** 6  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/ganapativs-microcharts

## Description
Word-sized charts (sparklines, bars, bullets — 106 types) rendered to self-contained SVG with generated alt text. Three tools: find the right chart for a question, get its wiring, render it. Works in chat surfaces that can't run React. Install via npx -y @microcharts/mcp.

## Tools
Capabilities this server exposes over MCP:

- **find_microchart** — Rank microcharts chart types against a plain-language question about data ("is it trending?", "error budget", "part to whole"). Returns candidates with the reason each matched. Start here when you know the question, not the chart.
- **get_microchart** — Full wiring detail for one chart by slug: import paths, its props plus the shared props, data shape, best/avoid guidance, a copy-runnable example, and `sample` — the example as JSON props you can pass straight to render_microchart.
- **render_microchart** — Render a chart to a finished, self-contained SVG (styles embedded) plus its generated alt text — for surfaces that can't run React. Pass the series as `data`; put other props (value, target, curve, color, width) in `props`. Each chart takes its own data shape — get_microchart returns a valid `sample` to adapt.

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

```json
"mcpServers": {
  "microcharts": {
    "command": "npx",
    "args": ["-y","@microcharts/mcp"]
  }
}
```

## Documentation

## What ganapativs/microcharts does

ganapativs/microcharts connects an MCP client to the microcharts library and exposes a workflow for choosing and producing compact charts. The catalog contains 106 word-sized chart types, including sparklines, bars, bullets, dot plots, and OHLC charts. The server renders the selected chart to SVG and includes generated descriptive text through the result's summary field.

Its local design keeps execution on the user's machine. The package runs as a stdio server distributed through npm; it does not require an account or API key, and chart data is not sent to a hosted service. Because the rendered SVG includes its styles by default, the result can be placed into a chat or other surface without a React runtime.

## How it works

The three main tools support a staged workflow:

- `find_microchart(question, dataShape?)` ranks chart types against a plain-language question and optionally considers the shape of the available data.
- `get_microchart(slug)` returns the selected chart's import path, chart-specific and shared props, expected data shape, usage guidance, runnable example, and JSON `sample` props.
- `render_microchart(type, data?, props?, format?)` turns the chart type, series data, and additional properties into a finished SVG.

Chart inputs are deliberately type-aware. A sparkline can take a `number[]`, while a dot plot expects objects shaped like `{ label, value }`; an OHLC chart expects `{ open, high, low, close }` records. Chart-specific values such as `value` and `target`, along with shared settings such as `curve`, `color`, and `width`, belong in `props`.

Rendering returns the SVG, a generated summary, the `image/svg+xml` MIME type, and dimensions. The default `svg` format embeds styles. The optional `bare` format omits CSS for pages that already load `@microcharts/react/styles.css`.

## Setup and configuration

Install the server in an MCP client with the npm package command:

```json
{
  "mcpServers": {
    "microcharts": {
      "command": "npx",
      "args": ["-y", "@microcharts/mcp"]
    }
  }
}
```

Claude Desktop uses `claude_desktop_config.json`, while Cursor uses `.cursor/mcp.json`. The client starts the process over stdio when needed. The same capabilities are also available as Vercel AI SDK tools from `@microcharts/mcp/ai-sdk`; the package exports `microchartsTools` and the underlying `findChart`, `getChart`, and `renderChart` functions.

## Tools and capabilities

Two MCP resources complement the tools: `microcharts://catalog` provides chart metadata, and `microcharts://agent-setup` provides a prompt for integrating microcharts into a codebase. The catalog resource also identifies the library version associated with the bundled snapshot.

The package includes its compatible `@microcharts/react` dependency and maintains its own package version as the server changes. `get_microchart` is useful for agents that need an exact import and a render-ready sample before producing a chart.

## Limitations and notes

The server rejects missing or incorrectly shaped data before passing it to React, returning an error that names the chart and expected data shape. Oversized payloads are also refused because the output is intended to remain a compact, word-sized chart. Rendering is focused on SVG output; the `bare` option assumes the consuming page is responsible for loading the chart stylesheet.

_Full upstream README: https://allmcps.com/mcp/ganapativs-microcharts/readme_