How to Embed GitHub Contributions Chart/Calendar

Embed GitHub Contributions Chart Calendar

Wouldn’t it be great to embed your GitHub contribution chart/calendar into any web page?

Well you can, and it’s very easy!

How to embed GitHub contributions on a website

First you need a web page where you can embed HTML. If you need help with setting up a website, we’ve provide more complete instructions here.

If you already have a web page ready, then embed your contributions chart by using the below HTML image code, just replace username with your GitHub username (e.g. from https://github.com/username) .

<img src="http://ghchart.rshah.org/username" alt="Name Your GitHub chart">

Here’s an example of what it’ll look like:

If you want to use a custom color for the chart use the below code with your HEX color.

<img src="http://ghchart.rshah.org/HEXCOLORCODE/username" alt="Name Your GitHub chart" />

Here’s an example of what it’ll look like:

That’s it, you’re done! Here’s a look at example charts using the code:


Resources


How Can We Make This Better?

How can we make this how-to guide better? What wasn’t clear? Please let us know in the comments!