I make dashboards for work. And sometimes for fun, like my kid’s school fundraiser page. I’ve used a bunch of chart libraries in JavaScript. Some saved my day. Some made me grumpy. Here’s the honest version, with real stuff I built and what went right (and wrong). If you’re after just the open-source angle, this write-up on OSS chart tools is a solid primer.
The quick take (so you don’t scroll forever)
- Chart.js: Fast to set up. Great for small dashboards.
- D3.js: Power tool. You can build anything, but you’ll sweat a little.
- ECharts: Handles big data well. Nice zoom. Good on phones.
- Highcharts: Polished and friendly for business folks. License for commercial use.
- Recharts: Sweet with React. Ships quick. Good defaults.
- ApexCharts: Clean stock charts. Easy mixed charts.
- Plotly.js: Fancy science plots. Heavy bundle.
- uPlot: Speed demon for huge time series. But very bare bones.
Looking for a shorter list? I once compared seven JavaScript chart libraries head-to-head.
One newcomer that impressed me is EJSchart, which slots somewhere between Chart.js and ECharts in terms of power-to-weight ratio.
Now, let me explain how I used each one.
Chart.js and the school fundraiser pie
I started with Chart.js (official site) for a simple school fundraiser site. We had three groups selling cookies. I made a pie (donut) chart and a line chart showing sales per day. Setup took me under 30 minutes.
What I liked:
- The defaults look good right away.
- Tooltips and legends just work.
- It’s small and easy to add to a page.
What bugged me:
- Custom labels took a bit of code.
- Too many points made it choppy.
A tiny slice of how I set it up:
- Type: "line"
- Data: dates on the x-axis
- Options: tension: 0.3 for smooth lines, responsive: true, maintainAspectRatio: false
Simple, right? It did the job. Parents could see the trend. And yes, chocolate chip won.
D3.js for a city budget map (I got picky)
I built a city budget map with D3.js (full teardown here) (official site) for a local council page. It was a choropleth (a color map) with a linked bar chart. When you hovered over a district on the map, the bars changed. Felt slick.
What I liked:
- Total control. I tuned scales, axes, and transitions.
- Smooth motion on hover. No jank.
What made me sigh:
- It took time. Like, “late night coffee” time.
- More code to maintain.
- Accessibility needs extra care.
But hey, when you need custom stuff—like odd color breaks or weird labels—D3 lets you do it.
ECharts handled 60,000 points without crying
I had a power grid dashboard with 60,000 sensor points per series. Chart.js struggled. ECharts stayed smooth. Pinch-to-zoom on mobile felt great. I used data zoom, sampling, and a built-in dark theme.
What I liked:
- Big data felt fine.
- Built-in zoom, pan, and tooltip formatter.
- Themes without fuss.
What I didn’t love:
- The config can get long.
- Bundle size is bigger than Chart.js.
If you’ve got lots of time series and want it to run well on phones, ECharts is a good bet. (I also toyed with JavaScript spider charts here—fun, but not for 60 k points!)
Highcharts for my finance team (they love exports)
Our finance folks needed clean line charts with data grouping, and they wanted one-click export to PDF and PNG. Highcharts nailed it. I wired up date pickers, added series toggles, and the charts looked “board ready.” For a deeper dive into finance dashboards, see how I built a tiny trading dashboard.
What I liked:
- Built-in export that just works.
- Good keyboard support and ARIA labels.
- Data grouping helps with large date ranges.
Heads up:
- License cost for commercial use.
- Styling can feel a bit “Highcharts-y” unless you theme it.
But when execs say “Can we print this?” it’s nice to say yes.
Recharts for a React sprint (ship it fast)
I had a React app with a tight deadline. Recharts helped me ship in two days. I stacked bars, added custom tooltips, and used ResponsiveContainer so it looked good on any screen. No wrestling with refs. (I later swapped in radar charts for a KPI view—zero drama.)
What I liked:
- Composable components (BarChart, Line, Tooltip, Legend).
- Plays nice with React state.
- Easy to test.
Tricky bits:
- Heavy custom labels got messy.
- Not as fast with very large data.
Still, for everyday product work in React, it’s a win.
ApexCharts for candlesticks and mixed charts
I built a small trading view: candlestick with volume bars below, plus a mini brush chart to zoom. ApexCharts felt made for this.
What I liked:
- Candles look clean out of the box.
- Mixed charts are simple.
- Nice crosshairs and annotations.
Watch-outs:
- Some docs pages felt light on edge cases.
- Styling tiny details took hunting.
If you do finance charts, this one feels comfy.
Plotly.js for lab-style charts (3D and stats)
A research team needed a 3D scatter with hover labels and a density contour. Plotly.js did both, plus box plots, without me writing custom math. It felt like a Swiss Army knife. I also knocked out a quick bubble chart walkthrough while testing sizes and color scales—Plotly handled it fine.
What I liked:
- Lots of chart types, especially for science.
- Complex tooltips and hover modes.
- Good for notebooks and quick prototypes.
Downside:
- Big bundle. Slower loads.
- The UI felt a bit heavy for small sites.
For research dashboards, it’s a strong pick.
uPlot when I had 1 million points (yes, a lot)
I tested a log viewer with 1 million points. Most libraries tapped out. uPlot was tiny and fast. But it’s bare. I had to wire my own legend, color scales, and downsampling.
What I liked:
- Speed. Like, real speed.
- Minimal footprint.
What I missed:
- Fancy tooltips, themes, and helpers.
- Built-in zoom polish.
Use it when speed is king and you can build the rest.
Performance notes from the trenches
- SVG vs Canvas: For many points, Canvas wins. D3 SVG can lag with big sets.
- Downsample on large time series. I use “min-max” buckets per pixel.
- Lazy load charts. I load heavy libs only on pages that need them.
- Avoid reflow storms. In React, memoize data and keep chart props stable.
- Timelines your thing? Free Gantt chart libraries save a ton of custom work.
You know what? Sometimes the “boring” stuff—like cleaning data—matters more than the library.
If you’re pulling market or classifieds data to visualize—say, tracking how many listings appear in each city—having all the source URLs in one place saves hours of scraping prep; this exhaustive list of Craigslist sites gives you every city sub-domain in one shot, so you can automate the fetch and get straight to charting the trends.
Similarly, if your analysis zeroes in on adult classifieds traffic along the South Carolina coast, scraping the Myrtle Beach feed at Mega Personals Myrtle Beach lets you pull a focused, up-to-date dataset of posts you can pivot by date or category before feeding it into your charting layer.