ONE-OS/.agents/skills/ui-ux-pro-max/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 Notes	A11y Fallback	Library Recommendation	Interactive Level
2	1	Trend Over Time	trend, time-series, line, growth, timeline, progress	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	AA	Differentiate series by line style (solid/dashed/dotted) not color alone. Add pattern overlays for colorblind users.	Dashed/dotted lines per series; togglable data table with timestamps and values	Chart.js, Recharts, ApexCharts	Hover + Zoom
3	2	Compare Categories	compare, categories, bar, comparison, ranking	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	AAA	Value labels on each bar by default. Sort control for user reordering.	Value labels always visible; provide CSV export	Chart.js, Recharts, D3.js	Hover + Sort
4	3	Part-to-Whole	part-to-whole, pie, donut, percentage, proportion, share	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 %	C	Pie charts fail WCAG for colorblind users. Slices rely on color alone. Avoid as primary chart in a11y contexts.	Must provide stacked bar alternative + percentage data table as mandatory fallback	Chart.js, Recharts, D3.js	Hover + Drill
5	4	Correlation / Distribution	correlation, distribution, scatter, relationship, pattern, cluster	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	B	Provide data table alternative. Combine color + shape distinction for colorblind users.	Data table with correlation coefficient annotation; shape markers (circle/square/triangle) per group	D3.js, Plotly, Recharts	Hover + Brush
6	5	Heatmap / Intensity	heatmap, heat-map, intensity, density, matrix, calendar	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	B	Pattern overlay for colorblind users. Numerical value on hover. Legend must include scale ticks.	Numerical overlay on hover; downloadable grid table with row/column labels	D3.js, Plotly, ApexCharts	Hover + Zoom
7	6	Geographic Data	geographic, map, location, region, geo, spatial, choropleth	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	B	Include text labels for major regions. Provide keyboard navigation between regions.	Region text labels; sortable data table by region name and value; keyboard-navigable regions	D3.js, Mapbox, Leaflet	Pan + Zoom + Drill
8	7	Funnel / Flow	funnel, flow, conversion, drop-off, pipeline, stages	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	AA	Explicit conversion % as text per stage. Stage labels always visible. Linear list view as fallback.	Provide linear list view with stage name + count + drop-off %; keyboard traversal	D3.js, Recharts, Custom SVG	Hover + Drill
9	8	Performance vs Target	performance, target, kpi, gauge, goal, threshold, progress	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	AA	Always show numerical value + % of target as text beside chart. Never rely on color position alone.	Numerical value + % of target shown as visible text; ARIA live region for real-time updates	D3.js, ApexCharts, Custom SVG	Hover
10	9	Time-Series Forecast	forecast, prediction, confidence, band, projection, estimate	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	AA	Toggle between actual-only and forecast views. Legend must distinguish lines beyond color (solid vs dashed).	Toggle actual/forecast independently; legend labels must include line-style description	Chart.js, ApexCharts, Plotly	Hover + Toggle
11	10	Anomaly Detection	anomaly, outlier, spike, alert, detection, monitoring, deviation	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	AA	Use shape marker (not color only) for anomaly points. Add text annotation per anomaly event.	Text alert annotation per anomaly; anomaly summary list panel alongside chart	D3.js, Plotly, ApexCharts	Hover + Alert
12	11	Hierarchical / Nested Data	hierarchy, nested, treemap, parent, children, breakdown, drill	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	C	Poor baseline accessibility. Always provide table alternative as primary view. Label all large areas.	Collapsible tree table as primary view; treemap as supplementary visual only	D3.js, Recharts, ApexCharts	Hover + Drilldown
13	12	Flow / Process Data	flow, process, sankey, distribution, source, target, transfer	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	C	Structural flow charts cannot be conveyed by color alone. Provide flow table. Avoid on mobile.	Flow table (Source → Target → Value); keyboard-traversable node list with tab stops	D3.js (d3-sankey), Plotly	Hover + Drilldown
14	13	Cumulative Changes	waterfall, cumulative, variance, incremental, bridge, delta	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	AA	Color + directional arrow icon per bar (not color alone). Labels on every bar.	Table with running total column; directional arrow icons per row	ApexCharts, Highcharts, Plotly	Hover
15	14	Multi-Variable Comparison	radar, spider, multi-variable, attributes, dimensions, comparison	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	B	Limit axes to 5–8. Always provide grouped bar chart alternative for precise reading.	Grouped bar chart as mandatory alternative; include raw data table	Chart.js, Recharts, ApexCharts	Hover + Toggle
16	15	Stock / Trading OHLC	stock, trading, ohlc, candlestick, finance, price, volume	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	B	Provide OHLC data table. Colorblind: use fill vs outline pattern (bullish = filled, bearish = hollow).	OHLC data table with sortable columns; numeric summary panel (daily change %)	Lightweight Charts (TradingView), ApexCharts	Real-time + Hover + Zoom
17	16	Relationship / Connection Data	network, graph, nodes, edges, connections, relationships, force	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	D	Fundamentally inaccessible without alternative. Never use as sole representation. Always provide list alternative.	Adjacency list table (Node A → Node B → Weight); hierarchical tree view when structure allows	D3.js (d3-force), Vis.js, Cytoscape.js	Drilldown + Hover + Drag
18	17	Distribution / Statistical	distribution, statistical, spread, median, outlier, quartile, boxplot	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	AA	Include stats summary table. Annotate outlier count in chart subtitle.	Stats summary table (min / Q1 / median / Q3 / max / mean); outlier count annotation	Plotly, D3.js, Chart.js (plugin)	Hover
19	18	Performance vs Target (Compact)	bullet, compact, kpi, dashboard, target, benchmark, range	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	AAA	All values always visible as text. Color ranges are labeled with text thresholds not color alone.	Numerical values always visible (not hover-only); color ranges labeled with threshold text	D3.js, Plotly, Custom SVG	Hover
20	19	Proportional / Percentage	waffle, percentage, proportion, progress, filled, grid	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	AA	Better than pie for accessibility. Percentage text label always visible. Each cell has aria-label.	Percentage text always visible; grid cells labeled with aria-label value; provide legend	D3.js, React-Waffle, Custom CSS Grid	Hover
21	20	Hierarchical Proportional	sunburst, hierarchy, nested, proportion, radial, circle	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	C	Poor accessibility beyond 2 levels. Mandatory table alternative required for any production use.	Collapsible indented list with percentages; breadcrumb trail for current drill-down state	D3.js (d3-hierarchy), Recharts, ApexCharts	Drilldown + Hover
22	21	Root Cause Analysis	root cause, decomposition, tree, hierarchy, drill-down, ai-split, attribution	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	AA	Keyboard-navigable expand/collapse. Screen reader announces node value and % contribution.	Keyboard expand/collapse tree; screen reader announces node label + value + % impact	Power BI (native), React-Flow, Custom D3.js	Drill + Expand
23	22	3D Spatial Data	3d, spatial, immersive, terrain, molecular, volumetric, point-cloud	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	D	3D spatial charts are fundamentally inaccessible. Must not be used as primary chart type in any product UI.	Mandatory 2D projection view + data table; do not use as primary chart type in product UI	Three.js, Deck.gl, Plotly 3D	Rotate + Zoom + VR
24	23	Real-Time Streaming	streaming, real-time, ticker, live, velocity, pulse, monitoring	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	B	Pause/resume control required. Current value as large visible text KPI. Respect prefers-reduced-motion.	Pause/resume button required; current value shown as large text KPI; prefers-reduced-motion: freeze animation	Smoothed D3.js, CanvasJS	Real-time + Pause + Zoom
25	24	Sentiment / Emotion	sentiment, emotion, nlp, opinion, feeling, text-analysis	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	C	Word clouds fail screen readers. Never use as sole output of NLP analysis. Always pair with list view.	Sortable list view by frequency with sentiment label column; word cloud as supplementary only	D3-cloud, Highcharts, Nivo	Hover + Filter
26	25	Process Mining	process, mining, variants, path, bottleneck, log, event	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	B	Complex graphs are hard to navigate. Provide path summary text. Highlight top 3 bottlenecks as annotations.	Path summary table (variant → frequency → avg duration); top 3 bottlenecks as text annotation panel	React-Flow, Cytoscape.js, Recharts	Drag + Node-Click