Create Calendar Heat Maps Like Github Using These Libraries

Jan 24, 2024

If you want to generate heat maps to visualise date-based activity you can use these best JavaScript Libraries.

Some are truly inspired by Github Contribution graph where activity is shown with colour shading intensity.

1. Calendar Graph Inspired By Github Contribution

Heat.js is create by William Troup which is a light weight JS Library for creating heat maps to visualise date-based activity and trends.

JavaScript Library To Create Calendar Graph Like Github
Heat.js

Features Of Heat.js

  • Zero-dependencies and extremely lightweight!
  • Full API available via public functions.
  • Fully styled in CSS/SASS, fully responsive, and compatible with the Bootstrap library.
  • Full CSS theme support (using :root variables).
  • Fully configurable per DOM element.
  • Toggling colours on/off support.
  • Export all data to CSV.
  • 12 language translations available!
  • Trend types allows data to be split up and viewed separately.
Github Repo

2. Dynamic Github-like Heat Map

gh-heatmap is a simple github like contrubution graph create by Michael Attenberger.

This is create using vanilla JavaScript.

To use first you have to import heatmap.js and heatmap.css in your project.

Github Repo

3. Contributions Calendar

Contributions Calendar is a vanilla javascript web component implementation of contributions calendar.

Features

  1. Vanilla Javascript Web Component
  2. No third party dependencies
  3. Shadow DOM encapsulation

For the implementation you just need to import or include contributions-calendar.js in your index file.

Github Repo
Demo