Pattern Name Proposed Nokgridcore Spec (v0.1) Common Elements Component Type Products Compared Review Date Unique / Notable Features Variation Types Attribute Variation
Chart.Line (Trend / Time-Series) Chart.Line.Base, Chart.Line.Multi, Chart.Line.Stacked, Chart.Line.Area X/Y axis, tooltips, legend, smooth or sharp line paths Chart / Trend GA4, Mixpanel, Amplitude, Grafana Nov 10, 2025 Tracks user or system metrics over time; multiple lines compare datasets; hover tooltips show values Single / Multi / Stacked / Area Light / Dark / With Markers / Gradient
Chart.Area (Filled Line) Chart.Area.Base, Chart.Area.Gradient, Chart.Area.Stacked Area under curve, time axis, legend Chart / Trend Amplitude, Mixpanel, GA4 Nov 10, 2025 Focuses on volume visualization and magnitude over time; uses gradient fills Base / Multi / Stacked Light / Dark / Transparent
Chart.Bar (Vertical Comparison) Chart.Bar.Base, Chart.Bar.Grouped, Chart.Bar.Stacked Bars, axes, category labels, gridlines Chart / Comparison Heap, Firebase, Amplitude Nov 10, 2025 Used to compare categories by height; supports stacking and grouping Single / Grouped / Stacked Light / Dark / Dense
Chart.Column (Horizontal Comparison) Chart.Column.Base, Chart.Column.Grouped, Chart.Column.Stacked Horizontal bars, numeric labels Chart / Comparison GA4, Grafana, Heap Nov 10, 2025 Ideal for ranking and sorting comparisons; supports category alignment Base / Grouped / Stacked Light / Dark / Compact
Chart.Pie (Composition Overview) Chart.Pie.Base, Chart.Pie.Donut, Chart.Pie.Exploded Circular segments, percentage labels, legend Chart / Composition GA4, Mixpanel, Amplitude Nov 10, 2025 Represents category share; sometimes explodes slices for focus Base / Donut / Exploded Light / Dark / Flat
Chart.Donut (KPI Blend) Chart.Donut.Base, Chart.Donut.KPI, Chart.Donut.Multi Donut ring, center KPI, category labels Chart / Composition GA4, Amplitude, Heap Nov 10, 2025 Combines visual share with numeric metric; used for engagement or retention Single / Multi / KPI Center Light / Dark / With Label
Chart.Funnel (Conversion Flow) Chart.Funnel.Base, Chart.Funnel.Horizontal, Chart.Funnel.Vertical Steps, drop-off %, progression flow Chart / Conversion Amplitude, Mixpanel Nov 10, 2025 Visualizes conversion from one stage to another; shows drop-off Base / Horizontal / Vertical Light / Dark / Drop-Off
Chart.Stacked (Segment Comparison) Chart.Stacked.Base, Chart.Stacked.100, Chart.Stacked.Horizontal Stacked segments, axis, legend Chart / Comparison Mixpanel, Heap, GA4 Nov 10, 2025 Displays subcategories within a total value Vertical / Horizontal / 100% Light / Dark / Colored
Chart.Heatmap (Density / Activity) Chart.Heatmap.Base, Chart.Heatmap.Sequential, Chart.Heatmap.Diverging Grid cells, color scale, axis labels Chart / Distribution Mixpanel, Grafana, Firebase Nov 10, 2025 Visualizes frequency by intensity; ideal for engagement or schedule data Sequential / Diverging Light / Dark / Gradient
Chart.Scatter (Distribution / Correlation) Chart.Scatter.Base, Chart.Scatter.Bubble, Chart.Scatter.Cluster Dots on X-Y axis, optional trendline Chart / Distribution GA4, Heap, Mixpanel Nov 10, 2025 Correlates two metrics; trendline shows relationship Base / Bubble / Cluster Light / Dark / Clustered
Chart.Bubble (Value Distribution) Chart.Bubble.Base, Chart.Bubble.Multi, Chart.Bubble.Gradient Bubbles sized by value, color legend Chart / Distribution GA4, Heap, Mixpanel Nov 10, 2025 Adds a 3rd variable (size) for multi-dimensional data Single / Multi / Gradient Light / Dark / With Tooltip
Chart.Gauge (Performance Indicator) Chart.Gauge.Base, Chart.Gauge.Half, Chart.Gauge.KPI Semi-circle meter, needle, KPI text Chart / Metric Grafana, Heap Nov 10, 2025 Measures performance vs target; often animated Base / Half / KPI Light / Dark / With Threshold
Chart.Map (Geo Distribution) Chart.Map.Base, Chart.Map.Heat, Chart.Map.Choropleth Map projection, region colors, legend Chart / Geo GA4, Amplitude, Grafana Nov 10, 2025 Shows spatial or regional data intensity Base / Heat / Choropleth Light / Dark / Interactive
Chart.KPITrend (Small Multiples) Chart.KPITrend.Base, Chart.KPITrend.Grid, Chart.KPITrend.Inline Small trend lines with numeric KPI Chart / Metric Amplitude, Mixpanel Nov 10, 2025 Compact KPI cards with inline trends Inline / Grid Light / Dark / Dense
Chart.Progress (Linear / Circular) Chart.Progress.Linear, Chart.Progress.Circular, Chart.Progress.WithLabel Progress bar, fill, numeric label Chart / Metric Heap, Mixpanel Nov 10, 2025 Shows completion or progress over time Linear / Circular Light / Dark / With Label
Chart.Combined (Dual Axis / Mixed) Chart.Combined.Base, Chart.Combined.DualAxis, Chart.Combined.Overlay Bar + Line, two Y-axes Chart / Hybrid Mixpanel, GA4, Amplitude Nov 10, 2025 Mixes volume vs performance data; dual scaling Line-Bar / Dual Axis Light / Dark / Transparent
Chart.Treemap (Hierarchical Composition) Chart.Treemap.Base, Chart.Treemap.Grouped Nested rectangles sized by value Chart / Composition GA4, Grafana Nov 10, 2025 Visualizes hierarchical proportions Base / Grouped Light / Dark / Bordered
Chart.Sankey (Flow Visualization) Chart.Sankey.Base, Chart.Sankey.MultiLevel Nodes and links, proportional flows Chart / Flow GA4, Mixpanel Nov 10, 2025 Visualizes transition or flow between states Base / Multi-Level Light / Dark / With Hover
Chart.TableHybrid (Chart + Data) Chart.TableHybrid.Base, Chart.TableHybrid.Inline, Chart.TableHybrid.Summary Table rows with embedded visuals Chart / Data Amplitude, Heap Nov 10, 2025 Combines charts with tabular layout; ideal for summaries Inline / Summary Light / Dark / Dense