Selecting the Right Charting Library for Frontend Architecture
apexcharts, chart.js, echarts, and recharts are popular JavaScript libraries used to create interactive data visualizations like line charts, bar graphs, and pie charts. recharts is built specifically for React using SVG elements, offering a declarative component-based approach. apexcharts is a modern SVG-based library that works with vanilla JavaScript and has wrappers for frameworks. chart.js is a lightweight Canvas-based library known for simplicity and responsiveness. echarts is a powerful Canvas-based library from Apache, capable of handling large datasets and complex geographic visualizations.
Npm Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Architectural Deep Dive: ApexCharts vs Chart.js vs ECharts vs Recharts
When building data-driven interfaces, selecting the right charting library impacts performance, maintainability, and user experience. apexcharts, chart.js, echarts, and recharts all solve the same problem but take different architectural paths. Let's compare how they handle rendering, configuration, React integration, and data updates.
đ¨ Rendering Engine: SVG vs Canvas
The underlying rendering technology dictates how the chart scales and interacts with the DOM.
recharts uses SVG elements exclusively.
- Each chart part (axis, line, dot) is a DOM node.
- Easy to style with CSS but can slow down with thousands of points.
// recharts: SVG based
<LineChart width={500} height={300} data={data}>
<Line type="monotone" dataKey="uv" stroke="#8884d8" />
</LineChart>
apexcharts also uses SVG.
- Provides high-quality vectors that scale without pixelation.
- Good for interactivity like tooltips and zooming without blurring.
// apexcharts: SVG based
var options = { series: [{ data: [10, 20] }], chart: { type: 'line' } };
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
chart.js uses HTML5 Canvas.
- Draws pixels directly, which is faster for many data points.
- Harder to access individual elements via DOM events.
// chart.js: Canvas based
const ctx = document.getElementById('myChart');
new Chart(ctx, { type: 'line', data: { datasets: [{ data: [10, 20] }] } });
echarts primarily uses Canvas (supports SVG optionally).
- Optimized for rendering massive datasets smoothly.
- Best for performance-heavy scenarios like real-time monitoring.
// echarts: Canvas based (default)
var chart = echarts.init(document.getElementById('main'));
chart.setOption({ series: [{ type: 'line', data: [10, 20] }] });
âī¸ Configuration Style: Declarative vs Imperative
How you define the chart structure varies from JSX components to configuration objects.
recharts is Declarative.
- You build charts using React components like building blocks.
- Fits naturally into React's mental model.
// recharts: Declarative JSX
<BarChart data={data}>
<XAxis dataKey="name" />
<Bar dataKey="value" fill="#82ca9d" />
</BarChart>
apexcharts is Imperative Configuration.
- You pass a large options object to the constructor.
- Requires managing the chart instance manually in non-React apps.
// apexcharts: Options Object
var options = {
chart: { type: 'bar' },
series: [{ data: [10, 20] }],
xaxis: { categories: ['A', 'B'] }
};
chart.js is Imperative Configuration.
- Similar to ApexCharts, uses a config object for data and options.
- Simple structure but can get verbose for complex customizations.
// chart.js: Config Object
new Chart(ctx, {
type: 'bar',
data: { labels: ['A', 'B'], datasets: [{ data: [10, 20] }] },
options: { responsive: true }
});
echarts is Imperative Configuration.
- Uses a comprehensive
optionobject that controls every detail. - Very powerful but requires reading extensive documentation to master.
// echarts: Option Object
chart.setOption({
xAxis: { type: 'category', data: ['A', 'B'] },
series: [{ type: 'bar', data: [10, 20] }]
});
âī¸ React Integration: Native vs Wrapper
Since recharts is React-native, others require wrappers or useEffect hooks to function in React.
recharts is Native React.
- No wrappers needed; components manage their own lifecycle.
- State updates trigger re-renders automatically.
// recharts: Native Component
function MyChart({ data }) {
return <LineChart data={data}><Line dataKey="val" /></LineChart>;
}
apexcharts requires react-apexcharts (wrapper).
- The core
apexchartspackage is vanilla; React needs a separate wrapper. - Wrapper handles prop syncing to the underlying instance.
// apexcharts: React Wrapper
import Chart from "react-apexcharts";
function MyChart() {
return <Chart type="line" series={[{ data: [10] }]} options={{}} />;
}
chart.js requires react-chartjs-2 (wrapper).
- The core
chart.jspackage does not know about React. - Wrapper abstracts the Canvas context management.
// chart.js: React Wrapper
import { Line } from 'react-chartjs-2';
function MyChart() {
return <Line data={{ datasets: [{ data: [10] }] }} />;
}
echarts requires Manual useRef or echarts-for-react.
- Often initialized manually inside a
useEffecthook. - Gives full control but requires more boilerplate code.
// echarts: Manual Hook
useEffect(() => {
const chart = echarts.init(ref.current);
chart.setOption({ series: [{ data: [10] }] });
}, []);
đ Data Updates: Reactivity vs Manual
Handling dynamic data changes differs significantly between declarative and imperative libraries.
recharts handles updates Automatically.
- Passing new data props triggers a smooth transition.
- No need to call update methods manually.
// recharts: Auto Update
<LineChart data={newData}>
<Line dataKey="value" />
</LineChart>
apexcharts handles updates Via Instance.
- You must call
chart.updateSeries()to change data efficiently. - Re-rendering the component might reset animations.
// apexcharts: Manual Update
chart.updateSeries([{ data: [10, 20, 30] }]);
chart.js handles updates Via Instance.
- You modify the
chart.dataarray and callchart.update(). - Requires keeping a reference to the chart instance.
// chart.js: Manual Update
chart.data.datasets[0].data = [10, 20, 30];
chart.update();
echarts handles updates Via setOption.
- Calling
setOptionagain merges new config with old. - Efficient for streaming data if configured correctly.
// echarts: Merge Update
chart.setOption({ series: [{ data: [10, 20, 30] }] });
đ ī¸ Customization: Tooltips and Formatting
Customizing tooltips is a common requirement that reveals API flexibility.
recharts uses Custom Components.
- You pass a React component to the
tooltipprop. - Full access to React state and styling inside the tooltip.
// recharts: Custom Tooltip
<Tooltip content={<CustomTooltipComponent />} />
apexcharts uses Callback Functions.
- Define a
tooltip.y.valformatter function in options. - Returns a string or HTML to display.
// apexcharts: Formatter
tooltip: { y: { formatter: (val) => "$" + val } }
chart.js uses Callback Functions.
- Define
options.plugins.tooltip.callbacks. - Returns text to display on hover.
// chart.js: Callback
options: { plugins: { tooltip: { callbacks: { label: (ctx) => ctx.raw } } } }
echarts uses Formatter Strings or Functions.
- Supports rich text formatting via strings or custom DOM.
- Very flexible for complex tooltip layouts.
// echarts: Formatter
tooltip: { formatter: '{b}: {c} USD' }
đ Summary: Key Differences
| Feature | recharts | apexcharts | chart.js | echarts |
|---|---|---|---|---|
| Rendering | SVG | SVG | Canvas | Canvas |
| React Support | Native | Wrapper | Wrapper | Manual/Wrapper |
| Config Style | JSX Components | Options Object | Options Object | Options Object |
| Best For | React Apps | Modern Dashboards | Simple Charts | Big Data / Maps |
| Learning Curve | Low (for React) | Low | Low | High |
đĄ The Big Picture
recharts is the natural choice for React-heavy teams who want to compose charts like any other UI component. It reduces boilerplate but relies on SVG, which may lag with huge datasets.
apexcharts offers a balanced middle ground with beautiful defaults and SVG clarity. It is excellent for standard business dashboards where look-and-feel matters more than raw performance.
chart.js remains the lightweight champion for simple needs. If you just need a quick pie or line chart without heavy dependencies, it is reliable and easy to drop in.
echarts is the powerhouse for complex scenarios. Use it when you need geo-maps, millions of data points, or highly customized interactions that other libraries cannot handle.
Final Thought: There is no single best library â only the best fit for your stack. If you live in React, start with recharts. If you need performance at scale, look at echarts. For general-purpose simplicity, chart.js and apexcharts remain solid contenders.
How to Choose: apexcharts vs chart.js vs echarts vs recharts
- apexcharts:
Choose
apexchartsif you need ready-to-use interactive charts with minimal configuration and a modern look out of the box. It is a great fit for dashboards where you want SVG quality without writing complex rendering logic. It works well in vanilla JS projects or with React via its official wrapper. - chart.js:
Choose
chart.jsif you prioritize small bundle size and need a simple, reliable solution for standard chart types. It is ideal for projects where Canvas rendering is acceptable and you do not need deep customization of internal chart elements. Its simplicity makes it easy to maintain for small to medium-sized applications. - echarts:
Choose
echartsif you need to visualize large datasets or require advanced features like geo-maps and complex interactions. It is suitable for enterprise-grade applications where performance with thousands of data points is critical. The learning curve is steeper, but the flexibility is unmatched for heavy-duty visualization tasks. - recharts:
Choose
rechartsif your application is built on React and you prefer a declarative, component-driven development style. It allows you to compose charts using JSX, making it easy to integrate with your existing React state and props. It is best for applications where SVG interactivity and React ecosystem compatibility are top priorities.
Popular Comparisons
README for apexcharts
ApexCharts
Modern, interactive JavaScript charts your users will love, built for dashboards, SaaS, and data-heavy UIs.
Live demos ¡ Documentation ¡ License
Why ApexCharts
- 18+ chart types out of the box: line, area, bar, column, pie, donut, radar, heatmap, treemap, candlestick, boxplot, violin, funnel, pyramid, gauge, unit (dot / pictogram / waffle / beeswarm) and more
- SSR support for Next.js, Nuxt, SvelteKit, Astro, and other meta-frameworks: render real SVG on the server, hydrate on the client
- Tree-shakable: import only the chart types and features you need; typical bundles are 30-60% smaller than the full build
- TypeScript-first: full type definitions ship with the package, no
@types/*install needed - Zero runtime dependencies: no React/Vue/D3 required; works in any framework or vanilla JS
- Accessibility: keyboard navigation and ARIA support built in
- Free for most users: see License
New in v6
Version 6 turns a chart from a picture you look at into a surface you investigate, author, and share. Most features below are opt-in and tree-shakeable; existing configs keep working unchanged.
- Plugin platform: publish reusable chart plugins to npm against a stable, versioned API.
ApexCharts.registerPlugin(def), then activate per chart withplugins: [{ name }]. - Canvas rendering for dense series:
chart: { renderer: 'auto' }paints the series layer to canvas above a point threshold while axes, tooltips, annotations, and exports stay SVG. Hundreds of thousands of points, same config. - Undo / redo:
chart: { history: { enabled: true } }records zooms, series toggles, option changes, and annotation edits. Ctrl-Z just works, andchart.historyexposes undo, redo, jump, and transactions. - Shareable view state:
chart.perspectives.capture()serializes the exact view (zoom window, hidden series, selections, annotations, theme) into a compact token you can put in a URL and restore anywhere. - Design tokens and OS-aware themes: define
--apx-*CSS custom properties once and every chart reads them;theme: { follow: 'os' }tracks the system light/dark preference with zero JS, andApexCharts.registerThemeregisters named brand themes. - Custom series types:
ApexCharts.registerSeriesType(name, { renderItem })draws primitives per datum and inherits tooltips, events, legend, and keyboard navigation for free. - Native-feeling touch: two-finger pinch-zoom, two-finger pan, and kinetic inertia with axis rails, on by default.
- Pluggable easing:
chart.animations.easingaccepts named curves, cubic-bezier arrays, or functions; add your own withApexCharts.registerEasing. - Coherent data transitions: updates that add or remove data points animate as one coordinated motion. New bars grow from the baseline, removed ones shrink away, line and area fills reshape without tearing, and markers, bubbles, and axis labels ride along. On by default for animated charts.
- Crossfilter dashboards: link charts into a shared filter engine with
ApexCharts.crossfilter. Click a slice or brush a range in one chart and every linked chart filters to match. - Annotation authoring:
chart: { ink: { enabled: true } }makes annotations draggable and resizable, adds click-to-create, snap, and a floating editor card (rename, recolor, restyle, delete), all wired into undo. - Measure ruler: hold a key and drag to read the change, percent, and slope between two points; pinned rulers re-project on zoom and resize (
chart.measure). - Context menu: right-click or long-press a data point for actions that operate at that exact point, with custom items supported (
chart.contextMenu). - Real-time streaming: rolling-window updates scroll at constant velocity instead of warping in place, and
chart.streamingbounds memory for long-running feeds. - Scrollytelling:
chart.storyboard.bind({ beats })pairs prose sections with saved chart views; the chart morphs to each view as the reader scrolls and reverses when they scroll back.
Install
npm install apexcharts
Or via CDN:
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
Quick start
import ApexCharts from 'apexcharts'
const chart = new ApexCharts(document.querySelector('#chart'), {
chart: { type: 'bar' },
series: [{ name: 'Sales', data: [30, 40, 35, 50, 49, 60, 70, 91, 125] }],
xaxis: { categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999] }
})
chart.render()
Browse 100+ ready-to-use samples: copy, paste, ship.
Chart types
- Line ¡ Area ¡ Range Area
- Bar ¡ Column ¡ Range Bar / Timeline
- Scatter ¡ Bubble
- Candlestick ¡ BoxPlot ¡ Violin
- Pie ¡ Donut ¡ Polar Area ¡ Radial Bar / Gauge
- Radar ¡ Heatmap ¡ Treemap
- Funnel
- Unit / Pictogram / Beeswarm ¡ Waffle (premium)
Combine any of the above as mixed/combo charts, stacked variants, sparklines, or synchronized multi-chart layouts.
Framework wrappers
Official:
- React: react-apexcharts
- Vue 3: vue3-apexcharts
- Vue 2: vue-apexcharts
- Angular: ng-apexcharts
- Blazor: Blazor-ApexCharts
- Stencil: stencil-apexcharts
Community:
- Svelte: svelte-apexcharts
- Ruby: apexcharts.rb
- Laravel: larapex-charts
- R: apexcharter
Server-side rendering
Render chart HTML on the server, then hydrate in the browser. Works with Next.js, Nuxt, SvelteKit, Astro, Remix, and any Node-based framework.
// Server
import ApexCharts from 'apexcharts/ssr'
const chartHTML = await ApexCharts.renderToHTML({
chart: { type: 'bar' },
series: [{ data: [30, 40, 35, 50, 49, 60, 70, 91, 125] }],
xaxis: { categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999] }
}, { width: 500, height: 300 })
// Returns hydration-ready HTML with embedded SVG
// Client
import ApexCharts from 'apexcharts/client'
ApexCharts.hydrate(document.getElementById('my-chart'))
// or: ApexCharts.hydrateAll()
No more dynamic(() => import(...), { ssr: false }) workarounds: the chart renders on the server and becomes interactive on hydration.
Tree-shaking: ship only what you use
By default import ApexCharts from 'apexcharts' includes everything. For smaller bundles, import from apexcharts/core and add only what you need:
import ApexCharts from 'apexcharts/core' // bare class: no chart types, no features
// Chart types (match the value of chart.type)
import 'apexcharts/line'
import 'apexcharts/bar'
// import 'apexcharts/area'
// import 'apexcharts/scatter'
// import 'apexcharts/unit' // dot / pictogram / waffle / beeswarm (premium; 'waffle' aliases this)
// Optional features
import 'apexcharts/features/legend'
import 'apexcharts/features/toolbar' // zoom/pan toolbar
// import 'apexcharts/features/exports' // SVG/PNG/CSV download
// import 'apexcharts/features/annotations'
// import 'apexcharts/features/keyboard' // keyboard navigation
// import 'apexcharts/features/drilldown' // hierarchical drill-down
// import 'apexcharts/features/morph' // animated chart-type morphs
// import 'apexcharts/features/history' // undo/redo (premium)
// import 'apexcharts/features/perspectives' // shareable view state (premium)
// import 'apexcharts/features/storyboard' // scrollytelling, incl. perspectives (premium)
// import 'apexcharts/features/facet' // design tokens + OS themes
// import 'apexcharts/features/weave' // plugin platform
// import 'apexcharts/features/marks' // custom series types
// import 'apexcharts/features/link' // crossfilter / linked views (premium)
// import 'apexcharts/features/ink' // on-chart annotation editing (premium)
// import 'apexcharts/features/measure' // measure/delta ruler (premium)
// import 'apexcharts/features/context-menu' // right-click context menu (premium)
// import 'apexcharts/features/renderer-canvas' // canvas series renderer
See the tree-shaking guide for the complete list of entry points.
Premium features & licensing
Most of ApexCharts is free and open source. A small set of advanced features are premium and require a license key:
| Feature | Enabled by |
|---|---|
| Unit chart type (dot / pictogram / waffle / beeswarm) | chart.type: 'unit' / chart.type: 'waffle' |
| Storyboard (scrollytelling) | chart.storyboard.bind(...) |
| Linked views / crossfilter | chart.link.enabled / chart.link.dimension / ApexCharts.crossfilter() |
| Ink layer (on-chart annotation editing) | chart.ink.enabled |
| Measure / delta ruler | chart.measure.enabled |
| Context menu (right-click) | chart.contextMenu.enabled |
| Perspectives (shareable view state) | chart.perspectives.apply() / .save() / ApexCharts.perspectives.decode() |
| History (undo/redo) | chart.history.enabled |
Without a valid key these features still work (trial mode), but the chart shows an "APEXCHARTS" watermark. A valid key removes it. Every other chart type and feature is free and never watermarked; the unit chart type (listed above, aliased by waffle) is the one premium chart type.
import ApexCharts from 'apexcharts'
// Set once, before rendering. Applies to every chart on the page.
ApexCharts.setLicense('APEX-xxxxxxxx')
Alternatives to setLicense:
// Global variable (used when setLicense was not called):
window.Apex = { license: 'APEX-xxxxxxxx' }
// Per-chart override (most specific wins):
new ApexCharts(el, { chart: { license: 'APEX-xxxxxxxx' /* ... */ } })
Precedence per chart: chart.license -> ApexCharts.setLicense() -> window.Apex.license -> unlicensed (trial). The watermark is re-evaluated on every render, so a late setLicense(validKey) followed by chart.update() clears it.
Keys are shared across the whole ApexCharts family (apexgantt, apextree, apexsankey, apex-grid-enterprise, apexstock), so one customer key works everywhere. Get a license at apexcharts.com/pricing.
Browser support
ApexCharts works in all modern evergreen browsers (Chrome, Firefox, Safari, Edge). For server-side rendering, Node.js 18+ is required.
Documentation
Contributing
npm install
npm run dev # vite build --watch
npm test # e2e + unit
See CONTRIBUTING.md for setup, coding conventions, and PR guidelines.
License
ApexCharts uses a revenue-based license:
- Free for individuals, and organizations with under $2M USD in annual gross revenue, including commercial and internal use. No registration required.
- Commercial license required for organizations at or above $2M USD annual gross revenue.
Full terms: apexcharts.com/license
Need an enterprise data grid?
We've partnered with Infragistics, creators of Ignite UI: high-performance data grids that handle unlimited rows and columns, with custom templates and real-time updates.
Available for:
Angular ¡ React ¡ Blazor ¡ Web Components ¡ jQuery
Contact
- Issues & bugs: GitHub Issues
- Questions: GitHub Discussions
- Email: info@apexcharts.com