Featured charts A quick visual audit lane for the most common chart decisions. Live runtime previews
Rottay
modern
Core charts for comparisons, trends, and part-to-whole stories.
simple decisions
dashboard modules
high-frequency reporting
Charts for distributions, multivariate shape, and target tracking.
performance review
quality analysis
benchmarking
Charts that explain movement across stages, deltas, and weighted transitions.
pipelines
financial storytelling
process analysis
Charts that foreground time, cadence, continuity, and schedule.
planning
activity monitoring
trend compression
Charts that use position and intensity to explain concentration.
occupancy
response time grids
usage matrices
Charts for nested proportions and parent-child relationships.
portfolio mix
category analysis
taxonomy insight
Charts that reveal connections between entities, services, or actors.
system maps
network effects
dependency analysis
Charts that compress targets, thresholds, and actuals into fast executive reads.
scorecards
performance snapshots
goal tracking
Density normal Platform Flagship
Landing
Playground
Foundations first, then primitives, patterns, structures, and surfaces. Keep this rail legible enough to scan without hunting. Runtime fingerprint Token readout from the active provider chain.
Live DS
Runtime
Rottay / Modern Platform Flagship
Primary
#0A0A0A Secondary #6B6B6B
Density
normal Border-light cards
Compact runtime evidence across 3+ token signals.
Charts should prove runtime behavior before they try to look cinematic These chart pages should help teams choose the right shape for the story, validate behavior under the active docs provider, and understand which data contract each chart expects. The live previews below inherit the current showroom runtime. The guidance cards are here to frame the decision, not to simulate a separate charts brand.
Basic family 5 chart types
Core charts for comparisons, trends, and part-to-whole stories. simple decisions
dashboard modules
Statistical family 3 chart types
Charts for distributions, multivariate shape, and target tracking. performance review
quality analysis
Flow family 3 chart types
Charts that explain movement across stages, deltas, and weighted transitions. pipelines
financial storytelling
Runtime check Provider-aligned
These cards render through the same provider as the rest of the docs. If engine or tenant changes do not show up here, the charts are not proving real runtime behavior.
Bar chart containing 5 data items. Vertical orientation.
Use arrow keys to move through summary items, Home to jump to the first item, and End to jump to the last item.
Active data point: Label: Engineering, Value: 45
Label: Engineering, Value: 45 Label: Sales, Value: 32 Label: Marketing, Value: 28 Label: Design, Value: 19 Label: Support, Value: 15 Bar chart data summary Label Value Engineering 45 Sales 32 Marketing 28 Design 19 Support 15
Bar chart Bar chart containing 5 data items. Vertical orientation.
Best when category comparison is the main question and exact differences matter.
Line chart containing 6 data items.
Use arrow keys to move through summary items, Home to jump to the first item, and End to jump to the last item.
Active data point: Series: Users, X: Jan, Y: 120
Series: Users, X: Jan, Y: 120 Series: Users, X: Feb, Y: 180 Series: Users, X: Mar, Y: 250 Series: Users, X: Apr, Y: 310 Series: Users, X: May, Y: 420 Series: Users, X: Jun, Y: 380 Line chart data summary Series X Y Users Jan 120 Users Feb 180 Users Mar 250 Users Apr 310 Users May 420 Users Jun 380
Line chart Line chart containing 6 data items.
Use when trend and continuity matter more than isolated categorical comparison. Chart selection rubric Start with the question
Is the user comparing categories, tracking time, spotting outliers, or understanding flow? Then inspect the data shape
Cardinality, continuity, hierarchy, and target-vs-actual all point toward different chart families. Then judge readability
A premium chart is not just animated. It makes the story clearer at a glance.
Multi-axis spider/radar chart for multivariate comparison Best for performance review
quality analysis
benchmarking
Arc gauge with segments and needle for KPI targets Best for performance review
quality analysis
benchmarking
Frequency distribution with d3.bin bucketing standard
density
cumulative
Best for performance review
quality analysis
benchmarking
Stage-based funnel for conversion pipelines Best for pipelines
financial storytelling
process analysis
Running total chart with increase, decrease, and total bars Best for pipelines
financial storytelling
process analysis
Flow diagram showing weighted relationships between nodes Best for pipelines
financial storytelling
process analysis
Horizontal bar timeline for project scheduling and dependencies Best for planning
activity monitoring
trend compression
Compact inline SVG trend chart with area fill and end dot Best for planning
activity monitoring
trend compression
Daily activity grid showing value intensity over calendar months Best for planning
activity monitoring
trend compression
Matrix grid with color-coded intensity values Best for occupancy
response time grids
usage matrices
Nested rectangles representing hierarchical data proportions Best for portfolio mix
category analysis
taxonomy insight
Force-directed node-link diagram for relationships Best for system maps
network effects
dependency analysis
Compact chart comparing actual value against target with range bands Best for scorecards
performance snapshots
goal tracking
Primitives 97 documented routes
Structures 21 documented routes
Surfaces 36 documented routes
Verticals 3 documented routes
Playground 1 documented routes
Developers 2 documented routes
rounded top bar · solid dividers
Rottay
Modern
Pie chart containing 3 data items. Rendered as a donut chart.
Use arrow keys to move through summary items, Home to jump to the first item, and End to jump to the last item.
Active data point: Label: Desktop, Value: 55, Percentage: 55.0%
Label: Desktop, Value: 55, Percentage: 55.0% Label: Mobile, Value: 30, Percentage: 30.0% Label: Tablet, Value: 15, Percentage: 15.0% Pie chart data summary Label Value Percentage Desktop 55 55.0% Mobile 30 30.0% Tablet 15 15.0%
Pie chart Pie chart containing 3 data items. Rendered as a donut chart.
Use sparingly for a few parts of a whole where visual proportion is more useful than precision.
Area chart containing 4 data items. Independent series.
Use arrow keys to move through summary items, Home to jump to the first item, and End to jump to the last item.
Active data point: Series: Revenue, X: Q1, Y: 45000
Series: Revenue, X: Q1, Y: 45000 Series: Revenue, X: Q2, Y: 52000 Series: Revenue, X: Q3, Y: 61000 Series: Revenue, X: Q4, Y: 73000 Area chart data summary Series X Y Revenue Q1 45000 Revenue Q2 52000 Revenue Q3 61000 Revenue Q4 73000
Area chart Area chart containing 4 data items. Independent series.
Useful when cumulative volume should feel present while the trend line remains readable.
Scatter Chart Basic Preview
Scatter chart containing 6 data items. Bubble mode enabled. Trend line shown. Grid lines visible. X axis: Revenue ($K). Y axis: Growth (%).
Use arrow keys to move through summary items, Home to jump to the first item, and End to jump to the last item.
Active data point: Label: A, X: 10, Y: 20, Size: 40
Label: A, X: 10, Y: 20, Size: 40 Label: B, X: 25, Y: 35, Size: 80 Label: C, X: 40, Y: 15, Size: 120 Label: D, X: 55, Y: 45, Size: 60 Label: E, X: 70, Y: 30, Size: 100 Label: F, X: 30, Y: 50, Size: 50 Scatter chart data summary Label X Y Size A 10 20 40 B 25 35 80 C 40 15 120 D 55 45 60 E 70 30 100 F 30 50 50
Scatter chart Scatter chart containing 6 data items. Bubble mode enabled. Trend line shown. Grid lines visible. X axis: Revenue ($K). Y axis: Growth (%).
Use when the relationship between two measures matters and size can add a third dimension.
Point distribution across two axes Best for simple decisions
dashboard modules
high-frequency reporting