HighCharts vs D3 charts

Sanket Sahu
Admin & Dashboard Themes
2 min readDec 21, 2015

Our quick analysis of HighCharts & D3 in one of the projects.
[Contribution credits: Amith MS]

HighCharts:

HighCharts is amazing. Though the license is not commercially free but it’s worth the penny. I liked it especially because of the following reasons.

  1. Built using SVG which gives us the flexibility of applying CSS styles
  2. Easy to customize with a lot of options
  3. We created a bar-graph with the exact same design as it was provided by the client in the PSD — Worked well
  4. Easy Tooltip integration
  5. Easy to sync between different charts
  6. Highly documented
  7. Supports a wide-range of standard plotting

What we didn’t like

  1. Doesn’t have cross-filter. By cross-filter I mean, few other graphs provided an option which synced the dataset between different graphs on the page

D3:

D3 is the de-facto for JavaScript chartings. It’s amazing and it can be used to visualize a wide range of data-set. Good things include

  1. Built using SVG for easier customization
  2. Easy to plot non-standard visualization: It is not specific to Graphs or Charting and can be used for any type of visualization. As the name itself suggests, it is more of “data driven documents”
  3. Highly customizable because of it’s low-level API
  4. Liked dc.js (http://dc-js.github.io/dc.js/) — Built on top of D3, something like HighCharts but less documented. Has cross-filter between the graphs

What I didn’t like (especially for my use-case)

  1. Too low level
  2. It’s like re-inventing the wheel

Conclusion

If you’re looking for a non-standard visualization or a true Open source solution, you should use D3. For something commercial with a known standard type of plotting, you should use HighCharts.

A bit about us

We build amazing Dashboard themes which involves plotting charts and graphs focused to run a business. We are StrapUI.

--

--

Sanket Sahu
Admin & Dashboard Themes

Founder GeekyAnts • Building gluestack-ui & NativeBase • (he/him)