Adding Trendlines to Existing Charts in Chart.js

Chart.js at a Glance

Chart.js is an amazing Javascript charting library. It's very simple yet flexible and powerful. We have been using Chart.js in numerous projects for many years now. Version 2.1.0 has introduced a plug-in support. Whenever you have support for plug-ins, possibilities become endless.

Trendlines

Serious data analytics is unimaginable without trendlines. A trendline is a simple yet powerful concept. To put simply, a trendline represents the behavior of a set of data to determine if there is a certain pattern. Trendlines show the general course or tendency of something.

Chart.js and Trendlines

Unfortunately, Chart.js does not provide trendlines out of the box. Thus, we are left with two options. The first option is to calculate the trendline on our own and add it as a separate dataset. The other options is to create a plug-in for that. Obivously, the second option is more preferable as it integrates trendline calculation right into the plug-in.

Trendline Plugin from @Makanz

There is a nice plugin for Chart.js from @Makanz. Unfortunately, the plug-in does not work for time-series data out of the box. Fortunately, the mentioned plug-in is quite easy to modify to add support of time series data. If you need to add trendlines to time series data, you can use our fork from this repository https://github.com/SigloTech/chartjs-plugin-trendline

Thank You

Did you like this post? If so, make sure to follow me on Twitter to get the latest updates from me.