А Real-World Example for Picking Better Dependencies

Introduction

We all realize the importance of creating the minimal bundle size possible and performing numerous optimizations to mitigate the effects of the dependency mesh. I believe we can tackle the issue effectively by choosing the right libraries, and I would argue that Chartist is one of the best choices for charts.

Bundle size

Why is bundle size important? The quick answer is speed and load time. More libraries mean more code, more code is more MBs, and more MBs mean a longer download and code-processing time. That said, pick the correct libraries, reduce the bundle size and make your user happy!

Considerations when picking a library

The libraries you pick should be widely used, frequently updated, and documented. It is always reassuring to see a few dozen contributors mentioned and if the library has a dedicated website, it is solid. Do not forget to check the number of dependencies, as this is an easy way to bloat the bundle size and people often overlook it. Attempt to pick libraries with the fewest dependencies possible. For example, Chartist has no dependencies!

Why Chartist

Chartist covers the basics, is customizable, and has the FAQs already answered by the community. It is also ~10kB when minified and zipped and has 0 dependencies.

I like it because it is easy to use and has responsiveness options. Take a look at a few examples:

My experience

Discovering Chartist

The project I currently work on is SEO focused. We have emphasized speed and HTML semantics to reach the top of Google search results. I couldn’t afford to pick any charting library as most are needlessly bloated and could prove detrimental to our SEO score. Proper research was due...

Google and Stack Overflow are my go-to sources of information. I reviewed the top results, rephrased my search term several times, and eventually landed on the Chartist website. The statement “ONLY 10KB (GZIP) WITH NO DEPENDENCIES!” hooked me. As I read further into the documentation, the library seemed to fit my needs perfectly.

Chartist Hero

My task

My job was to create a dynamic line chart representing trends over the last 5 years. The first chart is the goal and the second chart is the result I got using Chartist.

Chart Goal Chart Result

Research, implementation, and troubleshooting all took me around 3 hours - much less than what I expected given the performance restrictions put on the application.

Customization

Options

This is the code I started with

code1

And this is what it got me chart3

The elephant in the room was the coloring. Everything else was tolerable the way it came. It turned out, however, that I fixed several visuals just because it was easy to do so.

Let us start by eliminating the elements we don’t need - the points and all but the zero grid line. Extend the options like this

code2

showPoint: false will hide the points axisX: { showGrid: false } hides the vertical grid

Inside of axisY referenceValue: 0 will guarantee we have the 0 horizontal grid line and labelInterpolationFnc: value => value === 0 ? value : null } will hide all horizontal grids of values different than 0

The result we got is this

chart4

CSS

Chartist comes with default colors for the lines and the area beneath them. The easiest way to change them is done via plain old CSS.

Each of the data series (lines) receives a class name in the format of ct-series-{letter} where letter is a,b,c…

code

As you can see the chart is in fact an SVG so the color manipulations happen via the stroke and fill properties.

code3

#red-gradient and #green-gradient represent the custom gradients I needed for the area beneath the red and green lines. You must define them as follows somewhere in the HTML.

code4

The last changes produce this and it’s almost pixel-perfect!

Chart Intermediate

Conclusion

By now, we have nearly nailed the design. You can reach the result with further customization, but that’s not the point. What is important is that you got the basics of a library that does a splendid job and is 10+ times lighter than what you’d expect. Just imagine the impact a proper selection of libraries can have on your next project’s bundle size…

Q&A

: Bundle size directly affects a web application's speed and load time. More libraries mean more code, which results in larger file sizes, longer download times, and increased code-processing time. Choosing smaller libraries reduces these adverse effects and improves user experience.
: When choosing libraries, it's important to prioritize those that are widely used, frequently updated, and well-documented. A library with active contributors and a dedicated website is a solid choice. The number of dependencies should also be considered, as excessive dependencies can bloat the bundle size. Opt for libraries with minimal dependencies whenever possible.
: Chartist is recommended for creating charts due to its advantages. It covers the basics, offers customization options, and has an active community that provides FAQs and support. Notably, Chartist's bundle size is minimal (~10kB when minified and zipped) and has zero dependencies. Its ease of use and responsiveness options make it suitable for various projects, and it addresses the challenge of minimizing bundle size while maintaining chart functionality.