
Chart Visualization
Generate area and bar charts (and related Deer Flow chart specs) from structured data for dashboards, reports, and KPI storytelling.
Install
npx skills add https://github.com/bytedance/deer-flow --skill chart-visualizationWhat is this skill?
- Area charts for time-series KPIs with optional stack mode and unified `time` formats
- Bar charts for category vs value with group, stack, and side-by-side layout controls
- Rich styling: themes (`default`/`academy`/`dark`), palettes, rough texture, width/height defaults 600×400
- Returns image URL plus `_meta.spec` for re-render or audit of the full chart configuration
- Documented optional axes titles, background color, and line width for area series boundaries
Adoption & trust: 1.5k installs on skills.sh; 70.7k GitHub stars; 3/3 security scanners passed (skills.sh audits).
Recommended Skills
Paper Context Resolverlllllllama/ai-paper-reproduction-skill
Repo Intake And Planlllllllama/ai-paper-reproduction-skill
Env And Assets Bootstraplllllllama/ai-paper-reproduction-skill
Minimal Run And Auditlllllllama/ai-paper-reproduction-skill
Analyze Projectlllllllama/rigorpilot-skills
Ai Research Reproductionlllllllama/rigorpilot-skills
Journey fit
Primary fit
Grow/analytics is the primary shelf because the tools target KPIs, rankings, and time-series insight—not initial app scaffolding. Analytics subphase matches comparative and trend visualization outputs (Top-N bars, stacked areas) rather than raw ETL plumbing.
Common Questions / FAQ
Is Chart Visualization safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.
SKILL.md
READMESKILL.md - Chart Visualization
# generate_area_chart — 面积图 ## 功能概述 展示连续自变量(常为时间)下的数值趋势,可启用堆叠观察不同分组的累计贡献,适合 KPI、能源、产出等时间序列场景。 ## 输入字段 ### 必填 - `data`: 数组,元素包含 `time`(string)与 `value`(number),堆叠时需补充 `group`(string),至少 1 条记录。 ### 可选 - `stack`: boolean,默认 `false`,开启堆叠需确保每条数据都含 `group` 字段。 - `style.backgroundColor`: string,设置图表背景色(如 `#fff`)。 - `style.lineWidth`: number,自定义面积边界的线宽。 - `style.palette`: string[],传入调色板数组用于系列着色。 - `style.texture`: string,默认 `default`,可选 `default`/`rough` 以控制手绘质感。 - `theme`: string,默认 `default`,可选 `default`/`academy`/`dark`。 - `width`: number,默认 `600`,控制图表宽度。 - `height`: number,默认 `400`,控制图表高度。 - `title`: string,默认空字符串,用于设置图表标题。 - `axisXTitle`: string,默认空字符串,用于设置 X 轴标题。 - `axisYTitle`: string,默认空字符串,用于设置 Y 轴标题。 ## 使用建议 保证 `time` 字段格式统一(如 `YYYY-MM`);堆叠模式下各组数据需覆盖相同的时间点,可先做缺失补值。 ## 返回结果 - 返回图像 URL,并在 `_meta.spec` 中附带完整面积图配置,可供二次渲染或追踪。 # generate_bar_chart — 条形图 ## 功能概述 以横向条形比较不同类别或分组的指标表现,适合 Top-N 排行、不同地区或渠道对比。 ## 输入字段 ### 必填 - `data`: array<object>,每条至少含 `category`(string)与 `value`(number),如需分组或堆叠需额外提供 `group`(string)。 ### 可选 - `group`: boolean,默认 `false`,启用后以并排形式展示不同 `group`,并要求 `stack=false` 且数据含 `group` 字段。 - `stack`: boolean,默认 `true`,启用后将不同 `group` 堆叠在同一条形上,并要求 `group=false` 且数据含 `group` 字段。 - `style.backgroundColor`: string,自定义背景色(如 `#fff`)。 - `style.palette`: string[],设置系列颜色列表。 - `style.texture`: string,默认 `default`,可选 `default`/`rough`。 - `theme`: string,默认 `default`,可选 `default`/`academy`/`dark`。 - `width`: number,默认 `600`,控制图表宽度。 - `height`: number,默认 `400`,控制图表高度。 - `title`: string,默认空字符串,用于设置图表标题。 - `axisXTitle`: string,默认空字符串,设置 X 轴标题。 - `axisYTitle`: string,默认空字符串,设置 Y 轴标题。 ## 使用建议 类别名称保持简短;若系列数较多可改用堆叠或筛选重点项目,以免图表拥挤。 ## 返回结果 - 返回条形图图像 URL,并在 `_meta.spec` 中给出完整配置以便复用。 # generate_boxplot_chart — 箱型图 ## 功能概述 展示各类别数据的分布范围(最值、四分位、异常值),用于质量监控、实验结果或群体分布比较。 ## 输入字段 ### 必填 - `data`: array<object>,每条记录包含 `category`(string)与 `value`(number),可选 `group`(string)用于多组比较。 ### 可选 - `style.backgroundColor`: string,设置背景色。 - `style.palette`: string[],定义配色列表。 - `style.texture`: string,默认 `default`,可选 `default`/`rough`。 - `theme`: string,默认 `default`,可选 `default`/`academy`/`dark`。 - `width`: number,默认 `600`。 - `height`: number,默认 `400`。 - `title`: string,默认空字符串。 - `axisXTitle`: string,默认空字符串。 - `axisYTitle`: string,默认空字符串。 ## 使用建议 单个类别至少提供 5 个样本以保证统计意义;如需展示多批次,可通过 `group` 或拆分多次调用。 ## 返回结果 - 返回箱型图 URL,并在 `_meta.spec` 中储存输入规格。 # generate_column_chart — 柱状图 ## 功能概述 纵向柱状对比不同类别或时间段的指标,可分组或堆叠展示,常用于销量、营收、客流对比。 ## 输入字段 ### 必填 - `data`: array<object>,每条至少含 `category`(string)与 `value`(number),如需分组或堆叠需补充 `group`(string)。 ### 可选 - `group`: boolean,默认 `true`,用于按系列并排展示不同 `group`,开启时需确保 `stack=false` 且数据包含 `group`。 - `stack`: boolean,默认 `false`,用于将不同 `group` 堆叠到同一柱子,开启时需确保 `group=false` 且数据包含 `group`。 - `style.backgroundColor`: string,自定义背景色。 - `style.palette`: string[],定义配色列表。 - `style.texture`: string,默认 `default`,可选 `default`/`rough`。 - `theme`: string,默认 `default`,可选 `default`/`academy`/`dark`。 - `width`: number,默认 `600`。 - `height`: number,默认 `400`。 - `title`: string,默认空字符串。 - `axisXTitle`: string,默认空字符串。 - `axisYTitle`: string,默认空字符串。 ## 使用建议 当类别较多(>12)时可按 Top-N 或聚合;堆叠模式要确保各记录都含 `group` 字段以免校验失败。 ## 返回结果 - 返回柱状图 URL,并随 `_meta.spec` 提供配置详情。 # generate_district_map — 行政区地图(中国) ## 功能概述 生成中国境内省/市/区/县的覆盖或热力图,可展示指标区间、类别或区域组成,适用于区域销售、政策覆盖等场景。 ## 输入字段 ### 必填 - `title`: string,必填且≤16 字,描述地图主题。 - `data`: object,必填,承载行政区配置及指标信息。 - `data.name`: string,必填,中国境内的行政区关键词,需明确到省/市/区/县。 ### 可选 - `data.style.fillColor`: string,自定义无数据区域的填充色。 - `data.colors`: string[],枚举或连续色带,默认提供 10 色列表。 - `data.dataType`: string,枚举 `number`/`enum`,决定颜色映射方式。 - `data.dataLabel`: string,指标名称(如 `GDP`)。 - `data.dataValue`: string,指标值或枚举标签。 - `data.dataValueUnit`: string,指标单位(如 `万亿`)。 - `data.showAllSubdistricts`: boolean,默认 `false`,是否展示全部下级行政区。 - `data.subdistricts[]`: array<object>,用于下钻各子区域,元素至少含 `name`,可附 `dataValue` 与 `style.fillColor`。 - `width`: number,默认 `1600`,设置图宽。 - `height`: number,默认 `1000`,设置图高。 ## 使用建议 名称必须精确到行政层级,避免模糊词;若配置 `subdistricts`,需同时开启 `showAllSubd