LINE · MULTI-SERIES
Standard Product Trend
#line
QA reference surface · 95 deterministic fixtures
Chart Laboratory
Every production example and demanding dataset, grouped by renderer. Use this page for exploratory QA, responsive inspection, interaction checks, and visual regression review.
Line & Area
Standard, filled, signed, fractional, dense, flat, and frameless line rendering.
LINE · REGION FILL
Gradient Multi-Series
#line-gradient
ANNOTATION · REGION
Healthy Operating Range
#line-region
ANNOTATION · MARKER
Target Threshold
#line-marker
EDGE · PRECISION
Small Fractional Values
#fractions
EDGE · ZERO CROSSING
Signed Signals
#signed-lines
EDGE · DENSE
Forty-Eight Categories
#dense-line
EDGE · FLAT + ZERO
Unchanging Series
#flat-values
FRAMELESS · LINE
No Chart Chrome
#spark-line
FRAMELESS · AREA
Filled, No Chart Chrome
#spark-area
Annotation Stress
Fixed annotation placement under deliberate collisions with points, vertical and horizontal bars, dense regions, and long labels.
MIXED · POINTS + BARS
Labels Across Points and Columns
#annotation-collision
BAR · VERTICAL COLLISIONS
Labels Across Grouped Columns
#annotation-bars-vertical
BAR · HORIZONTAL COLLISIONS
Labels Across Horizontal Bars
#annotation-bars-horizontal
ANNOTATION · THREE-ZONE PARTITION
Green, Yellow, and Red Operating Zones
#annotation-regions-experimental
Bar
Vertical, horizontal, grouped, stacked, signed, large-value, localized, and frameless bars.
BAR · VERTICAL
Weekly Categories
#bar-vertical
BAR · HORIZONTAL
Grouped Regions
#bar-horizontal
BAR · STACKED
Stacked Workflow
#bar-horizontal-stacked
EDGE · SIGNED
Losses, Zero, and Gains
#negative-bars
EDGE · LARGE SCALE
Millions and Long Labels
#large-values
EDGE · LOCALIZATION
Multilingual Categories
#absurd-labels
FRAMELESS · BAR
No Chart Chrome
#spark-bar
Mixed Axes
Bar and line series sharing a plot, including signed data and a secondary axis.
MIXED · BAR + LINES
Plan and Capacity
#mixed
MIXED · DUAL AXIS
Signed Movement
#mixed-signed
XY Plots
Coordinate relationships with and without a third magnitude dimension.
SCATTER
Two-Dimensional Relationship
#scatter
BUBBLE
Relationship With Magnitude
#bubble
Radial
Comparison and composition across radar, polar area, pie, donut, and percentage renderers.
RADAR
Multidimensional Comparison
#radar
POLAR AREA
Radial Magnitude
#polar
PIE
Composition
#pie
DONUT
Composition With Center
#donut
PERCENTAGE
Compact Allocation
#percentage
Time & Calendar
Scheduled intervals and calendar activity across quarterly and annual ranges.
TIMESHEET
Overlapping Release Tasks
#timesheet
HEATMAP
Full-Year Activity
#heatmap
HEATMAP · QUARTER
Three-Month Activity
#heatmap-quarter
Background Bounds
One example per public chart type. The gray host has no padding, making the exact chart boundary visible.
LINE · BOUNDS
Zero-Padding Host
#background-line
BAR · BOUNDS
Zero-Padding Host
#background-bar
MIXED · BOUNDS
Zero-Padding Host
#background-mixed
SCATTER · BOUNDS
Zero-Padding Host
#background-scatter
BUBBLE · BOUNDS
Zero-Padding Host
#background-bubble
RADAR · BOUNDS
Zero-Padding Host
#background-radar
POLAR AREA · BOUNDS
Zero-Padding Host
#background-polar-area
PIE · BOUNDS
Zero-Padding Host
#background-pie
DONUT · BOUNDS
Zero-Padding Host
#background-donut
PERCENTAGE · BOUNDS
Zero-Padding Host
#background-percentage
TIMESHEET · BOUNDS
Zero-Padding Host
#background-timesheet
HEATMAP · BOUNDS
Zero-Padding Host
#background-heatmap
100,000 data points
One continuous signal with a rising trend, broad waves, a peak, a dip, and recovery. Both charts render all 100,000 values on demand. The same data makes their shapes easy to compare. See large-data recipes for product screens.
LINE · 100,000 POINTS
Trend, peak, and recovery · Line
#large-data-line
Ready. Run to generate and render all 100,000 values.
Look for the peak around 28,000, the low around 60,000, and the recovery around 82,000.
BAR · 100,000 POINTS
Trend, peak, and recovery · Bar
#large-data-bar
Ready. Run to generate and render all 100,000 values.
Look for the peak around 28,000, the low around 60,000, and the recovery around 82,000.