\n\n\n![\"Bar](\"./examples/bar.png\")
\nBar Chart
\nPerfect for comparisons\n | \n\n![\"Line](\"./examples/line.png\")
\nLine Chart
\nGreat for trends\n | \n\n![\"Pie](\"./examples/pie.png\")
\nPie Chart
\nShow proportions\n | \n
\n\n\n![\"Doughnut](\"./examples/doughnut.png\")
\nDoughnut Chart
\nModern proportions\n | \n\n![\"Radar](\"./examples/radar.png\")
\nRadar Chart
\nMulti-dimensional data\n | \n\n![\"Scatter](\"./examples/scatter.png\")
\nScatter Chart
\nCorrelation analysis\n | \n
\n\n\n![\"Bubble](\"./examples/bubble.png\")
\nBubble Chart
\n3D relationships\n | \n\n![\"Polar](\"./examples/polarArea.png\")
\nPolar Area Chart
\nRadial visualizations\n | \n\nAnd more chart types
coming soon!\n | \n
\n
\n\n---\n\n## π For Users - Quick Setup\n\n### System Requirements\n\n- **Node.js 18+** - Required for running the MCP server\n\n### Using with Claude Desktop\n\nThe simplest way to use this MCP server:\n\n1. **Configure Claude Desktop**\n \n Add this to your Claude Desktop configuration file:\n \n **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`\n **Windows**: `%APPDATA%/Claude/claude_desktop_config.json`\n \n ```json\n {\n \"mcpServers\": {\n \"chartjs\": {\n \"command\": \"npx\",\n \"args\": [\"@ax-crew/chartjs-mcp-server\"]\n }\n }\n }\n ```\n\n2. **Restart Claude Desktop**\n\n3. **Start Creating Charts!**\n \n Try asking Claude:\n ```\n \"Create a bar chart showing sales data: Q1: $50k, Q2: $75k, Q3: $60k, Q4: $90k\"\n ```\n\n### Using with Cursor\n\nAdd to your Cursor settings or workspace configuration:\n```json\n{\n \"mcpServers\": {\n \"chartjs\": {\n \"command\": \"npx\",\n \"args\": [\"@ax-crew/chartjs-mcp-server\"]\n }\n }\n}\n```\n\n### Alternative: Install from Source\n\nIf you prefer to install from source or want to contribute:\n\n1. **Clone and Build**\n ```bash\n git clone https://github.com/ax-crew/chartjs-mcp-server.git\n cd chartjs-mcp-server\n npm install && npm run build\n ```\n\n2. **Configure with Local Path**\n \n ```json\n {\n \"mcpServers\": {\n \"chartjs\": {\n \"command\": \"node\",\n \"args\": [\"/full/path/to/chartjs-mcp-server/dist/index.js\"]\n }\n }\n }\n ```\n\n---\n\n## π How to Use\n\n### Basic Usage\n\nOnce configured, you can ask your AI assistant to create charts using natural language:\n\n- *\"Create a pie chart of my budget: Housing 40%, Food 25%, Transport 15%, Entertainment 20%\"*\n- *\"Make a line chart showing website visitors over 6 months: Jan 1000, Feb 1200, Mar 1500, Apr 1300, May 1800, Jun 2100\"*\n- *\"Generate a bar chart comparing programming languages: JavaScript 65%, Python 45%, Java 35%, Go 25%\"*\n\n### Output Formats\n\nYou can specify the output format when creating charts:\n\n**PNG Images (Default)**\n```\n\"Create a bar chart as a PNG image showing sales data...\"\n```\n- High-quality static images (800x600px)\n- Perfect for documents, presentations, and sharing\n- Works everywhere\n\n**Interactive HTML**\n```\n\"Create an interactive HTML doughnut chart showing project status...\"\n```\n- Self-contained HTML divs with embedded Chart.js\n- Hover tooltips and animations\n- Perfect for web applications and frontends\n- Just inject the HTML into any webpage\n\n**JSON Config** (New in 3.2.0)\n```\n\"Create a bar chart as JSON showing quarterly revenue...\"\n```\n- Returns the raw Chart.js configuration object as JSON\n- Ideal for client-side rendering in React/Next.js apps\n- Works with AI chat UIs like [assistant-ui](https://github.com/assistant-ui/assistant-ui) via `makeAssistantToolUI`\n- See [`examples/assistant-ui-integration.example.tsx`](./examples/assistant-ui-integration.example.tsx) for a full example\n\n**Example Interactive HTML Usage:**\n```javascript\n// The AI returns HTML like this:\nconst chartHtml = `...
`;\n\n// You can inject it anywhere:\ndocument.getElementById('dashboard').innerHTML = chartHtml;\n\n// Works with any framework\n// React: