“A picture is worth a thousand words.”

In the digital world we live in today, users demand a way to draw quick and effective conclusions from data across a multitude of mobile devices of every shape and size – devices that fit in your hand, slip into your bag, or even wear on your wrist. Data visualizations like graph plots and charts must be able to scale and adapt to the dimensions of a display so that the complete picture or narrative of the information is fully conveyed.

Popular Visualization Libraries

Python is a preferred language in financial and scientific research because of its plethora of available numerical libraries. NumPy is one such Python library that acts as a wrapper around underlying C and Fortran code, making it computationally fast. Another Python library, Matplotlib, can be used to render 2-dimensional plots like histograms, bar charts, scatter plots, and many others. Combined with NumPy, Matplotlib can render great data visualizations all in just a few lines of code.

For example, below is a line chart comparing the performance of 2 tech stocks for the month of January 2017: Google (GOOG) and Microsoft (MSFT).

In addition, Matplotlib allows you to add your own labels along the axes, provide a custom title and even adjust line colors (see here for more details: https://matplotlib.org/api/pyplot_summary.html). Python libraries like Matplotlib render good data visualizations for scientific and financial applications.

But with Matplotlib, what you see is about all you really get – a data visualization that is a bit lacking in a highly demanding digital era. Aside from eye-appeal, how will this graph plot respond to a wide-variety of device displays – from smartphones to tablets, even to watch faces?  Here’s the same graph rendered on an iPhone 6 Plus and Samsung Nexus 5x devices.

Ouch.  Not a very responsive design for smaller device screens. More importantly, the logic to adjust the appearance of the line chart, commonly referred to as the presentation layer, is baked directly into the backend logic layer. This is generally considered a bad coding practice, as the design is not scalable and it is difficult to maintain a presentation layer when it’s mixed with a logic layer.

Why Chartist.js?

There is no shortage of charting libraries available today, like Matplotlib. But a newer library, Chartist.js, is the result of a developer community frustrated and let down by many other data visualization libraries out there today. Chartist.js provides a simple and expandable framework for creating responsive charts that look great regardless of what device is being used.

But just how simple is it really? To start, Chartist.js is only 10KB in size with no outside dependencies! This is absolutely astounding considering what it provides in return. Also, with no outside dependencies, your application won’t run the risk of breaking or becoming out of sync during future updates.

Chartist.js also separates the presentation layer from the logic layer by moving the styling of data visualizations into a Cascading Style Sheet (CSS). By specifying the style of your data visualization in CSS, it not only provides a much cleaner design and adheres to best practices of separation of concerns, but also takes advantage of the capabilities of CSS animations and transitions.

Next, Chartist.js leverages the Scalable Vector Graphics (SVG) format to create its eye-popping charts, which is arguably the future image format for web illustrations. SVG is much more powerful than traditional image formats like JPEG and PNG. SVG is easily manipulated in code and results in smaller image sizes, which translates to faster page loads. By using SVG to render graph plots, Chartist.js is guaranteed to be supported by all major desktop and mobile browsers.

Lastly, Chartist.js has a strong development community supporting a multitude of plugins, like tooltips popups, value thresholds, and chart zoom-in/out, just to name a few. Writing your own plugins is very simple and allows the developer to extend the basic functionality of charts.

Let’s take another look at the same 2 tech stocks above (GOOG and MSFT) for the month of January 2017, this time with a line chart prepared using Chartist.js.

Apple iPad	Samsung Nexus 5x

As you can see, Chartist.js seamlessly adapts the line chart to scale to the dimensions of display, delivering a complete picture of a data visualization to the end user.

Conclusion

Chartist.js yields a much more eye-appealing, responsive and technology-forward graphing capability than many other data visualization libraries available today. Regardless of the screen size of the device, Chartist.js automatically scales the chart to fit the resolution of the display. Leveraging Scalable Vector Graphics, the charts are guaranteed to be supported in all major browsers and load much faster than traditional image formats. Also, by separating the appearance of the charts into CSS, Chartist.js not only takes advantage of the latest in CSS animations and transitions but also yields much greater possibilities for further customizations. Most importantly, Chartist.js offers eye-popping, highly-customizable graphing capabilities to a financial and scientific community that was previously constrained to boring, bland data visualizations.