Chart Types
ApexCharts supports 20+ chart types. Each is controlled by the chart.type option and has its own data format and configuration namespace under plotOptions. Most are in the default bundle; a few need one more import.
Axis charts
These charts plot data against an x-axis and one or more y-axes.
| Type | chart.type | Best for |
|---|---|---|
| Line | 'line' | Trends over time or ordered categories |
| Area | 'area' | Same as line, with filled region under the curve |
| Bar | 'bar' | Horizontal comparison of values across categories |
| Column | 'bar' (vertical orientation) | Vertical comparison across categories |
| Scatter | 'scatter' | Correlation between two numeric variables |
| Bubble | 'bubble' | Three-variable data: x, y, and size |
| Heatmap | 'heatmap' | Magnitude across a two-dimensional grid |
| Candlestick | 'candlestick' | OHLC financial data |
| Box Plot | 'boxPlot' | Statistical distribution with quartiles |
| Histogram | 'histogram' | Distribution of raw observations, counted into bins |
| Violin | 'violin' | Continuous distribution shape |
| Raincloud | 'raincloud' | Distribution as density, summary and raw observations at once |
| Range Bar | 'rangeBar' | Horizontal bars spanning a start-to-end range |
| Range Area | 'rangeArea' | Filled region between two value lines |
| Streamgraph | 'streamgraph' | Changing composition over time, on a drifting baseline |
| Waterfall | 'waterfall' | How a starting value becomes an ending value, step by step |
| Dumbbell | 'dumbbell' | The gap between two or more measures per category |
| Treemap | 'treemap' | Hierarchical data as nested rectangles |
| Mixed | 'line' (base) | Combining line, column, and area in one chart |
Non-axis charts
These charts do not use an x/y axis system.
| Type | chart.type | Best for |
|---|---|---|
| Pie | 'pie' | Part-to-whole with a small number of categories |
| Donut | 'donut' | Same as pie, with a center cutout for a label |
| Radial Bar | 'radialBar' | Progress or score as an arc |
| Gauge | 'gauge' | Single value on a dial |
| Radar | 'radar' | Multi-variable comparison on a spider web |
| Polar Area | 'polarArea' | Categories as sectors of equal angle, varying radius |
| Funnel | 'funnel' | Progressive reduction through stages |
| Pyramid | 'pyramid' | Hierarchy where the base is the largest group |
| Sunburst | 'sunburst' | Hierarchical data as concentric rings, one ring per level |
| Icicle | 'icicle' | Hierarchical data as nested bands, including flame graphs |
| Unit | 'unit' | Counts drawn as one mark per unit, including beeswarms |
| Waffle | 'waffle' | Part-to-whole as a grid of cells |
Types that need an import
The default bundle (import ApexCharts from 'apexcharts', or apexcharts.min.js from a script tag) draws every type above except these. Unit, waffle, sunburst, violin, waterfall, dumbbell and streamgraph left it in 8.0; icicle and raincloud were never in it. Each needs one more line:
chart.type | Bundler, next to import ApexCharts from 'apexcharts' | Script tag |
|---|---|---|
'unit', 'waffle' | import 'apexcharts/unit' | dist/unit.js |
'sunburst' | import 'apexcharts/sunburst' | dist/sunburst.js |
'icicle' | import 'apexcharts/icicle' | dist/icicle.js |
'violin' | import 'apexcharts/violin' | dist/violin.js |
'raincloud' | import 'apexcharts/raincloud' | dist/violin.js, then dist/features/raincloud.js |
'waterfall' | import 'apexcharts/features/waterfall' | dist/features/waterfall.js |
'dumbbell' | import 'apexcharts/features/dumbbell' | dist/features/dumbbell.js |
'streamgraph' | import 'apexcharts/features/streamgraph' | dist/features/streamgraph.js |
Or load the full bundle, import ApexCharts from 'apexcharts/full' (apexcharts.full.min.js from a script tag), which has every type. A type that is missing draws nothing, and the console names the line to add. Building up from apexcharts/core instead? See the tree-shaking guide.
Choosing a chart type
Comparing categories: Column or bar. Use column for up to ~10 categories, bar when category labels are long.
Showing change over time: Line or area. Use area when the filled region adds meaning (total volume). Use line when multiple overlapping series would make filled areas unreadable.
Part-to-whole: Pie or donut for 2-5 slices. Avoid for more than 5 categories, a bar chart is easier to read.
Distribution: Box plot shows quartiles and outliers. Violin shows the full distribution shape. Raincloud shows the density, the summary and every observation together. Scatter shows individual data points.
Explaining a change: Waterfall bridges a starting figure to an ending one through signed steps. Dumbbell compares two snapshots per category and puts the gap between them on the page.
Composition over time: Stacked area when the totals matter, streamgraph when the mix matters and there are too many categories to stack readably.
Financial: Candlestick for OHLC. Range bar for timeline or Gantt-style data.
Correlation between two variables: Scatter. Add a third variable (like market share) with bubble.