ui-ux-pro-max-skill/.claude/skills/design-system/data/slide-charts.csv

1	id	chart_type	keywords	best_for	data_type	when_to_use	when_to_avoid	max_categories	slide_context	css_implementation	accessibility_notes	sources
2	1	Bar Chart Vertical	bar, vertical, comparison, categories, ranking	Comparing values across categories	Categorical discrete	Comparing 3-12 categories, showing ranking, highlighting differences	Continuous time data trends	12	Traction metrics feature comparison	Chart.js or CSS flexbox with height percentage bars	Always label axes include values	Atlassian Data Charts
3	2	Bar Chart Horizontal	horizontal bar, ranking, long labels, categories	Categories with long names ranking	Categorical discrete	Long category names, 5+ items, reading left-to-right natural	Few categories time series	15	Team performance competitor analysis	CSS flexbox with width percentage bars	Natural reading direction for labels	Datylon Blog
4	3	Line Chart	line, trend, time series, growth, change over time	Showing trends over continuous time	Time series continuous	Time-based data, showing growth trajectory, 10+ data points	Categorical comparisons	50+ points	Revenue growth MRR user growth	Chart.js line or SVG path element	Include data point markers for screen readers	Tableau Best Practices
5	4	Area Chart	area, cumulative, volume, trend, filled line	Showing volume or magnitude over time	Time series cumulative	Emphasizing magnitude, showing cumulative totals, comparing totals	Precise value comparison	3-4 series	Revenue breakdown market share over time	Chart.js area or SVG path with fill	Use patterns not just colors for series	Data Visualization Guide
6	5	Pie Chart	pie, composition, percentage, parts, whole	Showing parts of a whole	Proportional percentage	2-5 slices, showing simple composition, adds to 100%	More than 6 categories precise comparison	6 max	Market share budget allocation simple splits	CSS conic-gradient or Chart.js pie	Never use 3D always include percentages	FusionCharts Blog
7	6	Donut Chart	donut, composition, percentage, center metric	Parts of whole with center highlight	Proportional percentage	Like pie but need center space for key metric, 2-5 segments	Many categories	6 max	Composition with key stat in center	CSS conic-gradient with inner circle	Same as pie include legend	Modern alternative to pie
8	7	Stacked Bar	stacked, composition, comparison, breakdown	Comparing composition across categories	Categorical + proportional	Showing composition AND comparison, segment contribution	Too many segments precise values	5 segments	Revenue by segment across quarters	Chart.js stacked bar or CSS nested divs	Order segments consistently use legend	Atlassian Data Charts
9	8	Grouped Bar	grouped, clustered, side by side, multi-series	Comparing multiple metrics per category	Multi-series categorical	Direct comparison of 2-3 metrics per category	Too many groups (>4) or categories (>8)	4 groups	Feature comparison pricing tiers	Chart.js grouped bar CSS grid bars	Color code consistently across groups	Data Visualization Best Practices
10	9	100% Stacked Bar	100%, proportion, normalized, percentage	Comparing proportions across categories	Proportional comparative	Comparing percentage breakdown across categories, not absolute values	Showing absolute values	5 segments	Market share comparison percentage breakdown	CSS flexbox 100% width segments	Clearly indicate percentage scale	Proportional analysis
11	10	Funnel Chart	funnel, conversion, stages, drop-off, pipeline	Showing conversion or drop-off through stages	Sequential stage-based	Sales funnel, conversion rates, sequential process with decreasing values	Non-sequential data equal stages	6-8 stages	User conversion sales pipeline	CSS trapezoid shapes or SVG	Label each stage with count and percentage	Marketing/Sales standard
12	11	Gauge Chart	gauge, progress, goal, target, kpi	Showing progress toward a goal	Single metric vs target	Single KPI progress, goal completion, health scores	Multiple metrics	1 metric	Goal progress health score	CSS conic-gradient or arc SVG	Include numeric value not just visual	Dashboard widgets
13	12	Sparkline	sparkline, mini, inline, trend, compact	Showing trend in minimal space	Time series inline	Inline metrics, table cells, compact trend indication	Detailed analysis	N/A	Metric cards with trend indicator	SVG path or canvas inline	Supplement with text for accessibility	Edward Tufte
14	13	Scatter Plot	scatter, correlation, relationship, distribution	Showing relationship between two variables	Bivariate continuous	Correlation analysis, pattern detection, outlier identification	Categorical data simple comparisons	100+ points	Correlation analysis segmentation	Canvas or SVG circles positioned	Include trend line if meaningful	Statistical visualization
15	14	Bubble Chart	bubble, three variables, scatter, size	Showing three variables simultaneously	Trivariate continuous	Three-variable comparison, population/size matters	Simple comparisons	30-50 bubbles	Market analysis with size dimension	SVG circles with varying radius	Legend for size scale essential	Data Visualization Guide
16	15	Heatmap	heatmap, matrix, intensity, correlation, grid	Showing intensity across two dimensions	Matrix intensity	Large data matrices, time-day patterns, correlation matrices	Few data points	Unlimited grid	Usage patterns correlation matrices	CSS grid with background-color intensity	Use colorblind-safe gradients	Datylon Blog
17	16	Waterfall Chart	waterfall, bridge, contribution, breakdown	Showing how values add to a total	Cumulative contribution	Financial analysis, showing positive/negative contributions	Non-additive data	10-15 items	Revenue bridge profit breakdown	CSS positioned bars with connectors	Clear positive/negative color coding	Financial reporting standard
18	17	Treemap	treemap, hierarchy, nested, proportion	Showing hierarchical proportional data	Hierarchical proportional	Nested categories, space-efficient proportions, 2 levels max	Simple comparisons few items	50+ items	Budget breakdown category analysis	CSS grid with calculated areas	Include text labels on larger segments	Ben Shneiderman
19	18	Radar Chart	radar, spider, multi-metric, profile	Comparing multiple metrics for single item	Multi-metric profile	Comparing 5-8 metrics for one or two items, skill profiles	More than 3 items to compare	8 axes max	Feature profile skill assessment	SVG polygon on axes	Ensure scale is clear and consistent	Profile comparison
20	19	Bullet Chart	bullet, target, actual, performance	Showing actual vs target with ranges	KPI with target	Progress against target with qualitative ranges	Simple goal tracking	1-3 per slide	KPI performance with targets	CSS layered bars with markers	Clearly label target and actual	Stephen Few
21	20	Timeline	timeline, chronology, history, milestones	Showing events over time	Event-based temporal	History roadmap milestones, showing progression	Quantitative comparison	10-15 events	Company history product roadmap	CSS flexbox with positioned markers	Ensure logical reading order	Chronological visualization
22	21	Sankey Diagram	sankey, flow, distribution, connections	Showing flow or distribution between nodes	Flow distribution	Showing how values flow from source to destination	Simple distributions	15-20 nodes	User flow budget flow	D3.js or dedicated library	Alternative text description essential	Complex flow visualization
23	22	KPI Card	kpi, metric, number, stat, scorecard	Highlighting single important metric	Single metric	Dashboard hero metrics, emphasizing one key number	Showing trends or comparisons	1 number	Main KPI highlight	Large font-size centered number	Include trend context if relevant	Dashboard design
24	23	Progress Bar	progress, completion, percentage, bar	Showing completion percentage	Single percentage	Simple progress indication, goal completion	Multiple goals comparison	1 per context	Project completion goal progress	CSS width with percentage gradient	Include numeric percentage	UI/UX standard
25	24	Comparison Table	table, comparison, matrix, features	Detailed feature or value comparison	Multi-attribute categorical	Detailed comparison, many attributes, exact values matter	Visual impact storytelling	10-15 rows	Feature matrix pricing comparison	HTML table with CSS styling	Proper table headers and scope	Information design
26	25	Icon Array	icon array, pictogram, proportion, visual	Showing proportions with visual metaphor	Proportional visual	Making statistics tangible (e.g. 1 in 10 people), visual impact	Precise values large numbers	100 icons	Statistics visualization impact slides	CSS grid or flexbox with icons	Describe proportion in text	ISOTYPE Otto Neurath