Data Chart Visualization Design
Paste the following prompt into your AI chat to install this skill:
Please follow https://skillhub.cn/install/skillhub.md and install @user_fccf428b/chart-designer.
About this skill
Problem Being Solved
When a dataset is large enough to matter but the conclusion is narrow, the usual failure is not a missing chart; it is a wrong chart. Too many categories in a pie chart, discrete items plotted as a line, multiple KPIs crammed into gauges, or repeated manual rewrites across ECharts, Chart.js, and Excel. Chart Designer treats visualization design as a set of explicit decisions: infer the data relationship, audience, and display context, then propose chart type, configuration, and styling.
How It Works
Core capabilities include:
- Chart recommendation: match comparison, trend, distribution, part-to-whole, flow, and KPI scenarios to bar, line, histogram, treemap, sankey, gauge, and similar forms.
- Configuration output: produce ECharts JSON, Chart.js setup, Excel chart instructions, and CSS/color-scheme suggestions.
- Design review: apply data-ink ratio, axis labels, units, color limits, colorblind-friendly palettes, tooltips, zoom, and drill-down checks.
The usual workflow starts from a data description: field types, the question to answer, audience, and placement in a report, dashboard, or presentation. It then returns candidate chart types, layout notes, color options, and a config draft that can be pasted into the target tool. This fits teams that need a reviewable visualization spec instead of a vague “make a chart” request.
Boundaries and Caveats
It does not render charts directly and does not access or process data sources automatically. Custom visualizations, real-time data pipelines, and integration into a specific frontend stack still require engineering work. Generated configurations are starting points and may need adjustment for library versions, themes, or business fields. If the goal is a static image, treat the skill as a chart specification workflow rather than a finished renderer.
Use Cases
- While analyzing monthly business metrics, split category comparison and trend into two charts and draft ECharts JSON.
- When building an admin dashboard, select chart types for KPIs, trends, and shares, then output Chart.js configuration and palette suggestions.
- When preparing a review deck, convert a conversion funnel and regional share into funnel and treemap specs with Excel chart setup notes.
- When auditing a quarterly report, check line-chart axis units, color count, and layout, then provide copy-ready styling fixes.
Best For
- Data analysts preparing monthly business reviews who need a reviewable ECharts configuration for category and trend charts.
- Frontend engineers building admin dashboards who need Chart.js configurations for KPI, trend, and share charts.
- Product or operations staff preparing presentation decks who need funnel, share, and KPI chart specifications.
- Analytics support maintaining quarterly reviews who need checks for axis labels, color limits, and accessible palettes.
Related Skills
Fetches Baidu Hot Search Top 10 titles using web_fetch first, validates same-day data, and falls back to browser automation when stale.
Generates an evening A-share policy and trading opportunity daily report by collecting same-day index, policy, and capital data, then applying a fixed template to highlight beneficiary sectors, drivers, and price directions.
Maps natural-language TikTok requests to KeyAPI REST scenarios, validates endpoints against docs, and executes data queries and analysis.
Extract city-specified AI jobs from BOSS Zhipin, save CSV/table data, mark new postings, and summarize salary trends, application advice, and HTML reports.