mcpField
V
visualization

visualization

github.com/aws-samplesData & databases19758 installsUpdated 3w ago
Repository

About visualization

A skill for creating frontend-rendered interactive charts from numerical data. It is intended for in-app visualizations and returns a chart specification rather than a downloadable image.

Key features

  1. 01Bar, line, and pie chart specifications
  2. 02Structured chart data fields
  3. 03Optional chart titles and axis labels
  4. 04Optional per-point colors

Use cases

  1. 01Plot quarterly sales figures
  2. 02Show survey response percentages
  3. 03Display stock prices over time
  4. 04Compare market share segments

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/aws-samples/sample-strands-agent-with-agentcore --skill visualization

After installing, type/visualizationin Claude Code to confirm it loaded.

Details

From the project README

Visualization

When to Use This Skill

Use create_visualization for interactive in-app charts of numerical data. For an explicit PNG or PDF deliverable, use the visual-design skill instead. This tool returns a chart specification, not a downloadable image file. If the requested chart needs controls absent from this schema, such as fixed axis bounds, choose a tool that supports them rather than dropping the requirement.

Use this skill for...Use excalidraw skill for...
Sales figures by quarterSystem architecture diagram
Survey response percentagesFlowchart or decision tree
Stock price over timeSequence / interaction diagram
Market share breakdownMind map or concept map
Any x/y or segment/value dataShapes, boxes, arrows, labels

Available Tool

  • create_visualization: Create a chart specification for frontend rendering.

Parameters (MUST match exactly)

ParameterTypeRequiredDescription
chart_typestrYes"bar", "line", or "pie"
datalist[dict]YesArray of data objects — see formats below
titlestrNoChart title
x_labelstrNoX-axis label (bar/line only)
y_labelstrNoY-axis label (bar/line only)

Data Formats (CRITICAL — use exact field names)

Bar / Line charts — each object MUST have "x" and "y" keys:

[{"x": "Jan", "y": 100}, {"x": "Feb", "y": 150}, {"x": "Mar", "y": 120}]

Pie charts — each object MUST have "segment" and "value" keys:

[{"segment": "Category A", "value": 30}, {"segment": "Category B", "value": 70}]

Optional: add "color": "hsl(210, 100%, 50%)" to any data point for custom color.

Example tool_input

Bar chart:

{
  "chart_type": "bar",
  "data": [{"x": "Q1", "y": 250}, {"x": "Q2", "y": 310}, {"x": "Q3", "y": 280}],
  "title": "Quarterly Revenue",
  "x_label": "Quarter",
  "y_label": "Revenue ($K)"
}

Pie chart:

{
  "chart_type": "pie",
  "data": [{"segment": "Mobile", "value": 60}, {"segment": "Desktop", "value": 35}, {"segment": "Tablet", "value": 5}],
  "title": "Traffic by Device"
}

Common Mistakes to Avoid

  • Do NOT use {"labels": [...], "values": [...]} format — data MUST be a list of dicts.
  • Bar/line data MUST use "x" and "y" keys, NOT "label" or "name".

UI Guidance (from tools-config)

Data Format:

  • Bar/Line charts: [{"x": label, "y": value}]
  • Pie charts: [{"segment": name, "value": number}]
  • Optional colors: "color": "hsl(210, 100%, 50%)"

Comments

Markdown supported