Developers March 4, 2020

Your favorite (affordable) charting libraries

scholz

I'm curious to know which charting libraries you use. For a new project I'm working on, I need to add several charts (especially area & line charts). Right now I'm using apexcharts because they provide a nice integration with Vue.js. They do a good job but I'm not super happy with the performance for larger sets.
(Which could definitely just be a configuration issue on my end)

I've seen libraries like Highcharts or Fusioncharts and they look & feel incredible, but for projects without much revenue their price is just too high.

I absolutely understand that making professional charting libraries costs either money for devs or time from open source contributors. It's just not possible for probably a lot of bootstrapped projects to spend xxx-xxxx$ for a license in the beginning.

So I'd love to know:

  • Which charting library do you use? Is it a paid or free version? Also, is it limited to a specific framework?
  • Did you stick with the same one forever or change from a free to a paid one over time?
  1. 3

    For simple data charts/graphs I've found Chart.js to be sufficient. It obviously lacks a lot of the extras that something like Highcharts has, but it's opensource and free so that's an easy to understand tradeoff.

    For some more advanced stuff we've also used D3. It's less of a graph/chart library, and more of a toolkit for building data visualizations. We've used it to build out our own chart/graph components, and then re-use those in our project. It's fairly low level, so you it does have a bit of learning curve but gives us the power to basically replicate any feature from other libraries that we might be missing. Probably not the worth the effort for simple or one-off implementations, but we constantly re-use similar visuals so found the time investment to be worth it.

    1. 1

      Thanks for sharing. Yeah Chart.js was one of the first ones I tried. But I think I wasn't totally convinced by the examples. I should probably give it another go.

      I see D3 gets recommended a lot of times. But yeah, as you said I didn't want to go to deep but was rather looking for a simpler solution to integrate charts. Especially because I'm not sure if a paid solution is preferrable in the future I didn't want to re-invent what others have already done with D3

  2. 2

    I've been using ReChartsJs, which was great for a ReactJs project.

    1. 1

      Looks great, I remember seeing this when researching but unfortunately for me it only makes sense when also using react

  3. 2

    Hi,

    First time poster, I haven't even introduced myself, that can wait.

    I have been using https://vega.github.io/ (it's also built on D3) and Vega-Lite for most of my projects. It's very versatile and lets you specify charts declaratively (json). They have plenty of examples which will hopefully convince you.

    1. 1

      Hi,

      thanks for sharing. They look great, will give them a try.

    2. 1

      I’ve heard decent things about Vega-lite, will give it a shot.

  4. 2

    Author of ApexCharts here.
    Yes, the performance of ApexCharts might not be the best in the case of large datasets. But, I suggest you turn off all heavy features such as animations, markers, data-labels, etc.

    Having gone through a number of different charting libraries before creating one, I personally loved echarts. Although very heavy in size, it is more performant and handles big datasets well (because it uses canvas to draw instead of SVG)

    1. 1

      Thanks for joining in, really appreciate it. I agree turning off the animations and markers made a great difference in my case. I only found out about that through a Github issue, is this mentioned in the docs?

      Don't get me wrong I'm still a fan of apexcharts, because they feel super easy to use while also being flexible enough to customize them. Not to mention that they cover all kinds of frameworks.

      I'll definitely take a look at your recommendation of echarts, but I guess I'll stick with ApexCharts for now before making the jump to paid solution in the future.

  5. 1

    We've been using Highcharts since the beginning, they also have a $50 startup license which might suite you for the first year.

    1. 1

      I saw that offer but I felt that one year was not enough time before having to decide if its worth the then much higher price tag or not, but I can be wrong on this point. But I admit highcharts seems to be one of the best tools out there.

      1. 1

        Switching over to a different charting library can be troublesome and costly time wise. You might end up spending more since you're waisting development time switching libraries or writing code for existing solutions.

        1. 1

          Yeah exactly, that was my main concern with the cheap entry offers for paid solutions such as Highcharts. I don't want to get into the situation where I need to swap out all the graphs because the regular paid versions are too costly. Also potentially downgrading to a "worse" solution.

          I think I'll stick with my current open source solution until something like Highcharts is a viable option.

  6. 1

    I'd suggest Flot[1] for two big reasons: it's open source (free but community-supported), and it's performance is great (even a major project like Grafana[2] uses it).

    [1] https://www.flotcharts.org
    [2] https://grafana.com (demo: https://play.grafana.org)

    1. 1

      Thanks for sharing, haven't seen this one yet. I will take a look at it.

  7. 1

    Look for libraries based on D3 (there are couple of them) and then restyle them - not everything looks the best at first sight. At least that's what I'd do.

    1. 1

      I always felt that the hover detection with D3 is very strict. What I mean is that when trying to hover over points in a line chart you have to be exactly above the marker otherwise it will not show the tooltip. But maybe there are some libraries out there that solve this.

      1. 2

        I don't have direct experience, so cannot confirm & deny this. However D3 just generates whatever elements you want so naturally it should be customizable.

  8. 1

    This comment was deleted 5 months ago.