| No | Data Type | Keywords | Best Chart Type | Secondary Options | Color Guidance | Performance Impact | Accessibility Notes | Library Recommendation | Interactive Level |
|---|---|---|---|---|---|---|---|---|---|
| 1 | Trend Over Time | trend, time-series, line, growth, timeline, progress | Line Chart | Area Chart, Smooth Area | Primary: #0080FF. Multiple series: use distinct colors. Fill: 20% opacity | ⚡ Excellent (optimized) | ✓ Clear line patterns for colorblind users. Add pattern overlays. | Chart.js, Recharts, ApexCharts | Hover + Zoom |
| 2 | Compare Categories | compare, categories, bar, comparison, ranking | Bar Chart (Horizontal or Vertical) | Column Chart, Grouped Bar | Each bar: distinct color. Category: grouped same color. Sorted: descending order | ⚡ Excellent | ✓ Easy to compare. Add value labels on bars for clarity. | Chart.js, Recharts, D3.js | Hover + Sort |
| 3 | Part-to-Whole | part-to-whole, pie, donut, percentage, proportion, share | Pie Chart or Donut | Stacked Bar, Treemap | Colors: 5-6 max. Contrasting palette. Large slices first. Use labels. | ⚡ Good (limit 6 slices) | ⚠ Hard for accessibility. Better: Stacked bar with legend. Avoid pie if >5 items. | Chart.js, Recharts, D3.js | Hover + Drill |
| 4 | Correlation/Distribution | correlation, distribution, scatter, relationship, pattern | Scatter Plot or Bubble Chart | Heat Map, Matrix | Color axis: gradient (blue-red). Size: relative. Opacity: 0.6-0.8 to show density | ⚠ Moderate (many points) | ⚠ Provide data table alternative. Use pattern + color distinction. | D3.js, Plotly, Recharts | Hover + Brush |
| 5 | Heatmap/Intensity | heatmap, heat-map, intensity, density, matrix | Heat Map or Choropleth | Grid Heat Map, Bubble Heat | Gradient: Cool (blue) to Hot (red). Scale: clear legend. Divergent for ±data | ⚡ Excellent (color CSS) | ⚠ Colorblind: Use pattern overlay. Provide numerical legend. | D3.js, Plotly, ApexCharts | Hover + Zoom |
| 6 | Geographic Data | geographic, map, location, region, geo, spatial | Choropleth Map, Bubble Map | Geographic Heat Map | Regional: single color gradient or categorized colors. Legend: clear scale | ⚠ Moderate (rendering) | ⚠ Include text labels for regions. Provide data table alternative. | D3.js, Mapbox, Leaflet | Pan + Zoom + Drill |
| 7 | Funnel/Flow | funnel/flow | Funnel Chart, Sankey | Waterfall (for flows) | Stages: gradient (starting color → ending color). Show conversion % | ⚡ Good | ✓ Clear stage labels + percentages. Good for accessibility if labeled. | D3.js, Recharts, Custom SVG | Hover + Drill |
| 8 | Performance vs Target | performance-vs-target | Gauge Chart or Bullet Chart | Dial, Thermometer | Performance: Red→Yellow→Green gradient. Target: marker line. Threshold colors | ⚡ Good | ✓ Add numerical value + percentage label beside gauge. | D3.js, ApexCharts, Custom SVG | Hover |
| 9 | Time-Series Forecast | time-series-forecast | Line with Confidence Band | Ribbon Chart | Actual: solid line #0080FF. Forecast: dashed #FF9500. Band: light shading | ⚡ Good | ✓ Clearly distinguish actual vs forecast. Add legend. | Chart.js, ApexCharts, Plotly | Hover + Toggle |
| 10 | Anomaly Detection | anomaly-detection | Line Chart with Highlights | Scatter with Alert | Normal: blue #0080FF. Anomaly: red #FF0000 circle/square marker + alert | ⚡ Good | ✓ Circle/marker for anomalies. Add text alert annotation. | D3.js, Plotly, ApexCharts | Hover + Alert |
| 11 | Hierarchical/Nested Data | hierarchical/nested-data | Treemap | Sunburst, Nested Donut, Icicle | Parent: distinct hues. Children: lighter shades. White borders 2-3px. | ⚠ Moderate | ⚠ Poor - provide table alternative. Label large areas. | D3.js, Recharts, ApexCharts | Hover + Drilldown |
| 12 | Flow/Process Data | flow/process-data | Sankey Diagram | Alluvial, Chord Diagram | Gradient from source to target. Opacity 0.4-0.6 for flows. | ⚠ Moderate | ⚠ Poor - provide flow table alternative. | D3.js (d3-sankey), Plotly | Hover + Drilldown |
| 13 | Cumulative Changes | cumulative-changes | Waterfall Chart | Stacked Bar, Cascade | Increases: #4CAF50. Decreases: #F44336. Start: #2196F3. End: #0D47A1. | ⚡ Good | ✓ Good - clear directional colors with labels. | ApexCharts, Highcharts, Plotly | Hover |
| 14 | Multi-Variable Comparison | multi-variable-comparison | Radar/Spider Chart | Parallel Coordinates, Grouped Bar | Single: #0080FF 20% fill. Multiple: distinct colors per dataset. | ⚡ Good | ⚠ Moderate - limit 5-8 axes. Add data table. | Chart.js, Recharts, ApexCharts | Hover + Toggle |
| 15 | Stock/Trading OHLC | stock/trading-ohlc | Candlestick Chart | OHLC Bar, Heikin-Ashi | Bullish: #26A69A. Bearish: #EF5350. Volume: 40% opacity below. | ⚡ Good | ⚠ Moderate - provide OHLC data table. | Lightweight Charts (TradingView), ApexCharts | Real-time + Hover + Zoom |
| 16 | Relationship/Connection Data | relationship/connection-data | Network Graph | Hierarchical Tree, Adjacency Matrix | Node types: categorical colors. Edges: #90A4AE 60% opacity. | ❌ Poor (500+ nodes struggles) | ❌ Very Poor - provide adjacency list alternative. | D3.js (d3-force), Vis.js, Cytoscape.js | Drilldown + Hover + Drag |
| 17 | Distribution/Statistical | distribution/statistical | Box Plot | Violin Plot, Beeswarm | Box: #BBDEFB. Border: #1976D2. Median: #D32F2F. Outliers: #F44336. | ⚡ Excellent | ✓ Good - include stats table (min, Q1, median, Q3, max). | Plotly, D3.js, Chart.js (plugin) | Hover |
| 18 | Performance vs Target (Compact) | performance-vs-target-(compact) | Bullet Chart | Gauge, Progress Bar | Ranges: #FFCDD2, #FFF9C4, #C8E6C9. Performance: #1976D2. Target: black 3px. | ⚡ Excellent | ✓ Excellent - compact with clear values. | D3.js, Plotly, Custom SVG | Hover |
| 19 | Proportional/Percentage | proportional/percentage | Waffle Chart | Pictogram, Stacked Bar 100% | 10x10 grid. 3-5 categories max. 2-3px spacing between squares. | ⚡ Good | ✓ Good - better than pie for accessibility. | D3.js, React-Waffle, Custom CSS Grid | Hover |
| 20 | Hierarchical Proportional | hierarchical-proportional | Sunburst Chart | Treemap, Icicle, Circle Packing | Center to outer: darker to lighter. 15-20% lighter per level. | ⚠ Moderate | ⚠ Poor - provide hierarchy table alternative. | D3.js (d3-hierarchy), Recharts, ApexCharts | Drilldown + Hover |
| 21 | Root Cause Analysis | root cause, decomposition, tree, hierarchy, drill-down, ai-split | Decomposition Tree | Decision Tree, Flow Chart | Nodes: #2563EB (Primary) vs #EF4444 (Negative impact). Connectors: Neutral grey. | ⚠ Moderate (calculation heavy) | ✓ clear hierarchy. Allow keyboard navigation for nodes. | Power BI (native), React-Flow, Custom D3.js | Drill + Expand |
| 22 | 3D Spatial Data | 3d, spatial, immersive, terrain, molecular, volumetric | 3D Scatter/Surface Plot | Volumetric Rendering, Point Cloud | Depth cues: lighting/shading. Z-axis: color gradient (cool to warm). | ❌ Heavy (WebGL required) | ❌ Poor - requires alternative 2D view or data table. | Three.js, Deck.gl, Plotly 3D | Rotate + Zoom + VR |
| 23 | Real-Time Streaming | streaming, real-time, ticker, live, velocity, pulse | Streaming Area Chart | Ticker Tape, Moving Gauge | Current: Bright Pulse (#00FF00). History: Fading opacity. Grid: Dark. | ⚡ Optimized (canvas/webgl) | ⚠ Flashing elements - provide pause button. High contrast. | Smoothed D3.js, CanvasJS, SciChart | Real-time + Pause |
| 24 | Sentiment/Emotion | sentiment, emotion, nlp, opinion, feeling | Word Cloud with Sentiment | Sentiment Arc, Radar Chart | Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Size = Frequency. | ⚡ Good | ⚠ Word clouds poor for screen readers. Use list view. | D3-cloud, Highcharts, Nivo | Hover + Filter |
| 25 | Process Mining | process, mining, variants, path, bottleneck, log | Process Map / Graph | Directed Acyclic Graph (DAG), Petri Net | Happy path: #10B981 (Thick). Deviations: #F59E0B (Thin). Bottlenecks: #EF4444. | ⚠ Moderate to Heavy | ⚠ Complex graphs hard to navigate. Provide path summary. | React-Flow, Cytoscape.js, Recharts | Drag + Node-Click |
1376 Charts 6c22c5ce
| No | Data Type | Keywords | Best Chart Type | Secondary Options | Color Guidance | Performance Impact | Accessibility Notes | Library Recommendation | Interactive Level |
tools-only
Updated 1376 Charts 6c22c5ce by tools-only · bc2716e
npx skillmds@latest add tools-only/1376-charts-6c22c5ce File contents
---name: 1376-charts-6c22c5cedescription: | No | Data Type | Keywords | Best Chart Type | Secondary Options | Color Guidance | Performance Impact | Accessibility Notes | Library Recommendation | Interactive Level |---| No | Data Type | Keywords | Best Chart Type | Secondary Options | Color Guidance | Performance Impact | Accessibility Notes | Library Recommendation | Interactive Level ||----|-----------|----------|-----------------|-------------------|---------------|-------------------|---------------------|------------------------|------------------|| 1 | Trend Over Time | trend, time-series, line, growth, timeline, progress | Line Chart | Area Chart, Smooth Area | Primary: #0080FF. Multiple series: use distinct colors. Fill: 20% opacity | ⚡ Excellent (optimized) | ✓ Clear line patterns for colorblind users. Add pattern overlays. | Chart.js, Recharts, ApexCharts | Hover + Zoom || 2 | Compare Categories | compare, categories, bar, comparison, ranking | Bar Chart (Horizontal or Vertical) | Column Chart, Grouped Bar | Each bar: distinct color. Category: grouped same color. Sorted: descending order | ⚡ Excellent | ✓ Easy to compare. Add value labels on bars for clarity. | Chart.js, Recharts, D3.js | Hover + Sort || 3 | Part-to-Whole | part-to-whole, pie, donut, percentage, proportion, share | Pie Chart or Donut | Stacked Bar, Treemap | Colors: 5-6 max. Contrasting palette. Large slices first. Use labels. | ⚡ Good (limit 6 slices) | ⚠ Hard for accessibility. Better: Stacked bar with legend. Avoid pie if >5 items. | Chart.js, Recharts, D3.js | Hover + Drill || 4 | Correlation/Distribution | correlation, distribution, scatter, relationship, pattern | Scatter Plot or Bubble Chart | Heat Map, Matrix | Color axis: gradient (blue-red). Size: relative. Opacity: 0.6-0.8 to show density | ⚠ Moderate (many points) | ⚠ Provide data table alternative. Use pattern + color distinction. | D3.js, Plotly, Recharts | Hover + Brush || 5 | Heatmap/Intensity | heatmap, heat-map, intensity, density, matrix | Heat Map or Choropleth | Grid Heat Map, Bubble Heat | Gradient: Cool (blue) to Hot (red). Scale: clear legend. Divergent for ±data | ⚡ Excellent (color CSS) | ⚠ Colorblind: Use pattern overlay. Provide numerical legend. | D3.js, Plotly, ApexCharts | Hover + Zoom || 6 | Geographic Data | geographic, map, location, region, geo, spatial | Choropleth Map, Bubble Map | Geographic Heat Map | Regional: single color gradient or categorized colors. Legend: clear scale | ⚠ Moderate (rendering) | ⚠ Include text labels for regions. Provide data table alternative. | D3.js, Mapbox, Leaflet | Pan + Zoom + Drill || 7 | Funnel/Flow | funnel/flow | Funnel Chart, Sankey | Waterfall (for flows) | Stages: gradient (starting color → ending color). Show conversion % | ⚡ Good | ✓ Clear stage labels + percentages. Good for accessibility if labeled. | D3.js, Recharts, Custom SVG | Hover + Drill || 8 | Performance vs Target | performance-vs-target | Gauge Chart or Bullet Chart | Dial, Thermometer | Performance: Red→Yellow→Green gradient. Target: marker line. Threshold colors | ⚡ Good | ✓ Add numerical value + percentage label beside gauge. | D3.js, ApexCharts, Custom SVG | Hover || 9 | Time-Series Forecast | time-series-forecast | Line with Confidence Band | Ribbon Chart | Actual: solid line #0080FF. Forecast: dashed #FF9500. Band: light shading | ⚡ Good | ✓ Clearly distinguish actual vs forecast. Add legend. | Chart.js, ApexCharts, Plotly | Hover + Toggle || 10 | Anomaly Detection | anomaly-detection | Line Chart with Highlights | Scatter with Alert | Normal: blue #0080FF. Anomaly: red #FF0000 circle/square marker + alert | ⚡ Good | ✓ Circle/marker for anomalies. Add text alert annotation. | D3.js, Plotly, ApexCharts | Hover + Alert || 11 | Hierarchical/Nested Data | hierarchical/nested-data | Treemap | Sunburst, Nested Donut, Icicle | Parent: distinct hues. Children: lighter shades. White borders 2-3px. | ⚠ Moderate | ⚠ Poor - provide table alternative. Label large areas. | D3.js, Recharts, ApexCharts | Hover + Drilldown || 12 | Flow/Process Data | flow/process-data | Sankey Diagram | Alluvial, Chord Diagram | Gradient from source to target. Opacity 0.4-0.6 for flows. | ⚠ Moderate | ⚠ Poor - provide flow table alternative. | D3.js (d3-sankey), Plotly | Hover + Drilldown || 13 | Cumulative Changes | cumulative-changes | Waterfall Chart | Stacked Bar, Cascade | Increases: #4CAF50. Decreases: #F44336. Start: #2196F3. End: #0D47A1. | ⚡ Good | ✓ Good - clear directional colors with labels. | ApexCharts, Highcharts, Plotly | Hover || 14 | Multi-Variable Comparison | multi-variable-comparison | Radar/Spider Chart | Parallel Coordinates, Grouped Bar | Single: #0080FF 20% fill. Multiple: distinct colors per dataset. | ⚡ Good | ⚠ Moderate - limit 5-8 axes. Add data table. | Chart.js, Recharts, ApexCharts | Hover + Toggle || 15 | Stock/Trading OHLC | stock/trading-ohlc | Candlestick Chart | OHLC Bar, Heikin-Ashi | Bullish: #26A69A. Bearish: #EF5350. Volume: 40% opacity below. | ⚡ Good | ⚠ Moderate - provide OHLC data table. | Lightweight Charts (TradingView), ApexCharts | Real-time + Hover + Zoom || 16 | Relationship/Connection Data | relationship/connection-data | Network Graph | Hierarchical Tree, Adjacency Matrix | Node types: categorical colors. Edges: #90A4AE 60% opacity. | ❌ Poor (500+ nodes struggles) | ❌ Very Poor - provide adjacency list alternative. | D3.js (d3-force), Vis.js, Cytoscape.js | Drilldown + Hover + Drag || 17 | Distribution/Statistical | distribution/statistical | Box Plot | Violin Plot, Beeswarm | Box: #BBDEFB. Border: #1976D2. Median: #D32F2F. Outliers: #F44336. | ⚡ Excellent | ✓ Good - include stats table (min, Q1, median, Q3, max). | Plotly, D3.js, Chart.js (plugin) | Hover || 18 | Performance vs Target (Compact) | performance-vs-target-(compact) | Bullet Chart | Gauge, Progress Bar | Ranges: #FFCDD2, #FFF9C4, #C8E6C9. Performance: #1976D2. Target: black 3px. | ⚡ Excellent | ✓ Excellent - compact with clear values. | D3.js, Plotly, Custom SVG | Hover || 19 | Proportional/Percentage | proportional/percentage | Waffle Chart | Pictogram, Stacked Bar 100% | 10x10 grid. 3-5 categories max. 2-3px spacing between squares. | ⚡ Good | ✓ Good - better than pie for accessibility. | D3.js, React-Waffle, Custom CSS Grid | Hover || 20 | Hierarchical Proportional | hierarchical-proportional | Sunburst Chart | Treemap, Icicle, Circle Packing | Center to outer: darker to lighter. 15-20% lighter per level. | ⚠ Moderate | ⚠ Poor - provide hierarchy table alternative. | D3.js (d3-hierarchy), Recharts, ApexCharts | Drilldown + Hover || 21 | Root Cause Analysis | root cause, decomposition, tree, hierarchy, drill-down, ai-split | Decomposition Tree | Decision Tree, Flow Chart | Nodes: #2563EB (Primary) vs #EF4444 (Negative impact). Connectors: Neutral grey. | ⚠ Moderate (calculation heavy) | ✓ clear hierarchy. Allow keyboard navigation for nodes. | Power BI (native), React-Flow, Custom D3.js | Drill + Expand || 22 | 3D Spatial Data | 3d, spatial, immersive, terrain, molecular, volumetric | 3D Scatter/Surface Plot | Volumetric Rendering, Point Cloud | Depth cues: lighting/shading. Z-axis: color gradient (cool to warm). | ❌ Heavy (WebGL required) | ❌ Poor - requires alternative 2D view or data table. | Three.js, Deck.gl, Plotly 3D | Rotate + Zoom + VR || 23 | Real-Time Streaming | streaming, real-time, ticker, live, velocity, pulse | Streaming Area Chart | Ticker Tape, Moving Gauge | Current: Bright Pulse (#00FF00). History: Fading opacity. Grid: Dark. | ⚡ Optimized (canvas/webgl) | ⚠ Flashing elements - provide pause button. High contrast. | Smoothed D3.js, CanvasJS, SciChart | Real-time + Pause || 24 | Sentiment/Emotion | sentiment, emotion, nlp, opinion, feeling | Word Cloud with Sentiment | Sentiment Arc, Radar Chart | Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Size = Frequency. | ⚡ Good | ⚠ Word clouds poor for screen readers. Use list view. | D3-cloud, Highcharts, Nivo | Hover + Filter || 25 | Process Mining | process, mining, variants, path, bottleneck, log | Process Map / Graph | Directed Acyclic Graph (DAG), Petri Net | Happy path: #10B981 (Thick). Deviations: #F59E0B (Thin). Bottlenecks: #EF4444. | ⚠ Moderate to Heavy | ⚠ Complex graphs hard to navigate. Provide path summary. | React-Flow, Cytoscape.js, Recharts | Drag + Node-Click |
tools-only/X-Skills/tree/main/data-analysis/1376-charts_6c22c5ce commit bc2716e348
Frequently asked questions
Run npx skillmds@latest add tools-only/1376-charts-6c22c5ce in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
| No | Data Type | Keywords | Best Chart Type | Secondary Options | Color Guidance | Performance Impact | Accessibility Notes | Library Recommendation | Interactive Level | It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
tools-only (@tools-only) published this skill. Their other Agent Skills are listed on their SkillMD profile.