“I Tried Making Beautiful JavaScript Charts. Here’s What Actually Worked.”

I make dashboards. Sales, traffic, signups, the usual mess. I care about looks, but I also care about time. Can I ship fast? Will it run smooth on a phone? Will my boss say “wow” and not “ugh”?

So I tried a bunch of chart tools. I used them on real work. I broke some things. I fixed them. And yeah, I have feelings about it. (I documented the whole experiment in a no-fluff recap you can skim here.)

You know what? Pretty charts are nice. But clear charts feel even better. If you just want the easiest path to sane defaults, there's a quick checklist over here.

My quick wish list

Clean by default
Fast on mobile
Dark mode that doesn’t look muddy
Good tooltips (no tiny text)
Exports that don’t blur when printed
A path for big data, like 50k points
Basic a11y (labels, focus, ARIA)

If you want a hosted, out-of-the-box option that already nails most of those bullets, give EJSchart a whirl. For a side-by-side look at seven popular libraries, check out this comparison.

That’s not a small ask. Still, a few tools got me close.

Chart.js — my easy go-to

I used Chart.js for a coffee shop dashboard. It showed daily revenue and average order size. I had two days to make it. Chart.js was like a buddy. It just worked.

What I like:

Good defaults and quick wins
Plugins for labels and notes
The “tension” line looks smooth
Built-in decimation helped with large sets

What bugged me:

Big bundle if you add lots of plugins
Past 50k points, it can drag

Here’s a small line chart I shipped. Pretty, soft, and readable.

<canvas id="revenue" height="160"></canvas>
<script>
const ctx = document.getElementById('revenue').getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 0, 200);
gradient.addColorStop(0, 'rgba(99,102,241,0.6)');
gradient.addColorStop(1, 'rgba(99,102,241,0.05)');

new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Jan','Feb','Mar','Apr','May','Jun'],
    datasets: [{
      data: [12,19,9,17,23,28],
      borderColor: '#6366f1',
      backgroundColor: gradient,
      fill: true,
      tension: 0.35,
      pointRadius: 2
    }]
  },
  options: {
    responsive: true,
    plugins: {
      legend: { display: false },
      tooltip: { callbacks: { label: c => `$${c.parsed.y}k` } },
      decimation: { enabled: true, algorithm: 'lttb' }
    },
    scales: {
      y: { ticks: { callback: v => `$${v}k` } }
    }
  }
});
</script>

A tiny note: use system fonts and enough white space. It breathes better. Need more inspiration for gorgeous yet lightweight visuals? This walkthrough lays out the small tweaks that make charts pop.

ECharts — big, bold, and kind of fun

For a school site, I needed traffic charts with pan and zoom. Parents loved to pinch and zoom on phones. Apache ECharts felt flashy in a good way. The zoom tool and export button were a hit. For the scoop on how the biggest chart tool names stack up, see this field report.

Good stuff:

Themes look rich
Zoom and pan feel smooth
Exports are crisp
Huge data didn’t choke

Tough stuff:

The API names are… a lot
You’ll read the docs more than you want

Real code I used (trimmed):

<div id="traffic" style="height:280px;"></div>
<script>
var chart = echarts.init(document.getElementById('traffic'));
chart.setOption({
  tooltip: { trigger: 'axis' },
  toolbox: { feature: { saveAsImage: {} } },
  dataZoom: [{ type: 'inside' }, { }],
  xAxis: { type: 'category', boundaryGap: false, data: datesArray },
  yAxis: { type: 'value' },
  series: [{
    name: 'Visits',
    type: 'line',
    smooth: true,
    areaStyle: {},
    emphasis: { focus: 'series' },
    data: visitsArray
  }]
});
</script>

I used the “dark” theme one night. It looked like a city at midnight. Kind of loved it.

D3 — total control, but bring snacks

I made a custom survey chart for a non-profit gala. They wanted a “lollipop” chart with cute dots. Off the shelf tools couldn’t do it. So, D3.

Why D3?

You control every pixel
Great scales and axes
Can be small if you pick parts

But:

You write more code
Data joins take a minute to learn

My tiny lollipop sample:

<svg id="lolli" viewBox="0 0 420 200"></svg>
<script>
const data = [
  { label:'Food', value:82 },
  { label:'Music', value:67 },
  { label:'Decor', value:41 },
  { label:'Venue', value:74 }
];

const svg = d3.select('#lolli');
const x = d3.scaleLinear().domain([0,100]).range([100,380]);
const y = d3.scaleBand().domain(data.map(d=>d.label)).range([20,180]).padding(0.4);

svg.append('g').attr('transform','translate(0,0)')
  .selectAll('line').data(data).join('line')
  .attr('x1',100).attr('x2',d=>x(d.value))
  .attr('y1',d=>y(d.label)+y.bandwidth()/2)
  .attr('y2',d=>y(d.label)+y.bandwidth()/2)
  .attr('stroke','#cbd5e1').attr('stroke-width',4);

svg.append('g').selectAll('circle').data(data).join('circle')
  .attr('cx',d=>x(d.value))
  .attr('cy',d=>y(d.label)+y.bandwidth()/2)
  .attr('r',8).attr('fill','#10b981');

svg.append('g').attr('transform','translate(0,0)').call(d3.axisLeft(y));
svg.append('g').attr('transform','translate(0,180)').call(d3.axisBottom(x).ticks(5).tickFormat(d=>d+'%'));
</script>

It felt hand-made, which was the point. If you're hunting for open-source options beyond the usual suspects, this write-up might help: I tried a bunch of open-source JavaScript chart tools—here's what actually worked.

Recharts (React) — smooth in React land

My team ships React. Recharts fits that mood. It uses components, so state and props feel natural. Not the flashiest, but it’s calm and steady.

Pros:

Great DX in React
Composable parts
Easy theming with CSS

Cons:

Heavy sets can lag
Less wild chart types

Tiny example:

<LineChart width={320} height={160} data={data}>
  <XAxis dataKey="day" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Line type="monotone" dataKey="orders" stroke="#f59e0b" dot={false} />
</LineChart>

I used this in a sales card list. It felt snappy.

Highcharts — polished, but watch the license

For a finance client, I used Highcharts Stock. The range selector and flags saved me hours. It looks fancy without much work. But heads up: you need a license for paid work.

What I saw:

Great time series tools
Crisp labels and exports
A11y module is solid

Trade-off:

Cost, of course

Want to stay in the free tier? There’s a rundown of no-cost libraries right here.

Plotly.js — science class energy

I used Plotly for