JavaScript Chart Demos

Line charts excel at showing trends over continuous data and time series. Read the docs →

Basic Line Chart

Line with Data Labels

Zoomable Timeseries

Line with Annotations

Syncing Charts

Brush Chart

Stepline Chart

Gradient Line

Missing / Null Values

Dashed Line

Realtime

Large Dataset Downsampling

Annotations with Tooltips

Line with Drilldown

Area charts emphasize the magnitude of change over time and stacking relationships between series. Read the docs →

Basic Area

Spline Area

Datetime X-Axis

Negative Values

GitHub Style

Stacked Area

Missing / Null Values

Irregular Timeseries

Column charts compare values across discrete categories with vertical bars. Read the docs →

Basic Column

Column with Data Labels

Stacked Column

Stacked Column 100%

Column with Rotated Labels

Column with Negative Values

Dynamic Loaded Chart

Distributed Columns

Range Column

Grouped Stacked Column

Dumbbell Chart

Column with Markers

Column with Group Label

Column with Drilldown

Drilldown with Zoom

Async Drilldown Column

Horizontal bar charts compare values across categories, ideal when labels are long. Read the docs →

Basic Bar

Grouped Bar

Stacked Bar

Stacked Bar 100%

Bar with Negative Values

Reversed Bar

Custom Data Labels

Patterned Bar

Bar with Markers

Grouped Stacked Bar

Bar Chart Race

Combine line, column, and area series in a single chart for richer comparisons. Read the docs →

Line & Column

Multiple Y-Axis

Line & Area

Line, Column & Area

Visualize ranges and uncertainty bands together with a line or trend. Read the docs →

Basic Range Area

Range Area + Line Combo

Timeline (range bar) charts show durations, schedules, and gantt-style progress. Read the docs →

Basic Timeline

Grouped Rows

Multi Series

Advanced Timeline

Custom Colors

Dumbbell Horizontal

Funnel charts visualize stage-by-stage drop-off in a process or conversion flow. Read the docs →

Funnel Chart

Pyramid Chart

Trapezoid Funnel (Tapered)

Candlestick charts visualize OHLC financial data over time intervals. Read the docs →

Basic Candlestick

Candlestick + Bar

Candlestick + Line

Boxplots summarize the distribution, median, and outliers of a dataset. Read the docs →

Basic BoxPlot

BoxPlot + Scatter

Horizontal BoxPlot

BoxPlot with Points

Horizontal BoxPlot with Points

BoxPlot from Raw Observations

Same Box, Different Data

Read the docs →

Basic Violin

Violin with Jitter

Horizontal Violin

Horizontal Bimodal

Colour-graded Jitter

Violin to Jitter Morph

Read the docs →

Latency Distribution

Comparing Distributions

Explode to Observations

Bubble charts add a third dimension to scatter plots using marker size.

Simple Bubble

3D Bubble

Scatter charts plot pairs of values to reveal correlation and clusters.

Basic Scatter

Datetime Scatter

Scatter with Images

Scatter with Jitter

Canvas Renderer (High-Density)

Heatmaps surface intensity patterns across a matrix using color. Read the docs →

Basic Heatmap

Multiple Colors

Color Range

Gradient Legend

Rounded Heatmap

Heatmap with Drilldown

Continuous Datetime

Calendar Heatmap

Canvas Renderer (High-Density)

Treemaps visualize hierarchical part-to-whole relationships using nested rectangles. Read the docs →

Basic Treemap

Multi-Dimensional

Color Scale

Distributed Treemap

Treemap with Drilldown

Nested Market Map

Treemap / Sunburst Morph

Read the docs →

Basic Sunburst

Sunburst from Drilldown

Semi-Circle Sunburst

Unit charts draw one mark per thing counted, so a quantity reads as something you could count back. Read the docs →

Pictogram Population

Parliament

Workforce Clusters

Population Explorer

City Bubbles

Heart Donors

Globe Population

Every shape, or bring your own →The companion shape kit: a heart, a house, a globe, a heartbeat trace.

Beeswarms place every observation on a value axis and nudge equal values off the lane centre so nothing overlaps. Read the docs →

Life Expectancy Swarm

Vertical Beeswarm

Horizontal Beeswarm

Bubble Beeswarm

Waffle charts fill a lattice of cells in category order, a countable part-to-whole alternative to a pie. Read the docs →

Energy Mix

Urban Small Multiples

Slope charts compare two points in time across many categories at a glance.

Basic Slope

Slope Multi Group

Pie and donut charts show part-to-whole proportions for a small number of categories. Read the docs →

Simple Pie

Simple Donut

Rounded Donut

Rounded Spaced Donut

Monochrome Pie

Gradient Donut

Donut with Pattern

Donut Update

Pie with Image

Donut with Drilldown

RadialBar and circular charts display progress, KPIs, and goal completion. Read the docs →

Basic RadialBar

Multiple Band

Custom Angle

Gauge charts surface a single metric against a goal or threshold range. Read the docs →

Basic Gauge

Gauge with Bands

Gauge with Custom Label

Gauge with Ticks

Needle Gauge

Live Needle Gauge

Semi-Circle Gauge

Radar charts compare multiple variables across one or more series on a polar axis. Read the docs →

Basic Radar

Radar Multiple Series

Radar with Polygon Fill

Polar area charts combine pie segments with bar length to encode two dimensions.

Basic Polar Area

Polar Area Monochrome

Inline, axis-free mini charts for compact trend display alongside KPIs.

Basic Sparklines

Full ApexCharts dashboard concepts combining multiple chart types in a single page.

Dashboard Concept – Modern

Dashboard Concept – Dark

Realtime Dashboard

Compose your own series types (bullet, lollipop, dumbbell) with the v6 Marks API, with events, tooltips, and legend built in.

Bullet Chart

Lollipop Chart

Dumbbell (Custom Series)

Investigate data directly on the chart: crossfilter across views, measure changes, author annotations, and act at a point with the context menu.

Crossfilter Dashboard

Crossfilter (Categorical)

Measure Ruler

Annotation Authoring (Ink)

Turn a chart into a surface you can author and share: scroll-driven storyboards, shareable view state, and undo and redo.

Scrollytelling (Storyboard)

Shareable Views (Perspectives)

Undo / Redo (Rewind)