I make charts for real people. Parents. Bosses. My own messy brain. I’ve used these tools at work and at home, from a school bake sale dashboard to a fintech app. Some days I need a quick line chart. Other days I need a map with thousands of points. And yes, I’ve broken things. Many times. For the full war story of trying every major chart tool under the sun, you can read my extended field report here.
So, I spent the last year bouncing between Chart.js, D3, ECharts, Highcharts, Recharts, Nivo, ApexCharts, Plotly.js, Vega-Lite, and a tiny bit of Visx. I’ll keep this simple and honest. If you want to see how these libraries stack up feature-by-feature, check out this comprehensive comparison of JavaScript charting libraries—it breaks down licenses, supported chart types, and more.
Quick note: I build on macOS and Windows, mostly in Chrome and Safari. I test on an old iPhone 11 because it loves to find bugs.
The short version (because you’re busy)
- Fast and simple: Chart.js
- React apps: Recharts or Nivo (Nivo looks nicer; Recharts feels calmer)
- Huge data and maps: ECharts
- Fancy, custom visuals: D3 (with patience)
- Finance charts with a range slider: Highcharts (paid at work)
- Science-style plots and 3D: Plotly.js
- Spec-driven and tidy: Vega-Lite
- React + full control toolbox: Visx (but bring snacks)
If you're curious how those libraries behaved across an even wider range of projects, my candid notes are here.
Side note: when I wanted a single-file library even tinier than Chart.js, EJSChart rendered a basic bar chart faster than I could brew my espresso.
I’ll explain with real code and tiny stories.
Chart.js — “20 minutes and done”
I built a sales line chart for a local coffee shop. It had daily sales and a moving average. Chart.js felt like making toast. It just worked.
What I liked:
- Light, fast, and free (MIT).
- Good docs. Plugins like DataLabels and Annotation help a lot.
- Works fine on phones.
What bugged me:
- Big data (like 50k points) is rough.
- Layout gets tight with long labels. I had to rotate text.
Here’s a tiny chart I used in a weekly report:
<canvas id="sales"></canvas>
<script>
const ctx = document.getElementById('sales');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
datasets: [{ label: 'Sales', data: [12, 19, 7, 13, 22, 30, 25], borderColor: '#3b82f6' }]
},
options: { responsive: true, maintainAspectRatio: false }
});
</script>
I changed the colors and added a simple tooltip. Done. Coffee time.
D3 — “It’s hard, then it’s art”
I used D3 for a music blog to draw a chord diagram of collabs. It took a week. I watched three talks, cried a little, then felt proud.
Good things:
- You can draw anything. SVG, Canvas, events, math, all there.
- Animations look smooth.
Hard parts:
- Big learning curve.
- You write a lot of code.
A tiny bar chart I used to teach a friend:
<svg id="bars" width="300" height="120"></svg>
<script>
// data
const data = [5, 8, 13, 21, 34];
// draw
const svg = d3.select('#bars');
const x = d3.scaleBand().domain(data.map((_, i) => i)).range([0, 300]).padding(0.2);
const y = d3.scaleLinear().domain([0, d3.max(data)]).range([120, 0]);
svg.selectAll('rect')
.data(data)
.enter().append('rect')
.attr('x', (_, i) => x(i))
.attr('y', d => y(d))
.attr('width', x.bandwidth())
.attr('height', d => 120 - y(d))
.attr('fill', '#10b981');
</script>
I thought D3 was “too much.” Then I needed a custom layout. Guess what? It was perfect.
ECharts — “Heavy, but wow”
For a city transit story, I built a live bus delay heatmap with about 300k rows. ECharts kept it smooth. Zoom and pan felt good on my phone too. When you're dealing with datasets at that scale, it helps to skim an in-depth survey on big data visualization tools to see which engines stay fast once the numbers climb. If seven different libraries in one project sounds familiar, check out my summary of what actually worked across 7 tools.
What I liked:
- Great for big data and maps.
- Themes look sharp.
- Rich tooltips and legends.
What I didn’t:
- Bundle is chunky.
- Docs are deep, but I had to search a lot.
Tiny bar chart:
<div id="chart" style="height:300px;"></div>
<script>
const chart = echarts.init(document.getElementById('chart'));
chart.setOption({
xAxis: { type: 'category', data: ['Mon','Tue','Wed','Thu','Fri'] },
yAxis: { type: 'value' },
series: [{ type: 'bar', data: [120, 200, 150, 80, 70], itemStyle: { color: '#ef4444' } }]
});
</script>
If you need heatmaps, scatter with thousands of points, or custom maps, this tool shines.
Highcharts (and Highstock) — “Polished, but you pay”
At a fintech job, we needed seven charts on one screen and a range slider for time series. Highstock was my pick. The a11y add-on also helped us meet rules. For stock-style candlesticks specifically, you can see which libraries passed my test here.
Why I liked it:
- Great docs and examples.
- Linked tooltips and synced zoom.
- Solid accessibility module.
The catch:
- License for commercial use.
- Bundle size is not small.
If you need “just works” for business charts, it’s worth it. We shipped faster.
Recharts — “Friendly for React folks”
I used Recharts in a React admin page for a warehouse. Setup was calm. JSX felt natural. I compared several open-source chart tools in another write-up that you can skim here.
Pros:
- Simple API. Good defaults.
- Works with React state.
- Easy to theme.
Cons:
- SVG can slow with huge data.
- On my iPhone, tooltips jittered on a long scroll view. I set isAnimationActive={false}. That helped.
Quick sample:
<ResponsiveContainer width="100%" height={300}>
<LineChart data={data}>
<XAxis dataKey="day" />
<YAxis />
<Tooltip />
<Line type="monotone" dataKey="units" stroke="#6366f1" />
</LineChart>
</ResponsiveContainer>
If you use React daily, this feels like home.
Nivo — “Pretty out of the box”
I used Nivo for a charity board. It looked good with almost no tweaks. The legends are clean. The docs are friendly.
Good:
- Nice themes.
- Many chart types.
- Canvas versions help with speed.
Watch out:
- Props can get deep.
- Some charts need careful padding.
For a quick dashboard that still looks pro, Nivo is sweet.
ApexCharts — “Easy wins, neat gauges”
I built a speed gauge for a network monitor using ApexCharts. The gauge and sparkline charts took minutes. It plays well with React and Vue wrappers. If your budget is exactly zero, you might like my roundup of free JavaScript charts I tested.
Good:
- Clear docs and examples.
- Annotations and mixed charts are simple.
Not so good:
- Big data gets heavy.
- Some styles felt same-y. I tweaked CSS.
It’s a good pick for KPIs, gauges, and small dashboards.
Often I wind up charting unexpected datasets. A recent side gig had me visualizing engagement numbers for a dating platform that caters to fans of confident, mature women. If you’re curious about the kind of real-world