AI Agent Hub
Back to skills
Data Chart Visualization Design icon

Data Chart Visualization Design

Data Analysis Updated 2026.08.30

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.