Your prefered JS Library for Charts/Diagrams? (2021 Edition)

Charts and diagrams can represent data more visually. Many of you may rely on JS libraries that make this possible to do this successfully.

Which approach currently appeals to you the most, which offers the following:

* Appealing visualization
* Support for many chart/diagram types
* All outputs should be customizable
* The library is actively developed
* Reasonable learning curve
* Responsive
* Fast loading times/general performance

Bonus/Optional:

* Convenience together with Laravel

I'm eager to hear your opinions **including your reasons why** you like it the most.

21 thoughts on “Your prefered JS Library for Charts/Diagrams? (2021 Edition)”

  1. I had to create some reporting for my company’s application that includes graphs, and I had a good experience with Chart.js. I’m not an expert in this arena, but I found it was easy enough to pick up, was flexible, and aesthetically pleasing. I didn’t find any packages to integrate it with Laravel, so I had to create my own models and utility classes to pass down to it to include with my report.

    One drawback may be that it uh, LOOKS like Chart.js, if that makes sense. And if you’re trying to pack in a lot of data represented in clever ways with a single graph, it may not do what you need it to. I was using it for pretty straightforward line graphs, bar graphs, and stacked bar graphs.

    If there is another good chart/graphing library that DOES have integrations with Laravel I’d love to hear it, but I’m not personally aware of any.

    Reply
  2. JavaScript packages have nothing to do with Laravel. They work with just about anything. Some packages may have Laravel wrappers but that’s a convenience thing.

    I would go ApexCharts over ChartJs. It has more handy features and is SVG based.

    Beware: charts and PDF generation can be a huge pain. If you’re asked to do it, don’t automatically say “no problem”. There can be output issues.

    Reply
  3. Apex charts for me, there is a vue wrapper as well. Why? It is pretty easy to use, looks good enough, and works back to ie11 with a few polyfills.

    Reply
  4. Tried a few, most either performed very badly with largeish datasets or lacked features. Settled on Plotly, it’s pretty decent.

    Reply
  5. I’ve use c3js, it’s very simple yet so powerful, it’s completely intended to be feeded with json but in my case I’ve just write a provider class in php that gets the data the way the plugin needs it

    Take a look https://c3js.org/

    Reply
  6. Google charts still do the job for me, but meh. I came here looking for suggestions so I can’t be that happy with it I guess….

    Reply
  7. I use a thing called “chart director” which generates charts in the backend because I need the php magic when mangling the data. None js but its php.

    Reply
  8. Echarts. It has dark mode! I don’t use it with laravel as frontend though; only laravel as api.

    I’ve also tried highcharts and amcharts before.

    Reply
  9. For a Laravel + Livewire project that relies heavily on charts, we chose [FusionCharts](https://www.fusioncharts.com).

    We evaluated it with HighCharts and Echarts. All 3 libraries have support for complex charts, but:
    \- FusionCharts is the more visually polished than Echarts. Also have dark theme and you can easily create your theme as well. Maybe you can tweak Echarts to be as beautiful, but that, if possible, can be very time-consuming for a small team.

    \- FusionCharts has very good docs (Echarts has mixed of Chinese and English docs and GitHub issues that can be an issue).

    \- Compared to Highcharts, FusionCharts pricing is more affordable for early-stage SaaS startups. Paying for it we get support from their team, something that it’s not available for Echarts.

    Reply
  10. u/Blankster82 what did you end up using and why? I have the same requirements (except the Laravel integration) and am curious.

    Reply

Leave a Comment