Skip to content

Chart Visualization

Turns data into chart images by picking a suitable chart type and calling a chart-generation service

Stars
84,876
Licence
MIT
Files
15 files

What it does

When you give the agent data and ask for a visual, this skill helps it choose a suitable chart type (line, bar, pie, funnel, map, mind map and more), fill in the chart's required fields from your data, and generate a chart image. The agent then returns a link to the image along with the exact specification it used. It is a guided workflow built around a script that sends the request to an external chart service.

Great for

  • Analysts who want quick charts from a table or list of numbers without opening a spreadsheet tool
  • Marketers or students who need a trend, funnel or comparison chart for a report
  • Developers prototyping dashboards who want a consistent way to request chart images

Skip it if

  • Confidential or personal data: the chart data is sent to an external chart-service URL, so sensitive figures could leave your environment (the SKILL.md does not name the service or its privacy terms)
  • Offline or air-gapped work, since the script needs network access and a Node.js runtime
  • Pixel-precise publication graphics, because the output depends on the remote service's rendering and options

Try asking

  • “Turn this quarterly sales table into a column chart with a title and theme”
  • “Show our signup funnel from these five stages as a funnel chart”
  • “Create a line chart of weekly active users over the last six months”
  • “Draw a mind map of these project topics”
Step-by-step guide: how to use Chart VisualizationInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 15 original files, the MIT licence and an attribution note.

    chart-visualization.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip chart-visualization.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip chart-visualization.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give clean, labelled data (for example, columns with names and numeric values) so the agent can map it to the chart schema correctly.
  • Ask for the chart type if you have a preference; otherwise the agent will choose one based on whether your data is a trend, comparison, distribution or relationship.
  • Check the returned specification before sharing the image, and avoid sending sensitive numbers unless you know the chart service's data policy.

What's inside

  • references/generate_area_chart.md
  • references/generate_bar_chart.md
  • references/generate_boxplot_chart.md
  • references/generate_column_chart.md
  • references/generate_district_map.md
  • references/generate_dual_axes_chart.md
  • references/generate_fishbone_diagram.md
  • references/generate_flow_diagram.md
  • references/generate_funnel_chart.md
  • references/generate_histogram_chart.md
  • references/generate_line_chart.md
  • references/generate_liquid_chart.md
  • references/generate_mind_map.md
  • references/generate_network_graph.md
  • SKILL.md

Redistributed unmodified from bytedance/deer-flow under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.