ui-ux-pro-max-skill/cli/assets/data/charts.csv

1	No	Data Type	Keywords	Best Chart Type	Secondary Options	When to Use	When NOT to Use	Data Volume Threshold	Color Guidance	Accessibility Grade	Accessibility Risk	Accessibility Notes	A11y Fallback	Library Recommendation	Interactive Level
2	1	Trend Over Time	trend, time-series, line, growth, timeline, progress, accessible chart, keyboard accessible chart	Line Chart	Area Chart, Smooth Area	Data has a time axis; user needs to observe rise/fall trends or rate of change over a continuous period	Fewer than 4 data points (use stat card); more than 6 series (visual noise); no time dimension exists	<1000 pts: SVG; ≥1000 pts: Canvas + downsampling; >10000: aggregate to intervals	Primary: #0080FF. Multiple series: distinct colors + distinct line styles. Fill: 20% opacity	deprecated: use Accessibility Risk	risk:low	Use solid, dashed, and dotted line styles plus direct series labels; never distinguish series by hue alone.	Visible data table plus concise trend summary. Keyboard: focus reveals hover values; +/- buttons zoom; Reset restores the full range.	Chart.js, Recharts, ApexCharts	Hover + Zoom
3	2	Compare Categories	compare, categories, bar, comparison, ranking, accessible chart, keyboard accessible chart	Bar Chart (Horizontal or Vertical)	Column Chart, Grouped Bar	Comparing discrete categories by magnitude; ranking or ordering is the core insight; categories ≤ 15	Categories > 15 (use table or search); data has time dimension (use line); showing proportions (use waffle/stacked)	<20 categories: vertical bar; 20–50: horizontal bar; >50: paginated table	Each bar: distinct color. Grouped: same hue family. Always sort descending by value	deprecated: use Accessibility Risk	risk:low	Use direct category/value labels and group outlines or patterns; never encode category solely by bar color. Do not rely on color alone.	Visible sortable data table plus concise comparison summary. Keyboard: focus reveals hover values; focusable headers with Enter/Space sort and aria-sort reports direction.	Chart.js, Recharts, D3.js	Hover + Sort
4	3	Part-to-Whole	part-to-whole, pie, donut, percentage, proportion, share, accessible chart, keyboard accessible chart	Pie Chart or Donut	Stacked Bar, Waffle Chart	≤5 categories; one dominant segment vs rest; emphasis on visual proportion over exact values	Categories > 5; slice differences < 5% (visually indistinguishable); user needs precise values; accessibility-first context	Max 6 slices; beyond that switch to stacked bar 100%	5–6 max colors. Contrasting palette. Largest slice at 12 o'clock. Always label slices with %	deprecated: use Accessibility Risk	risk:high	Pie charts do not inherently fail WCAG; unlabeled color-only slices are inaccessible. Use direct labels and patterns, with a non-pie fallback. Do not rely on color alone.	Percentage data table and concise part-to-whole summary; offer a stacked bar view. Keyboard: focus reveals slice values; Enter/Space drills in; Back button returns.	Chart.js, Recharts, D3.js	Hover + Drill
5	4	Correlation / Distribution	correlation, distribution, scatter, relationship, pattern, cluster, accessible chart, keyboard accessible chart	Scatter Plot or Bubble Chart	Heat Map, Matrix	Exploring relationship between two continuous variables; identifying clusters or outliers in a dataset	Variables are categorical (use grouped bar); fewer than 20 points (patterns aren't meaningful); mobile-primary context	<500 pts: SVG; 500–5000: Canvas at 0.6–0.8 opacity; >5000: hexbin or aggregate first	Color axis: gradient (blue → red). Bubble size: relative to 3rd variable. Opacity: 0.6–0.8 to show density	deprecated: use Accessibility Risk	risk:conditional	Combine marker shapes with direct group labels; color may reinforce but must not be the only distinction.	Visible data table plus correlation summary. Keyboard: focus reveals point values; labeled start/end range inputs replace brush dragging.	D3.js, Plotly, Recharts	Hover + Brush
6	5	Heatmap / Intensity	heatmap, heat-map, intensity, density, matrix, calendar, accessible chart, keyboard accessible chart	Heat Map or Choropleth	Grid Heat Map, Bubble Heat	Showing intensity/density across a 2D grid; time-based patterns (e.g., activity by hour × day)	Fewer than 20 cells (use bar); user needs to read exact values; colorblind users without pattern fallback	Up to 10,000 cells efficiently; beyond that aggregate; calendar heatmap: 365 cells max per SVG	Gradient: Cool (blue) to Hot (red). Divergent scale for ±data. Always include numeric color legend	deprecated: use Accessibility Risk	risk:conditional	Print values or symbols in cells and use texture/labels in addition to the color scale. Do not rely on color alone.	Grid data table plus intensity summary. Keyboard: focus reveals cell values; +/- buttons zoom; Reset restores the grid.	D3.js, Plotly, ApexCharts	Hover + Zoom
7	6	Geographic Data	geographic, map, location, region, geo, spatial, choropleth, accessible chart, keyboard accessible chart	Choropleth Map or Bubble Map	Geographic Heat Map	Data has a regional/location dimension; spatial distribution is the core insight for the user	Regions have very different sizes making visual comparison misleading (use bar); mobile-primary context	<1000 regions: SVG; ≥1000: Canvas/WebGL (Deck.gl); global maps: tile-based rendering	Single color gradient per region group. Categorized colors for discrete types. Legend with clear scale breaks	deprecated: use Accessibility Risk	risk:conditional	Label regions directly and pair fills with boundaries or patterns; location meaning cannot depend on color alone.	Sortable region table plus geographic summary. Keyboard: arrow keys or labeled pan buttons move the map; +/- buttons zoom; Enter drills into a focused region; Back returns.	D3.js, Mapbox, Leaflet	Pan + Zoom + Drill
8	7	Funnel / Flow	funnel, flow, conversion, drop-off, pipeline, stages, accessible chart, keyboard accessible chart	Funnel Chart or Sankey	Waterfall (for flows)	Sequential multi-stage process; showing conversion or drop-off rates between defined stages	Stages aren't sequential; values don't decrease monotonically (use bar); fewer than 3 stages	3–8 stages optimal; beyond 8 stages group minor steps into 'Other'	Stages: single color gradient (start → end). Show conversion % between each stage. Highlight biggest drop	deprecated: use Accessibility Risk	risk:conditional	Keep stage names and values visible and distinguish stages with text and boundaries, not only a gradient. Do not rely on color alone.	Linear stage table/list plus conversion summary. Keyboard: focus reveals stage values; Enter/Space drills in; Back returns.	D3.js, Recharts, Custom SVG	Hover + Drill
9	8	Performance vs Target	performance, target, kpi, gauge, goal, threshold, progress, accessible chart, keyboard accessible chart	Gauge Chart or Bullet Chart	Dial, Thermometer	Single KPI measured against a defined target or threshold; dashboard summary context	No target or benchmark exists; comparing multiple KPIs at once (use bullet chart grid)	Single metric per gauge; for 3+ KPIs use bullet chart grid layout	Performance: Red → Yellow → Green gradient. Target: marker line. Threshold zones clearly differentiated	deprecated: use Accessibility Risk	risk:low	Place the number and target text beside the gauge and label threshold zones; red/yellow/green alone is insufficient.	Visible KPI/target text and a one-row data table plus status summary. Keyboard: focus reveals the same detail as hover.	D3.js, ApexCharts, Custom SVG	Hover
10	9	Time-Series Forecast	forecast, prediction, confidence, band, projection, estimate, accessible chart, keyboard accessible chart	Line with Confidence Band	Ribbon Chart	Historical data + model predictions; communicating uncertainty range to non-technical stakeholders	No historical baseline; prediction confidence is too low to be useful; audience is not data-literate	Keep historical window to 30–90 days for readability; forecast horizon ≤ 30% of visible x-axis range	Actual: solid line #0080FF. Forecast: dashed #FF9500. Confidence band: 15% opacity fill same hue	deprecated: use Accessibility Risk	risk:conditional	Use solid actual and dashed forecast lines, direct labels, and a named confidence range; hue alone is insufficient.	Visible forecast table plus uncertainty summary. Keyboard: focus reveals hover values; buttons toggle actual/forecast; +/- buttons zoom; Reset restores range.	Chart.js, ApexCharts, Plotly	Hover + Toggle
11	10	Anomaly Detection	anomaly, outlier, spike, alert, detection, monitoring, deviation, accessible chart, keyboard accessible chart	Line Chart with Highlights	Scatter with Alert	Monitoring a time-series for outliers; alerting users to unexpected spikes or dips in operational data	Anomalies are predefined categories (use bar with highlight); real-time context without a pause control	Stream at ≤60fps with Canvas; batch: up to 10,000 pts; mark anomalies as a separate data layer	Normal: #0080FF solid line. Anomaly marker: #FF0000 circle + filled. Alert band: #FFF3CD background zone	deprecated: use Accessibility Risk	risk:conditional	Mark anomalies with a distinct shape and text annotation as well as color. Do not rely on color alone.	Anomaly event list/table plus narrative alert summary. Keyboard: focus reveals point details; alerts are available in the persistent list without hover.	D3.js, Plotly, ApexCharts	Hover + Alert
12	11	Hierarchical / Nested Data	hierarchy, nested, treemap, parent, children, breakdown, drill, accessible chart, keyboard accessible chart	Treemap	Sunburst, Nested Donut, Icicle	Showing size relationships within a hierarchy; overview of proportional structure (e.g., budget breakdown)	Hierarchy depth > 3 levels (too complex to read); user needs to compare sibling values precisely	<200 nodes: SVG; 200–1000: Canvas; >1000: paginate or pre-filter before rendering	Parent nodes: distinct hues. Children: lighter shades of same hue. White separator borders: 2–3px	deprecated: use Accessibility Risk	risk:high	Label hierarchy nodes and use borders/patterns as well as hue; make the tree table the primary accessible view. Do not rely on color alone.	Collapsible tree table plus hierarchy summary; treemap remains supplementary. Keyboard: focus reveals hover values; Enter/Space drills or expands; Back collapses/returns.	D3.js, Recharts, ApexCharts	Hover + Drilldown
13	12	Flow / Process Data	flow, process, sankey, distribution, source, target, transfer, accessible chart, keyboard accessible chart	Sankey Diagram	Alluvial, Chord Diagram	Showing how quantities flow between nodes; multi-source multi-target distribution	Flow directions form loops (use network graph); fewer than 3 source-target pairs; mobile-primary context	<50 flows: SVG; ≥50: Canvas; >200 flows: aggregate minor flows into 'Other' node	Gradient from source to target color. Flow opacity: 0.4–0.6. Node labels always visible	deprecated: use Accessibility Risk	risk:conditional	Label source, target, and value; use line style or node symbols in addition to gradient color. Do not rely on color alone.	Source-to-target flow table plus flow summary. Keyboard: focus reveals hover values; Enter/Space drills into a node; Back returns.	D3.js (d3-sankey), Plotly	Hover + Drilldown
14	13	Cumulative Changes	waterfall, cumulative, variance, incremental, bridge, delta, accessible chart, keyboard accessible chart	Waterfall Chart	Stacked Bar, Cascade	Showing how individual positive/negative components add up to a final total (e.g., P&L, budget variance)	Changes are not additive; more than 12 bars (readability breaks); audience expects a simple total	4–12 bars optimal; beyond 12 aggregate minor items into a single 'Other' bar	Increases: #4CAF50. Decreases: #F44336. Start total: #2196F3. End total: #0D47A1. Running total line: dashed	deprecated: use Accessibility Risk	risk:low	Pair increase/decrease bars with signed values and directional icons, not red/green alone. Do not rely on color alone.	Running-total table plus variance summary. Keyboard: focus reveals the same value as hover.	ApexCharts, Highcharts, Plotly	Hover
15	14	Multi-Variable Comparison	radar, spider, multi-variable, attributes, dimensions, comparison, accessible chart, keyboard accessible chart	Radar / Spider Chart	Parallel Coordinates, Grouped Bar	Comparing multiple entities across the same fixed set of attributes (e.g., product feature comparison)	Axes > 8 (unreadable); values need precise comparison (use grouped bar); audience unfamiliar with radar charts	2–3 datasets maximum per chart; 5–8 axes; beyond 8 axes switch to parallel coordinates	Single dataset: #0080FF at 20% fill. Multiple: distinct hues with 30% fill. Border: full opacity	deprecated: use Accessibility Risk	risk:conditional	Use line styles, point shapes, and direct series labels in addition to color. Do not rely on color alone.	Raw data table and grouped-bar alternative plus comparison summary. Keyboard: focus reveals values; buttons toggle series.	Chart.js, Recharts, ApexCharts	Hover + Toggle
16	15	Stock / Trading OHLC	stock, trading, ohlc, candlestick, finance, price, volume, accessible chart, keyboard accessible chart	Candlestick Chart	OHLC Bar, Heikin-Ashi	Financial time-series with Open/High/Low/Close data; trading or investment product context only	Non-financial audience; no OHLC data available (use line chart); accessibility-first context	Real-time: Canvas required. Historical: paginate by time range. Max 500 candles visible at once	Bullish: #26A69A. Bearish: #EF5350. Volume bars: 40% opacity below. Body fill vs hollow for OHLC style	deprecated: use Accessibility Risk	risk:conditional	Use filled versus hollow candles and OHLC text values; bullish/bearish meaning cannot depend on color. Do not rely on color alone.	Sortable OHLC table plus daily-change summary. Keyboard: focus reveals candle values; +/- buttons zoom; Reset restores range; live updates do not steal focus.	Lightweight Charts (TradingView), ApexCharts	Real-time + Hover + Zoom
17	16	Relationship / Connection Data	network, graph, nodes, edges, connections, relationships, force, accessible chart, keyboard accessible chart	Network Graph	Hierarchical Tree, Adjacency Matrix	Mapping connections between entities; network topology or social graph exploration context	Node count > 500 without clustering pre-applied; user needs precise connection counts; mobile context	≤100 nodes: SVG; 101–500: Canvas; >500: must apply clustering/LOD before rendering	Node types: categorical colors. Edges: #90A4AE at 60% opacity. Highlight path: #F59E0B	deprecated: use Accessibility Risk	risk:high	Use labeled node types, shapes, and edge styles in addition to color; the adjacency view is the accessible source of truth. Do not rely on color alone.	Adjacency list/table and relationship summary; tree view when applicable. Keyboard: focus reveals node details; Enter drills; Move up/down/left/right buttons replace drag.	D3.js (d3-force), Vis.js, Cytoscape.js	Drilldown + Hover + Drag
18	17	Distribution / Statistical	distribution, statistical, spread, median, outlier, quartile, boxplot, accessible chart, keyboard accessible chart	Box Plot	Violin Plot, Beeswarm	Showing spread, median, and outliers of a dataset; comparing distributions across multiple groups	Fewer than 20 data points per group (distribution is not meaningful); audience unfamiliar with statistical charts	Any sample size; aggregated representation so rendering is ⚡ Excellent at any volume	Box fill: #BBDEFB. Border: #1976D2. Median line: #D32F2F bold. Outlier dots: #F44336	deprecated: use Accessibility Risk	risk:low	Label median, quartiles, whiskers, and outliers directly; do not use color alone for statistical roles.	Statistics table plus distribution summary. Keyboard: focus reveals the same statistics as hover.	Plotly, D3.js, Chart.js (plugin)	Hover
19	18	Performance vs Target (Compact)	bullet, compact, kpi, dashboard, target, benchmark, range, accessible chart, keyboard accessible chart	Bullet Chart	Gauge, Progress Bar	Dashboard with multiple KPIs side by side; space-constrained contexts where a gauge is too large	Single KPI with emphasis (use gauge); data has no defined target range; fewer than 3 KPIs	Ideal for 3–10 bullet charts in a grid; scales to any count efficiently	Qualitative ranges: #FFCDD2 / #FFF9C4 / #C8E6C9 (bad/ok/good). Performance bar: #1976D2. Target: black 3px marker	deprecated: use Accessibility Risk	risk:low	Label every qualitative range and target with text; color is supplementary.	Visible KPI/target table plus status summary. Keyboard: focus reveals the same detail as hover.	D3.js, Plotly, Custom SVG	Hover
20	19	Proportional / Percentage	waffle, percentage, proportion, progress, filled, grid, accessible chart, keyboard accessible chart	Waffle Chart	Pictogram, Stacked Bar 100%	Showing what fraction of a whole is filled; percentage progress in a visually engaging and accessible format	More than 5 categories (use stacked bar); exact values matter over visual proportion; very tight space	10×10 grid standard (100 cells); for > 5 categories switch to stacked 100% bar	3–5 categories max. 2–3px gap between cells. Each category a distinct accessible color pair	deprecated: use Accessibility Risk	risk:low	Label each category and percentage and add patterns or symbols; filled-cell color alone is insufficient.	Percentage table/list plus part-to-whole summary. Keyboard: focus reveals each cell value.	D3.js, React-Waffle, Custom CSS Grid	Hover
21	20	Hierarchical Proportional	sunburst, hierarchy, nested, proportion, radial, circle, accessible chart, keyboard accessible chart	Sunburst Chart	Treemap, Icicle, Circle Packing	Exploring nested proportions where both hierarchy and relative size matter (e.g., org spend breakdown)	More than 3 hierarchy levels (outer rings become unreadable); precision matters over overview; mobile	<100 nodes: SVG; 100–500: Canvas; >500: filter to top N before rendering	Center to outer: darker to lighter hue. Each level 15–20% lighter. Contrasting border between sectors	deprecated: use Accessibility Risk	risk:high	Label hierarchy levels and segments and use boundaries/patterns as well as hue; the indented list is primary. Do not rely on color alone.	Collapsible indented list/table plus hierarchy summary and breadcrumbs. Keyboard: Enter/Space drills or expands; Back button returns; focus reveals hover detail.	D3.js (d3-hierarchy), Recharts, ApexCharts	Drilldown + Hover
22	21	Root Cause Analysis	root cause, decomposition, tree, hierarchy, drill-down, ai-split, attribution, accessible chart, keyboard accessible chart	Decomposition Tree	Decision Tree, Flow Chart	Decomposing a metric into contributing factors; AI-assisted analysis or BI drill-down scenarios	No clear parent-child causal relationship; audience expects a summary rather than exploration	Up to 5 levels deep; limit visible nodes to 20 per level for readability; lazy-load deeper levels	Positive impact nodes: #2563EB. Negative impact nodes: #EF4444. Neutral connectors: #94A3B8	deprecated: use Accessibility Risk	risk:low	Name each node and contribution and use shapes/connector styles in addition to color. Do not rely on color alone.	Expandable tree table plus root-cause summary. Keyboard: Enter/Space drills and expands; Back collapses; dedicated expand/collapse buttons expose the same operations.	Power BI (native), React-Flow, Custom D3.js	Drill + Expand
23	22	3D Spatial Data	3d, spatial, immersive, terrain, molecular, volumetric, point-cloud, accessible chart, keyboard accessible chart	3D Scatter / Surface Plot	Volumetric Rendering, Point Cloud	Scientific/engineering context where Z-axis carries essential info not expressible in 2D	2D projection conveys the same insight; mobile context; accessibility-required environments; standard business dashboards	WebGL required. Deck.gl: up to 1M points. Three.js: LOD required beyond 50,000 pts	Depth cues: lighting and shading. Z-axis: color gradient (cool → warm). Transparent overlapping: opacity 0.4	deprecated: use Accessibility Risk	risk:high	Use labels, shapes, and depth-independent cues; color and 3D position cannot be the only carriers of meaning.	Mandatory 2D projection, data table, and spatial summary. Keyboard: rotate/pan buttons and +/- zoom controls replace pointer/VR manipulation; Reset returns the camera.	Three.js, Deck.gl, Plotly 3D	Rotate + Zoom + VR
24	23	Real-Time Streaming	streaming, real-time, ticker, live, velocity, pulse, monitoring, accessible chart, keyboard accessible chart	Streaming Area Chart	Ticker Tape, Moving Gauge	Live monitoring dashboards; IoT/ops data updating at ≥1 Hz; user needs current value at a glance	Update frequency < 1/min (use periodic-refresh line chart); flashing content without reduced-motion support	Canvas/WebGL required. Buffer last 60–300s of data. Downsample older data on scroll	Current pulse: #00FF00 (dark theme) or #0080FF (light theme). History: fading opacity. Grid: dark background	deprecated: use Accessibility Risk	risk:conditional	Show the current value and status text and use line styles or markers in addition to color. Do not rely on color alone.	Streaming data table plus current-value/trend summary. Keyboard: Pause/Resume button controls updates; focus reveals values; +/- buttons zoom; Reset restores range.	Smoothed D3.js, CanvasJS	Real-time + Pause + Zoom
25	24	Sentiment / Emotion	sentiment, emotion, nlp, opinion, feeling, text-analysis, accessible chart, keyboard accessible chart	Word Cloud with Sentiment	Sentiment Arc, Radar Chart	NLP output visualization; exploratory analysis of text corpus sentiment; frequency-weighted keyword overview	Precise values matter (word size is inherently imprecise); screen-reader context; corpus < 50 items	50–5000 terms optimal. Beyond 5000: apply top-N filtering before render. Avoid on mobile	Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Word size maps to frequency	deprecated: use Accessibility Risk	risk:high	Expose every term, count, and sentiment as text; size and color are supplementary only.	Sortable term table/list plus sentiment summary; word cloud is supplementary. Keyboard: focus reveals word details; labeled controls filter with Space/Enter.	D3-cloud, Highcharts, Nivo	Hover + Filter
26	25	Process Mining	process, mining, variants, path, bottleneck, log, event, accessible chart, keyboard accessible chart	Process Map / Graph	Directed Acyclic Graph (DAG), Petri Net	Analyzing event logs to visualize actual process flows; identifying bottlenecks and deviations in ops/product funnels	No event log data available; audience expects a static flowchart (use diagram tool); node count > 100 without pre-filtering	<30 nodes: SVG; 30–100: Canvas; >100: apply variant filtering (top 80% of cases) before rendering	Happy path: #10B981 thick line. Deviations: #F59E0B thin line. Bottleneck nodes: #EF4444 fill	deprecated: use Accessibility Risk	risk:conditional	Label nodes and paths and use shapes/line styles in addition to color; bottlenecks require text annotations. Do not rely on color alone.	Path summary table plus bottleneck narrative. Keyboard: Move buttons replace drag; focus reveals node details; Enter activates a node; Back returns.	React-Flow, Cytoscape.js, Recharts	Drag + Node-Click