{"type":"mcp_server","name":"mcp-server-chart","description":"MCP server chart: Generates visual charts (25+) using @antvis. Model context visualization.","category":"AI","language":"TypeScript","stars":4260,"forks":171,"owner":"antvis","github_url":"https://github.com/antvis/mcp-server-chart","homepage":"https://github.com/antvis/mcp-server-chart","setup":"## Setup\n\nThis section provides instructions for setting up and running the MCP Server Chart.\n\n### Prerequisites\n\n*   **Node.js and npm:** Ensure you have Node.js and npm (Node Package Manager) installed on your system.  A recent version of Node.js is recommended.\n*   **MCP Client Application:** You'll need an MCP-compatible client application like Claude, VSCode, Cline, Cherry Studio, or Cursor to interact with the server.\n\n### Installation\n\n1.  **Global Installation (for SSE or Streamable transport):**\n\n    If you intend to use the SSE or Streamable transport options, install the package globally:\n\n    ```bash\n    npm install -g @antv/mcp-server-chart\n    ```\n\n    This makes the `mcp-server-chart` command available in your terminal.\n\n2.  **Local Installation (for use with MCP client):**\n\n    The MCP Server Chart is typically invoked by an MCP client application.  No explicit local installation is required, as the client will use `npx` to run the server.\n\n### Configuration\n\nThe MCP Server Chart is configured through the `mcpServers` section of your MCP client application's configuration file. The exact location of this file depends on the client application.  The following examples demonstrate the configuration for Mac and Windows systems:\n\n**Mac:**\n\n```json\n{\n  \"mcpServers\": {\n    \"mcp-server-chart\": {\n      \"command\": \"npx\",\n      \"args\": [\n        \"-y\",\n        \"@antv/mcp-server-chart\"\n      ]\n    }\n  }\n}\n```\n\n**Windows:**\n\n```json\n{\n  \"mcpServers\": {\n    \"mcp-server-chart\": {\n      \"command\": \"cmd\",\n      \"args\": [\n        \"/c\",\n        \"npx\",\n        \"-y\",\n        \"@antv/mcp-server-chart\"\n      ]\n    }\n  }\n}\n```\n\n**Explanation:**\n\n*   `\"mcp-server-chart\"`:  A unique identifier for the server within your MCP client.\n*   `\"command\"`: The command to execute.  `npx` is used to run the package directly from npm without global installation (unless you installed it globally for SSE/Streamable).  On Windows, `cmd /c` is required to execute the command.\n*   `\"args\"`: An array of arguments passed to the command.  `-y` automatically confirms any prompts during package execution.\n\n### Transport Options\n\nThe MCP Server Chart supports three transport protocols:\n\n*   `stdio` (default): Uses standard input/output for communication with the MCP client.  This is the default and typically requires no additional configuration.\n*   `sse`: Uses Server-Sent Events over HTTP.  Requires global installation and running the server with the `--transport sse` option.\n*   `streamable`: Uses a custom streamable protocol over HTTP. Requires global installation and running the server with the `--transport streamable` option.\n\n**Running with SSE or Streamable:**\n\n1.  **Install globally:** `npm install -g @antv/mcp-server-chart`\n2.  **Run the server:**\n\n    ```bash\n    # For SSE transport (default endpoint: /sse)\n    mcp-server-chart --transport sse\n\n    # For Streamable transport with custom endpoint\n    mcp-server-chart --transport streamable\n    ```\n\n    You can customize the port and endpoint using the `--port` and `--endpoint` CLI options.\n\n### Environment Variables\n\nEnvironment variables can be set within the `env` section of the MCP server configuration to customize the server's behavior.\n\n**Example (Mac):**\n\n```json\n{\n  \"mcpServers\": {\n    \"mcp-server-chart\": {\n      \"command\": \"npx\",\n      \"args\": [\n        \"-y\",\n        \"@antv/mcp-server-chart\"\n      ],\n      \"env\": {\n        \"VIS_REQUEST_SERVER\": \"https://your-server.com/api/chart\",\n        \"SERVICE_ID\": \"your-service-id-123\",\n        \"DISABLED_TOOLS\": \"generate_fishbone_diagram,generate_mind_map\"\n      }\n    }\n  }\n}\n```\n\n**Available Environment Variables:**\n\n| Variable             | Description","tools":"## Available Tools\n\nThe MCP Server Chart offers a suite of tools for generating various types of charts using AntV. Here's a breakdown of the available tools and their functionalities:\n\n*   `generate_area_chart`: Generates an area chart, ideal for visualizing data trends over a continuous variable, highlighting overall data progression.\n    *   Example Use Case: Displaying website traffic over time.\n*   `generate_bar_chart`: Creates a bar chart, suitable for comparing values across distinct categories in a horizontal manner.\n    *   Example Use Case: Comparing sales figures for different product lines.\n*   `generate_boxplot_chart`: Produces a boxplot, showcasing data distribution including median, quartiles, and outliers.\n    *   Example Use Case: Analyzing the distribution of test scores in a class.\n*   `generate_column_chart`: Generates a column chart, used for vertical comparisons of values across different categories.\n    *   Example Use Case: Comparing monthly revenue for different departments.\n*   `generate_district_map`: Creates a district map, displaying administrative divisions and data distribution within those regions.\n    *   Example Use Case: Visualizing population density across different counties.\n*   `generate_dual_axes_chart`: Generates a dual-axes chart, useful for displaying the relationship between two variables with different units or scales.\n    *   Example Use Case: Showing temperature and humidity levels over time.\n*   `generate_fishbone_diagram`: Creates a fishbone diagram (Ishikawa diagram), used to identify and visualize the root causes of a problem.\n    *   Example Use Case: Analyzing the potential causes of a production defect.\n*   `generate_flow_diagram`: Generates a flowchart, illustrating the steps and sequence of a process.\n    *   Example Use Case: Mapping out the steps in a customer onboarding process.\n*   `generate_funnel_chart`: Produces a funnel chart, displaying data loss or conversion rates at different stages of a process.\n    *   Example Use Case: Tracking the progress of leads through a sales funnel.\n*   `generate_histogram_chart`: Generates a histogram, displaying the distribution of data by grouping it into intervals and counting occurrences.\n    *   Example Use Case: Visualizing the distribution of ages in a population.\n*   `generate_line_chart`: Creates a line chart, ideal for visualizing trends in data over time or another continuous variable.\n    *   Example Use Case: Tracking stock prices over a period.\n*   `generate_liquid_chart`: Generates a liquid chart, visually representing proportions or percentages as a filled container.\n    *   Example Use Case: Displaying the progress towards a fundraising goal.\n*   `generate_mind_map`: Creates a mind map, used to visualize thought processes and hierarchical information.\n    *   Example Use Case: Brainstorming ideas for a new project.\n*   `generate_network_graph`: Generates a network graph, displaying relationships and connections between nodes.\n    *   Example Use Case: Visualizing social connections between people.\n*   `generate_organization_chart`: Creates an organizational chart, displaying the structure of an organization and reporting relationships.\n    *   Example Use Case: Mapping out the hierarchy of a company.\n*   `generate_path_map`: Generates a path map, displaying route planning results for points of interest (POIs).\n    *   Example Use Case: Showing the optimal route between two locations.\n*   `generate_pie_chart`: Produces a pie chart, displaying the proportion of data as slices of a circle.\n    *   Example Use Case: Showing the market share of different companies.\n*   `generate_pin_map`: Generates a pin map, displaying the distribution of points of interest (POIs) on a map.\n    *   Example Use Case: Showing the locations of stores in a city.\n*   `generate_radar_chart`: Creates a radar chart, comprehensively displaying multi-dimensional data in a radar-like format.\n    *   Example Use Case: Comparing the features of different products.\n*   `generate_sankey_chart`: Generates a Sankey chart, visualizing data flow and volume between different nodes.\n    *   Example Use Case: Showing the flow of energy in a system.\n*   `generate_scatter_chart`: Produces a scatter plot, displaying the relationship between two variables as scattered points.\n    *   Example Use Case: Identifying correlations between two sets of data.\n*   `generate_treemap_chart`: Generates a treemap, displaying hierarchical data as nested rectangles, where the size represents the value.\n    *   Example Use Case: Visualizing the breakdown of a budget.\n*   `generate_venn_chart`: Creates a Venn diagram, displaying relationships between sets, including intersections, unions, and differences.\n    *   Example Use Case: Showing the overlap between different customer segments.\n*   `generate_violin_chart`: Generates a violin plot, displaying the distribution of data, combining features of boxplots and density plots.\n    *   Example Use Case: Comparing the distribution of two different datasets.\n*   `generate_word_cloud_chart`: Creates a word cloud, displaying the frequency of words in textual data, with font sizes indicating frequency.\n    *   Example Use Case: Visualizing the most common words in a document.\n\n> [!NOTE]\n> The geographic visualization charts (`generate_district_map`, `generate_path_map`, `generate_pin_map`) use AMap service and currently only support map generation within China.","faq":null,"created_at":"2025-04-25T09:10:06+00:00","updated_at":"2025-07-07T15:20:11+00:00","source_url":"https://model-context-protocol.com/servers/mcp-server-chart","related_articles":[]}