ui-ux-pro-mcp

No,Data Type,Keywords,Best Chart Type,Secondary Options,Color Guidance,Performance Impact,Accessibility Notes,Library Recommendation,Interactive Level,ChartJS_Config,Recharts_Config,Data_Schema,Mock_Data_Example 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,"{ type: 'line', options: { responsive: true, plugins: { legend: { position: 'top' } }, scales: { x: { type: 'time' }, y: { beginAtZero: true } } } }",<LineChart><XAxis dataKey='time' /><YAxis /><Tooltip /><Legend /><Line type='monotone' dataKey='value' stroke='#0080FF' strokeWidth={2} /></LineChart>,interface DataPoint { time: string; value: number; category?: string; }[],"[{ ""time"": ""2026-01"", ""value"": 400 }, { ""time"": ""2026-02"", ""value"": 600 }]" 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,"{ type: 'bar', options: { responsive: true, indexAxis: 'x', plugins: { legend: { display: true } }, scales: { y: { beginAtZero: true } } } }",<BarChart><XAxis dataKey='category' /><YAxis /><Tooltip /><Legend /><Bar dataKey='value' fill='#8884d8' /></BarChart>,interface DataPoint { category: string; value: number; color?: string; }[],"[{ ""category"": ""A"", ""value"": 100 }, { ""category"": ""B"", ""value"": 200 }]" 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,"{ type: 'doughnut', options: { cutout: '60%', plugins: { legend: { position: 'right' }, tooltip: { enabled: true } } } }",<PieChart><Pie data={data} dataKey='value' nameKey='name' cx='50%' cy='50%' innerRadius={60} outerRadius={80} fill='#8884d8' label /></PieChart>,interface Slice { name: string; value: number; color?: string; }[],"[{ ""name"": ""Mobile"", ""value"": 60 }, { ""name"": ""Desktop"", ""value"": 40 }]" 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,"{ type: 'scatter', options: { responsive: true, plugins: { legend: { display: true } }, scales: { x: { type: 'linear' }, y: { type: 'linear' } } } }",<ScatterChart><XAxis dataKey='x' type='number' /><YAxis dataKey='y' type='number' /><Tooltip /><Scatter data={data} fill='#8884d8' /></ScatterChart>,interface Point { x: number; y: number; z?: number; label?: string; }[],"[{ ""x"": 10, ""y"": 20 }, { ""x"": 15, ""y"": 35 }]" 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,"{ type: 'matrix', options: { responsive: true, plugins: { legend: { display: true } }, scales: { x: { type: 'category' }, y: { type: 'category' } } } }",<ResponsiveContainer><ComposedChart><XAxis dataKey='x' /><YAxis dataKey='y' /><Tooltip /></ComposedChart></ResponsiveContainer>,interface Cell { x: string; y: string; value: number; }[],"[{ ""x"": ""Mon"", ""y"": ""Morning"", ""value"": 5 }, { ""x"": ""Mon"", ""y"": ""Evening"", ""value"": 8 }]" 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,"{ type: 'choropleth', options: { responsive: true, showOutline: true, plugins: { legend: { position: 'bottom' } } } }",Use react-simple-maps: <ComposableMap><Geographies geography={geoUrl}>{geographies.map(geo => <Geography key={geo.rsmKey} geography={geo} />)}</Geographies></ComposableMap>,interface Region { id: string; value: number; name: string; }[],"[{ ""id"": ""US"", ""value"": 100, ""name"": ""United States"" }, { ""id"": ""DE"", ""value"": 50, ""name"": ""Germany"" }]" 7,Funnel/Flow,"funnel, flow, conversion, stages, pipeline","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,"{ type: 'bar', options: { indexAxis: 'y', responsive: true, plugins: { legend: { display: false } }, scales: { x: { stacked: true } } } }",<FunnelChart><Funnel dataKey='value' data={data} isAnimationActive><LabelList position='right' fill='#000' dataKey='name' /></Funnel></FunnelChart>,interface Stage { stage: string; value: number; conversionRate?: number; }[],"[{ ""stage"": ""Visits"", ""value"": 1000 }, { ""stage"": ""Signups"", ""value"": 200 }]" 8,Performance vs Target,"performance, target, gauge, bullet, threshold",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,"{ type: 'doughnut', options: { circumference: 180, rotation: -90, cutout: '75%', plugins: { tooltip: { enabled: false } } } }",<RadialBarChart innerRadius='80%' outerRadius='100%' data={data} startAngle={180} endAngle={0}><RadialBar dataKey='value' fill='#22C55E' /><Legend /></RadialBarChart>,interface GaugeData { value: number; min: number; max: number; target?: number; },"{ ""value"": 75, ""min"": 0, ""max"": 100, ""target"": 80 }" 9,Time-Series Forecast,"time-series, forecast, prediction, confidence, projection",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,"{ type: 'line', options: { responsive: true, plugins: { legend: { position: 'top' } }, scales: { x: { type: 'time' } } } }",<ComposedChart><XAxis dataKey='time' /><YAxis /><Area dataKey='confidence' fill='#8884d8' fillOpacity={0.3} /><Line type='monotone' dataKey='actual' stroke='#0080FF' /><Line type='monotone' dataKey='forecast' stroke='#FF9500' strokeDasharray='5 5' /></ComposedChart>,interface ForecastPoint { time: string; actual: number; forecast: number; confidenceLow: number; confidenceHigh: number; }[],"[{ ""time"": ""2026-Q1"", ""actual"": 100, ""forecast"": 100 }, { ""time"": ""2026-Q2"", ""actual"": null, ""forecast"": 120, ""confidenceLow"": 110, ""confidenceHigh"": 130 }]" 10,Anomaly Detection,"anomaly, detection, outlier, alert, exception",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,"{ type: 'line', options: { responsive: true, plugins: { annotation: { annotations: { anomaly: { type: 'point', backgroundColor: '#FF0000' } } } } } }",<ComposedChart><XAxis dataKey='time' /><YAxis /><Line type='monotone' dataKey='value' stroke='#0080FF' /><Scatter data={anomalies} fill='#FF0000' /></ComposedChart>,interface DataPoint { time: string; value: number; isAnomaly: boolean; }[],"[{ ""time"": ""10:00"", ""value"": 50, ""isAnomaly"": false }, { ""time"": ""10:05"", ""value"": 150, ""isAnomaly"": true }]" 11,Hierarchical/Nested Data,"hierarchical, nested, tree, parent-child, structure",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,"{ type: 'treemap', options: { responsive: true, plugins: { legend: { display: false } }, tree: { spacing: 2 } } }",<Treemap data={data} dataKey='size' aspectRatio={4/3} stroke='#fff' fill='#8884d8'><Tooltip /></Treemap>,interface TreeNode { name: string; size: number; children?: TreeNode[]; },"{ ""name"": ""Root"", ""children"": [{ ""name"": ""A"", ""size"": 100 }, { ""name"": ""B"", ""size"": 50 }] }" 12,Flow/Process Data,"flow, process, sankey, alluvial, transition",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,"{ type: 'sankey', options: { responsive: true, plugins: { tooltip: { enabled: true } } } }",<Sankey data={data} nodeWidth={10} nodePadding={20}><Tooltip /></Sankey>,interface Flow { source: string; target: string; value: number; }[],"[{ ""source"": ""Page A"", ""target"": ""Page B"", ""value"": 50 }, { ""source"": ""Page B"", ""target"": ""Checkout"", ""value"": 20 }]" 13,Cumulative Changes,"cumulative, changes, waterfall, bridge, cascade",Waterfall Chart,"Stacked Bar, Cascade",Increases: #4CAF50. Decreases: #F44336. Start: #2196F3. End: #0D47A1.,⚡ Good,✓ Good - clear directional colors with labels.,"ApexCharts, Highcharts, Plotly",Hover,"{ type: 'bar', options: { responsive: true, plugins: { legend: { display: false } } } }","<BarChart><XAxis dataKey='name' /><YAxis /><Bar dataKey='value'>{data.map((e, i) => <Cell key={i} fill={e.value > 0 ? '#4CAF50' : '#F44336'} />)}</Bar></BarChart>",interface WaterfallItem { category: string; value: number; type?: 'increase' | 'decrease' | 'total'; }[],"[{ ""category"": ""Start"", ""value"": 100 }, { ""category"": ""Sales"", ""value"": 50 }, { ""category"": ""Cost"", ""value"": -30 }]" 14,Multi-Variable Comparison,"multi-variable, comparison, radar, spider, dimensions",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,"{ type: 'radar', options: { responsive: true, plugins: { legend: { position: 'top' } }, scales: { r: { beginAtZero: true } } } }",<RadarChart outerRadius={90} data={data}><PolarGrid /><PolarAngleAxis dataKey='subject' /><PolarRadiusAxis /><Radar dataKey='value' stroke='#0080FF' fill='#0080FF' fillOpacity={0.2} /></RadarChart>,interface RadarPoint { subject: string; A: number; B: number; fullMark: number; }[],"[{ ""subject"": ""Math"", ""A"": 120, ""B"": 110, ""fullMark"": 150 }, { ""subject"": ""History"", ""A"": 98, ""B"": 130, ""fullMark"": 150 }]" 15,Stock/Trading OHLC,"stock, trading, ohlc, candlestick, financial",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,"{ type: 'candlestick', options: { responsive: true, plugins: { legend: { display: false } }, scales: { x: { type: 'time' } } } }",Use recharts-candlestick or custom ComposedChart with Bar and ErrorBar components,interface OHLC { time: string; open: number; high: number; low: number; close: number; }[],"[{ ""time"": ""2026-01-01"", ""open"": 100, ""high"": 110, ""low"": 90, ""close"": 105 }]" 16,Relationship/Connection Data,"relationship, connection, network, graph, nodes",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,"{ type: 'networkGraph', options: { responsive: true, plugins: { legend: { display: true } }, force: { repulsion: 100 } } }",Use react-force-graph or visx for network graphs - not native to Recharts,interface Graph { nodes: { id: string; group: number }[]; links: { source: string; target: string; value: number }[]; },"{ ""nodes"": [{ ""id"": ""A"", ""group"": 1 }, { ""id"": ""B"", ""group"": 2 }], ""links"": [{ ""source"": ""A"", ""target"": ""B"", ""value"": 1 }] }" 17,Distribution/Statistical,"distribution, statistical, box, violin, quartile",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,"{ type: 'boxplot', options: { responsive: true, plugins: { legend: { display: true } } } }",<ComposedChart><XAxis dataKey='category' /><YAxis /><Bar dataKey='range' fill='#BBDEFB' stroke='#1976D2' /><Scatter dataKey='outliers' fill='#F44336' /></ComposedChart>,interface BoxPlot { category: string; min: number; q1: number; median: number; q3: number; max: number; outliers?: number[]; }[],"[{ ""category"": ""Group A"", ""min"": 0, ""q1"": 25, ""median"": 50, ""q3"": 75, ""max"": 100 }]" 18,Performance vs Target (Compact),"performance, target, compact, bullet, indicator",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,"{ type: 'bar', options: { indexAxis: 'y', responsive: true, plugins: { annotation: { annotations: { target: { type: 'line', borderColor: 'black', borderWidth: 3 } } } } } }",<ComposedChart layout='vertical'><YAxis type='category' dataKey='name' /><XAxis type='number' /><Bar dataKey='ranges' stackId='a' fill='#C8E6C9' /><Bar dataKey='actual' fill='#1976D2' /><ReferenceLine x={target} stroke='black' strokeWidth={3} /></ComposedChart>,interface BulletData { title: string; ranges: number[]; measures: number[]; markers: number[]; }[],"[{ ""title"": ""Revenue"", ""ranges"": [150, 225, 300], ""measures"": [220], ""markers"": [250] }]" 19,Proportional/Percentage,"proportional, percentage, waffle, pictogram, ratio",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,"{ type: 'bar', options: { indexAxis: 'y', responsive: true, scales: { x: { stacked: true, max: 100 } } } }",Use @nivo/waffle: <Waffle total={100} data={data} rows={10} columns={10} />,interface WaffleData { id: string; label: string; value: number; color?: string; }[],"[{ ""id"": ""men"", ""label"": ""Men"", ""value"": 30 }, { ""id"": ""women"", ""label"": ""Women"", ""value"": 70 }]" 20,Hierarchical Proportional,"hierarchical, proportional, sunburst, icicle, nested",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,"{ type: 'doughnut', options: { cutout: '0%', plugins: { legend: { display: false } } } }",Use recharts-sunburst or visx for sunburst charts,interface SunburstNode { name: string; value?: number; children?: SunburstNode[]; },"{ ""name"": ""Topic"", ""children"": [{ ""name"": ""Subtopic A"", ""value"": 100 }, { ""name"": ""Subtopic B"", ""value"": 50 }] }" 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,"{ type: 'tree', options: { responsive: true, tree: { orientation: 'horizontal' }, plugins: { legend: { display: false } } } }",Use react-flow: <ReactFlow nodes={nodes} edges={edges} fitView><Background /><Controls /></ReactFlow>,interface DecisionTree { id: string; label: string; parentId?: string; value?: string; }[],"[{ ""id"": ""1"", ""label"": ""Root"" }, { ""id"": ""2"", ""label"": ""Option A"", ""parentId"": ""1"" }]" 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,"{ type: 'scatter3D', options: { responsive: true, scales: { x: { type: 'linear' }, y: { type: 'linear' }, z: { type: 'linear' } } } }",Not supported in Recharts - use @react-three/fiber with drei for 3D,interface Point3D { x: number; y: number; z: number; category?: string; }[],"[{ ""x"": 10, ""y"": 20, ""z"": 30 }, { ""x"": 15, ""y"": 25, ""z"": 10 }]" 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,"{ type: 'line', options: { responsive: true, animation: { duration: 0 }, scales: { x: { type: 'realtime' } } } }",<AreaChart data={streamData} isAnimationActive={false}><XAxis dataKey='time' /><YAxis /><Area type='monotone' dataKey='value' stroke='#00FF00' fill='#00FF00' fillOpacity={0.3} /></AreaChart>,interface StreamData { time: string; value: number; }[],"[{ ""time"": ""12:00:00"", ""value"": 50 }, { ""time"": ""12:00:01"", ""value"": 55 }]" 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,"{ type: 'wordCloud', options: { responsive: true, plugins: { legend: { display: false } } } }","Use react-wordcloud: <WordCloud words={words} options={{ colors: ['#22C55E', '#94A3B8', '#EF4444'] }} />",interface Word { text: string; value: number; sentiment?: 'pos' | 'neg' | 'neu'; }[],"[{ ""text"": ""Good"", ""value"": 100, ""sentiment"": ""pos"" }, { ""text"": ""Bad"", ""value"": 20, ""sentiment"": ""neg"" }]" 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,"{ type: 'sankey', options: { responsive: true, plugins: { tooltip: { enabled: true } } } }",Use react-flow: <ReactFlow nodes={processNodes} edges={processEdges}><Background variant='dots' /><MiniMap /></ReactFlow>,interface ProcessNode { id: string; label: string; type: string; } interface ProcessEdge { source: string; target: string; label?: string; },"{ ""nodes"": [{ ""id"": ""1"", ""label"": ""Start"", ""type"": ""event"" }], ""edges"": [{ ""source"": ""1"", ""target"": ""2"" }] }" 27,Confusion Matrix,"confusion, matrix, ml, classification, model, accuracy",Confusion Matrix Heatmap,"Normalized Matrix, Error Analysis Grid",True Positive/Negative: #22C55E gradient. False: #EF4444 gradient. Diagonal highlight.,⚡ Excellent,✓ Clear labels essential. Include precision/recall metrics.,"Plotly, D3.js, Custom SVG",Hover + Cell Details,"{ type: 'matrix', options: { responsive: true, plugins: { tooltip: { enabled: true } }, scales: { color: { type: 'color' } } } }","Use @nivo/heatmap: <HeatMap data={matrix} keys={labels} indexBy='actual' colors={{ type: 'diverging', scheme: 'red_yellow_green' }} />",interface ConfusionMatrix { actual: string; predicted: string; count: number; }[],"[{ ""actual"": ""True"", ""predicted"": ""True"", ""count"": 100 }, { ""actual"": ""True"", ""predicted"": ""False"", ""count"": 10 }]" 28,KPI Sparkline,"kpi, sparkline, metric, indicator, trend, card",KPI Card with Sparkline,"Metric Card, Stat Box",KPI value: Large #0F172A. Sparkline: #3B82F6. Trend: Green up Red down.,⚡ Excellent,✓ Include numeric values. Trend direction with text.,"Recharts, Tremor, Custom SVG",Hover + Click Drill,"{ type: 'line', options: { responsive: true, plugins: { legend: { display: false } }, scales: { x: { display: false }, y: { display: false } }, elements: { point: { radius: 0 } } } }",<AreaChart width={100} height={40} data={sparkData}><Area type='monotone' dataKey='value' stroke='#3B82F6' fill='#3B82F6' fillOpacity={0.2} /></AreaChart>,interface SparkLine { time: string; value: number; }[],"[{ ""time"": ""1"", ""value"": 10 }, { ""time"": ""2"", ""value"": 15 }, { ""time"": ""3"", ""value"": 8 }]" 29,Radial Gauge,"gauge, speedometer, progress, dial, radial, meter",Radial Gauge / Speedometer,"Bullet Chart, Progress Ring",Zones: Red #EF4444 Yellow #F59E0B Green #22C55E. Needle: #1E293B.,⚡ Good,✓ Add numeric value display. Clear zone labels.,"ApexCharts, D3.js, ECharts",Hover,"{ type: 'doughnut', options: { circumference: 270, rotation: 225, cutout: '80%', plugins: { tooltip: { enabled: false } } } }","<RadialBarChart innerRadius='60%' outerRadius='100%' data={gaugeData} startAngle={225} endAngle={-45}><PolarAngleAxis type='number' domain={[0, 100]} tick={false} /><RadialBar dataKey='value' cornerRadius={10} fill='#22C55E' /></RadialBarChart>",interface GaugeValue { value: number; max: number; unit: string; },"{ ""value"": 80, ""max"": 100, ""unit"": ""km/h"" }" 30,Bullet Progress,"bullet, progress, target, performance, comparison",Bullet Chart,"Gauge, Progress Bar, Bar with Target",Ranges: Light to dark gray gradient. Actual: #3B82F6. Target: Black 2px line.,⚡ Excellent,✓ Excellent accessibility. Clear value labels.,"D3.js, Plotly, Custom SVG",Hover,"{ type: 'bar', options: { indexAxis: 'y', responsive: true, plugins: { annotation: { annotations: { target: { type: 'line', borderColor: '#000', borderWidth: 2 } } } } } }",<ComposedChart layout='vertical'><YAxis type='category' dataKey='name' hide /><XAxis type='number' /><Bar dataKey='poor' stackId='range' fill='#E5E7EB' /><Bar dataKey='ok' stackId='range' fill='#CBD5E1' /><Bar dataKey='good' stackId='range' fill='#94A3B8' /><Bar dataKey='actual' fill='#3B82F6' /><ReferenceLine x={target} stroke='#000' strokeWidth={2} /></ComposedChart>,interface BulletChart { target: number; actual: number; rangeLow: number; rangeMid: number; rangeHigh: number; },"{ ""target"": 90, ""actual"": 85, ""rangeLow"": 0, ""rangeMid"": 50, ""rangeHigh"": 100 }" 31,Stream Flow,"stream, flow, volume, stacked, area, time",Stream Graph,"Stacked Area, ThemeRiver",Color per category. Center-aligned baseline. 60-80% opacity.,⚠ Moderate,⚠ Hard to read exact values. Provide data table.,"D3.js, Nivo, Recharts",Hover + Toggle Layers,"{ type: 'line', options: { responsive: true, scales: { y: { stacked: true } }, elements: { line: { tension: 0.4, fill: true } } } }",<AreaChart stackOffset='silhouette'><XAxis dataKey='time' /><YAxis />{categories.map(cat => <Area type='monotone' dataKey={cat} stackId='1' fill={colors[cat]} fillOpacity={0.7} />)}</AreaChart>,interface StreamLayer { id: string; data: { x: any; y: number }[]; }[],"[{ ""id"": ""Layer A"", ""data"": [{ ""x"": 1, ""y"": 10 }, { ""x"": 2, ""y"": 20 }] }, { ""id"": ""Layer B"", ""data"": [{ ""x"": 1, ""y"": 15 }, { ""x"": 2, ""y"": 25 }] }]" 32,Waterfall Financial,"waterfall, financial, bridge, cumulative, change",Waterfall Chart,"Cascade Chart, Bridge Chart",Increase: #22C55E. Decrease: #EF4444. Total: #3B82F6. Connectors: #94A3B8.,⚡ Good,✓ Good accessibility with clear labels. Show running total.,"ApexCharts, Recharts, Plotly",Hover + Annotations,"{ type: 'bar', options: { responsive: true, plugins: { legend: { display: false } } } }","<BarChart><XAxis dataKey='name' /><YAxis /><Bar dataKey='start' stackId='a' fill='transparent' /><Bar dataKey='value' stackId='a'>{data.map((e, i) => <Cell key={i} fill={e.type === 'increase' ? '#22C55E' : '#EF4444'} />)}</Bar></BarChart>",interface FinancialWaterfall { label: string; amount: number; isTotal?: boolean; }[],"[{ ""label"": ""Product Revenue"", ""amount"": 100 }, { ""label"": ""Services Revenue"", ""amount"": 30 }, { ""label"": ""Total"", ""amount"": 130, ""isTotal"": true }]" 33,Chord Relationships,"chord, relationships, flow, connections, matrix",Chord Diagram,"Sankey, Arc Diagram, Network",Color per group. Arc connections 40% opacity. Hover highlight 100%.,⚠ Moderate,⚠ Complex for screen readers. Provide matrix alternative.,"D3.js (d3-chord), Nivo, Plotly",Hover + Click Filter,"{ type: 'chord', options: { responsive: true, plugins: { tooltip: { enabled: true } }, arc: { borderWidth: 1 } } }",Use @nivo/chord: <Chord matrix={matrix} keys={keys} colors={{ scheme: 'nivo' }} arcOpacity={0.65} ribbonOpacity={0.4} />,interface ChordMatrix { keys: string[]; matrix: number[][]; },"{ ""keys"": [""A"", ""B""], ""matrix"": [[10, 20], [5, 15]] }" 34,Parallel Coordinates,"parallel, coordinates, multivariate, dimensions, comparison",Parallel Coordinates Plot,"Radar Chart, Scatter Matrix",Lines: Category colors 40% opacity. Axes: #64748B. Selected: 100% bright.,⚠ Moderate,⚠ Complex visualization. Limit to 5-8 dimensions. Provide table.,"D3.js, Plotly, Vega-Lite",Brush + Select + Filter,"{ type: 'line', options: { responsive: true, plugins: { legend: { display: true } }, scales: { y: { display: false } } } }",Use @visx/shape ParallelCoordinates or D3.js - not native to Recharts,interface ParallelData { [dimension: string]: number | string; }[],"[{ ""dim1"": 10, ""dim2"": 5, ""category"": ""A"" }, { ""dim1"": 20, ""dim2"": 8, ""category"": ""B"" }]" 35,Marimekko Market,"marimekko, mekko, market, composition, two-dimensional",Marimekko / Mekko Chart,"Treemap, Stacked Bar, Mosaic",Category colors. Width = market size. Height = share. Clear borders.,⚠ Moderate,⚠ Can be confusing. Clear labels essential. Provide breakdown table.,"D3.js, Plotly, ECharts",Hover + Drill,"{ type: 'bar', options: { responsive: true, scales: { x: { stacked: true }, y: { stacked: true, max: 100 } } } }",Use @nivo/marimekko: <Marimekko data={data} id='segment' value='population' dimensions={dimensions} innerPadding={3} />,interface MekkoData { x: string; y: string; value: number; }[],"[{ ""x"": ""Region A"", ""y"": ""Product X"", ""value"": 100 }, { ""x"": ""Region A"", ""y"": ""Product Y"", ""value"": 50 }]" 36,Any/Exploratory,"observable, plot, exploratory, data analysis, declarative, grammar, EDA",Observable Plot,"D3.js, Vega-Lite",Auto-generated semantic scales,⚡ Excellent (lightweight),✓ Built-in accessibility. Semantic color scales.,"Observable Plot for rapid prototyping, declarative grammar",Hover + Pan + Zoom,"{ type: 'plot', options: { responsive: true, marks: [] } }","Plot.plot({ marks: [Plot.dot(data, {x: 'x', y: 'y'})] })",interface ExploratoryData { [key: string]: number | string; }[],"[{ ""x"": 10, ""y"": 20, ""category"": ""A"" }]" 37,React Dashboards,"nivo, react, charts, animated, SSR, server-side, rendering, dashboard",Nivo,"Recharts, Tremor",Built-in color schemes customizable,⚡ Excellent (optimized),✓ Animation + theming. Motion reduced option.,Nivo for rich animated React charts with SSR support,Hover + Click + Drill,"{ type: 'bar', theme: 'nivo', animate: true }",<ResponsiveBar data={data} keys={['value']} indexBy='category' colors={{ scheme: 'nivo' }} animate={true} />,interface NivoData { category: string; value: number; }[],"[{ ""category"": ""A"", ""value"": 100 }, { ""category"": ""B"", ""value"": 200 }]"