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