jQuery Plugin For Github Style Heatmap Calendar - Contribution Graph

File Size: 7.25 KB
Views Total: 4680
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For Github Style Heatmap Calendar - Contribution Graph

Just another jQuery plugin that renders a Github style, SVG based calendar heatmap for user profiles to represent time series data. Inspired by Github's contribution calendar graph.

Integrated with the tooltip functionality that allows the user to view the details when hovering over the blocks.

See also:

How to use it:

1. Include the JavaScript github_contribution.js and Stylesheet github_contribution_graph.css on the page.

<script src="/path/to/jquery.min.js"></script>
<script src="js/github_contribution.js"></script>
<link href="css/github_contribution_graph.css" rel="stylesheet" />

2. Create an element to hold the calendar heatmap.

<div id="myheatMap"></div>

3. Define your data (a list of timestamps) for the calendar heatmap.

myData = [1544415560251, 1560745160251, 1553833160251, 1544761160251, 1540354760251]

4. Generate a basic calendar heatmap.

$('#myHeatMap').github_graph( {
  data: myData
  texts: ['completed task','completed tasks']

5. Override the default day/month names as per your needs.

$('#myHeatMap').github_graph( {
  data: myData
  texts: ['completed task','completed tasks'],
  month_names: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
  h_days : ['M','W','F'] // horizontal day name

6. Override the default colors.

$('#myHeatMap').github_graph( {
  data: myData
  texts: ['completed task','completed tasks'],
  colors: ['#eeeeee','#d6e685','#8cc665','#44a340','#44a340']

7. Trigger a function as you click a slot.

$('#myHeatMap').github_graph( {
  data: myData
  click: function(date, count) {
    console.log(date, count);



  • Tweak params.


  • Fixed register click event and added count to click callback.


  • Typo fix


  • Fixed when there are no items

This awesome jQuery plugin is developed by bachvtuan. For more Advanced Usages, please check the demo page or visit the official website.