Skip to main content
Glama

generate_area_chart

Create area charts to visualize data trends over continuous variables like time, showing cumulative values and relationships such as distance from velocity-time data.

Instructions

Generate a area chart to show data trends under continuous independent variables and observe the overall data trend, such as, displacement = velocity (average or instantaneous) × time: s = v × t. If the x-axis is time (t) and the y-axis is velocity (v) at each moment, an area chart allows you to observe the trend of velocity over time and infer the distance traveled by the area's size.

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
dataYesData for area chart, it should be an array of objects, each object contains a `time` field and a `value` field, such as, [{ time: '2015', value: 23 }, { time: '2016', value: 32 }], when stacking is needed for area, the data should contain a `group` field, such as, [{ time: '2015', value: 23, group: 'A' }, { time: '2015', value: 32, group: 'B' }].
stackNoWhether stacking is enabled. When enabled, area charts require a 'group' field in the data.
styleNoStyle configuration for the chart with a JSON object, optional.
themeNoSet the theme for the chart, optional, default is 'default'.default
widthNoSet the width of chart, default is 600.
heightNoSet the height of chart, default is 400.
titleNoSet the title of chart.
axisXTitleNoSet the x-axis title of chart.
axisYTitleNoSet the y-axis title of chart.

Implementation Reference

  • MCP server request handler for tools/call, which receives the tool name (e.g. generate_area_chart) and arguments, and dispatches to callTool.
    server.setRequestHandler(CallToolRequestSchema, async (request: any) => { logger.info("calling tool", request.params.name, request.params.arguments); return await callTool(request.params.name, request.params.arguments); });
  • Core tool execution logic: maps tool name to chart type (generate_area_chart -> 'area'), validates args against area schema, generates and returns chart URL.
    export async function callTool(tool: string, args: object = {}) { logger.info(`Calling tool: ${tool}`); const chartType = CHART_TYPE_MAP[tool as keyof typeof CHART_TYPE_MAP]; if (!chartType) { logger.error(`Unknown tool: ${tool}`); throw new McpError(ErrorCode.MethodNotFound, `Unknown tool: ${tool}.`); } try { // Validate input using Zod before sending to API. // Select the appropriate schema based on the chart type. const schema = Charts[chartType].schema; if (schema) { // Use safeParse instead of parse and try-catch. const result = z.object(schema).safeParse(args); if (!result.success) { logger.error(`Invalid parameters: ${result.error.message}`); throw new McpError( ErrorCode.InvalidParams, `Invalid parameters: ${result.error.message}`, ); } } const isMapChartTool = [ "generate_district_map", "generate_path_map", "generate_pin_map", ].includes(tool); if (isMapChartTool) { // For map charts, we use the generateMap function, and return the mcp result. const { metadata, ...result } = await generateMap(tool, args); return result; } const url = await generateChartUrl(chartType, args); logger.info(`Generated chart URL: ${url}`); return { content: [ { type: "text", text: url, }, ], _meta: { description: "This is the chart's spec and configuration, which can be renderred to corresponding chart by AntV GPT-Vis chart components.", spec: { type: chartType, ...args }, }, }; // biome-ignore lint/suspicious/noExplicitAny: <explanation> } catch (error: any) { logger.error( `Failed to generate chart: ${error.message || "Unknown error"}.`, ); if (error instanceof McpError) throw error; if (error instanceof ValidateError) throw new McpError(ErrorCode.InvalidParams, error.message); throw new McpError( ErrorCode.InternalError, `Failed to generate chart: ${error?.message || "Unknown error."}`, ); }
  • Zod schema defining the input parameters and validation for the generate_area_chart tool.
    const schema = { data: z .array(data) .describe( "Data for area chart, it should be an array of objects, each object contains a `time` field and a `value` field, such as, [{ time: '2015', value: 23 }, { time: '2016', value: 32 }], when stacking is needed for area, the data should contain a `group` field, such as, [{ time: '2015', value: 23, group: 'A' }, { time: '2015', value: 32, group: 'B' }].", ) .nonempty({ message: "Area chart data cannot be empty." }), stack: z .boolean() .optional() .default(false) .describe( "Whether stacking is enabled. When enabled, area charts require a 'group' field in the data.", ), style: z .object({ backgroundColor: BackgroundColorSchema, palette: PaletteSchema, texture: TextureSchema, lineWidth: z .number() .optional() .describe("Line width for the lines of chart, such as 4."), }) .optional() .describe( "Style configuration for the chart with a JSON object, optional.", ), theme: ThemeSchema, width: WidthSchema, height: HeightSchema, title: TitleSchema, axisXTitle: AxisXTitleSchema, axisYTitle: AxisYTitleSchema, };
  • src/server.ts:66-68 (registration)
    MCP tools/list request handler that returns the list of available tools, including the descriptor for generate_area_chart from Charts.area.tool.
    server.setRequestHandler(ListToolsRequestSchema, async () => ({ tools: getEnabledTools().map((chart) => chart.tool), }));
  • Mapping of tool names to internal chart types; generate_area_chart maps to 'area' for use in Charts[chartType] and generateChartUrl.
    const CHART_TYPE_MAP = { generate_area_chart: "area", generate_bar_chart: "bar", generate_boxplot_chart: "boxplot", generate_column_chart: "column", generate_district_map: "district-map", generate_dual_axes_chart: "dual-axes", generate_fishbone_diagram: "fishbone-diagram", generate_flow_diagram: "flow-diagram", generate_funnel_chart: "funnel", generate_histogram_chart: "histogram", generate_line_chart: "line", generate_liquid_chart: "liquid", generate_mind_map: "mind-map", generate_network_graph: "network-graph", generate_organization_chart: "organization-chart", generate_path_map: "path-map", generate_pie_chart: "pie", generate_pin_map: "pin-map", generate_radar_chart: "radar", generate_sankey_chart: "sankey", generate_scatter_chart: "scatter", generate_treemap_chart: "treemap", generate_venn_chart: "venn", generate_violin_chart: "violin", generate_waterfall_chart: "waterfall", generate_word_cloud_chart: "word-cloud", } as const;

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/antvis/mcp-server-chart'

If you have feedback or need assistance with the MCP directory API, please join our Discord server