Developers October 28, 2020

How to draw charts in a web app?

Max Prilutskiy @prilutskiy

What do you guys use to render some charts in your web app? Pie, bar, line charts, etc.

  1. 7

    For standard charts, I use chartjs

    For complex charts, D3 works well

  2. 3

    I've spent the past two years working with web charts and tried most of the libraries and I can tell you that if charts are a big part of your app you should definitely go with d3.

    It might seem hard at first but it will pay off in the long run. Most of the charting libraries use d3 under the hood and if you want to customize them you'll end up spending more time figuring out workarounds than just building everything yourself with d3. And once you get the basic idea of how d3 works it's really not that hard to build amazing beautiful, and performant charts, tailored specifically for your data.

    If you're using React then try visx, it's basically d3 but with helpful components. And it's easy to mix both.

  3. 2

    I use Google charts for almost everything. It's easy to use but maybe a bit ugly.

    For something more complex and custom I use D3. But it's difficult to master, I just take an example from their gallery and tweak it a bit to suit my use case.

  4. 2

    I would recommend using Cubejs if you want a tool that handles both the frontend (data display) and the backend (data aggregation) parts of your analytical web app.

  5. 2

    From my experience, chartjs works really well and is quite easy to deploy !

    If you have complex charts to display you could give a try to d3 but it's quite complex

    1. 1

      Yeah, d3 seems to be a great tool, very complicated though. Do you have an experience with it? How long it usually takes to implement common charts with d3?

      1. 2

        There are charging libraries built on top of D3 if you want standard charts. Use D3 directly only if you want to build something unique.

      2. 2

        If you know how you would build the chart with SVG, d3 can provide you with a great API for folks who want quite a bit of control. If you are willing to forego some control and live with pretty decent defaults, there are other simpler APIs to learn.

  6. 2

    I use the D3 javascript library, you can find more info in their site
    Have integrations with some frameworks, I used it in Angular and worked fine!

  7. 1

    I've used Google charts in the past and that works great.

  8. 1

    d3 will allow for you to create almost anything, as long as you're willing to put in the time to learn it. I find that for most web apps, it's overkill. If you're just looking for bar/pie/line charts, I wouldn't suggest building your own with d3.

    I use highcharts.com for most projects as it has so many built-in charts and is easy to customize, chartjs.org when I have a simple chart and don't want the highcharts branding on it, and d3 only when the data visualization is something truly unique.

  9. 1

    I would recommend apexcharts.com for most charts.

  10. 1

    @rofws @joinik with d3, what was those complex things you’ve built? Is it powerful?

    1. 2

      I build an interface to display a bigdata system data portion using graphs. We could represent lots of data, but when there was too much data, the browser was overloaded and the performance was not its best...

      1. 1

        How much does it usually take to add a new graph using d3?

        1. 2

          It depends so much on how you want to use it, but in our case we did it such configurable that with a constructor of a class "graphConfiguration" we could generate absolutely different graphs. As was that customizable, we worked for a week aprox. but in the PoC we did to check the tool, we could create some interesting static graphs in less than an hour.

          1. 1

            Got it. Well, that’s not that bad! I expected it to be worse, tbh

            Thanks 🙏🏻

    2. 2

      This is not something I've built myself, but here's an example. It's quite powerful.

      1. 1

        Wow, that’s something!
        How long it usually takes to implement charts like that with d3? Like, a couple of days? Given that I don’t have experience with d3

        1. 2

          Generally about a week, depending on how proficient you are with javascript. It's a bit of a steep learning curve, but every bit as enjoyable.

Recommended Posts