Area Charts
10 area chart variants rendered live with Canvas2D. Hover, click, and watch animations — every chart below is powered by DiCharts.createAreaChart()
Area Chart
Smooth curved area chart with filled region beneath the line — great for showing trends.
Area Chart - Linear
Straight line segments between data points — no curve smoothing applied.
Area Chart - Step
Step interpolation — values change as flat horizontal then vertical segments.
Area Chart - Stacked
Multiple series stacked on top of each other — ideal for part-to-whole trends over time.
Area Chart - Stacked Expanded
Normalised to 100% — shows proportional contribution of each series over time.
Area Chart - Legend
Multi-series with auto-generated legend — distinguish each dataset at a glance.
Area Chart - Gradient
Vertical gradient fill fading from the line colour to transparent — elegant visual style.
Area Chart - Dots
Data-point dots overlaid on the curve — hover to enlarge and inspect individual values.
Area Chart - Axes
Prominent X and Y axis labels with grid lines — good for data-heavy presentations.
Area Chart - Interactive
Hover to see a vertical crosshair and tooltip — click to trigger callbacks on any data point.
All variants, one API
Every chart above is created with a single DiCharts.createAreaChart(container, options) call. Choose smooth, linear, or step curves with curveType, enable stacked series with stacked, add gradient fills with gradient, and make it interactive with interactive + showTooltip. Pure Canvas2D — works in every browser, no WebGPU required.