chart-generator

# Chart Generator ## Quick Start Design data visualizations by recommending the right chart type, generating chart configurations, and producing code snippets for popular libraries (Chart.js, ECharts, Google Sheets, Excel). Start with data understanding, then match to the best visual format. ## Workflow 1. Understand the data: dimensions, measures, data types, row count 2. Identify the goal: comparison, trend, distribution, composition, relationship 3. Recommend the best chart type for the goal 4. Generate chart configuration or code snippet for the user's preferred library 5. Include formatting: labels, colors, legends, axis titles 6. Suggest improvements for clarity and readability ## Examples **Example 1: Revenue Trend Chart** Input: "Create a monthly revenue chart from this data: Jan: 500M, Feb: 620M, Mar: 580M, Apr: 710M" Output: ``` CHART RECOMMENDATION ==================== Goal: Show trend over time Chart Type: Line chart with data markers Library: Chart.js { type: 'line', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr'], datasets: [{ label: 'Revenue ($M)', data: [500, 620, 580, 710], borderColor: '#2563eb', backgroundColor: 'rgba(37, 99, 235, 0.1)', fill: true, tension: 0.3, pointRadius: 5, pointBackgroundColor: '#2563eb' }] }, options: { plugins: { title: { display: true, text: 'Monthly Revenue Q1-Q2 2026' }, legend: { display: false } }, scales: { y: { beginAtZero: true, title: { display: true, text: 'Revenue ($M)' } } } } } Key Insight: Revenue grew 42% from Jan to Apr despite a dip in March. Suggestion: Add a target line to show performance vs goal. ``` **Example 2: Category Comparison** Input: "Create a chart comparing sales by region: North 35%, Central 25%, South 40%" Output: A horizontal bar chart or donut chart configuration with proper labels and colors. ## Tools - Use `Read` to load data files for visualization - Use `Write` to save chart configurations or code to files - Use `Bash` to process or aggregate data before charting ## Error Handling - If data format is unclear → ask for sample rows or column descriptions - If chart library not specified → default to Chart.js and note alternatives - If too many categories (>10) → suggest grouping or filtering top N - If data has missing values → note the gaps and suggest handling approach ## Connectors (Optional) This skill works standalone. When connected to external tools, it unlocks additional capabilities: | Connector | What it enables | |-----------|----------------| | ~~database | Pull live data directly from databases to generate up-to-date charts | | ~~BI tool | Embed generated chart configs into dashboards and scheduled visual reports | | ~~spreadsheet | Read chart data from linked spreadsheets and export configs back | | ~~data warehouse | Access aggregated warehouse tables for large-scale visualizations | ## Rules - Always recommend the chart type before generating code - Match chart type to analytical goal: line (trend), bar (comparison), pie (composition), scatter (relationship) - Maximum 7 colors in a single chart for readability - Always include axis labels, title, and legend - Use colorblind-friendly palettes by default - For pie/donut charts, limit to 6 segments (group rest as "Other") - Provide the code snippet ready to copy-paste - Note data insights visible in the chart ## Output Template ``` CHART RECOMMENDATION ==================== Goal: [Comparison / Trend / Distribution / Composition / Relationship] Chart Type: [Recommended chart type] Library: [Chart.js / ECharts / Google Sheets / Excel] [Chart configuration or code snippet] Key Insight: [What the chart reveals] Suggestion: [Improvement or additional visualization] ``` ## Related Skills - **data-summarizer** -- analyze and summarize the dataset before choosing the right chart - **kpi-tracker** -- pair charts with KPI scorecards for performance dashboards - **sql-helper** -- write queries to extract and shape the data for visualization