Tutorials

Step-by-step builds, from a first chart to a working dashboard.

How to Build a Bar Chart Race in JavaScript

How to Build a Bar Chart Race in JavaScript

A bar chart race animates a ranking as it changes over time. ApexCharts 6.4 ships it as configuration, no plugin, no per-frame math for the animation: three options plus a timer that feeds each period's ranking. We build one step by step on real World Bank GDP data, 2000 to 2024.

Read More
Direct-Manipulation Annotations: Ink and Measure

Direct-Manipulation Annotations: Ink and Measure

Ink and Measure bring authoring onto the chart surface in ApexCharts 6.0. Ink makes annotations draggable and editable in place and writes positions back to data coordinates; Measure is a ruler that reports the change, percent change, and range of any move. Paired with Rewind for undo, they turn a chart into something you mark up. Here is how, with a live demo.

Read More
Coordinated Dashboards: Linked Views and Crossfilter

Coordinated Dashboards: Linked Views and Crossfilter

Linked Views is the crossfilter engine in ApexCharts 6.0. Register one record set, give each chart a dimension, and clicking a bucket or brushing a range in any chart re-aggregates every other chart over the filtered subset. This is how to build a coordinated dashboard, including the highlight mode, the filter engine, and a shared data table, with a live demo.

Read More
Constant-Velocity Real-Time Streaming in ApexCharts 6.0

Constant-Velocity Real-Time Streaming in ApexCharts 6.0

ApexCharts 6.0 adds chart.streaming: set enabled to true and appendData both scrolls the line at constant velocity and trims the series automatically, so memory stays flat no matter how long the feed runs. This is the streaming API, why appending (not shifting) is what makes it scroll, and how it replaces the manual trim you used to write, with a live demo.

Read More
Scrollytelling With ApexCharts Storyboard

Scrollytelling With ApexCharts Storyboard

Storyboard is scrollytelling for charts, new in ApexCharts 6.0. You pair prose sections (beats) with saved chart views; scrolling a beat into view applies its view and scrolling back reverses it, and a beat can morph the chart in one transition. This is how to build a scroll-driven data story, with a live demo and the one design rule that keeps every transition smooth.

Read More
How to Build a Real-Time Dashboard with ApexCharts and WebSockets

How to Build a Real-Time Dashboard with ApexCharts and WebSockets

A step-by-step guide to streaming live data into ApexCharts: a smoothly scrolling line fed by appendData over a WebSocket, a live gauge, KPI tiles, memory kept flat with an occasional trim, and clean teardown.

Read More