What is github-contributions-chart?

sallar/github-contributions-chart — explained in plain English

Analysis updated 2026-06-26

★ 5,591JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((gh-contributions-chart))
    What it does
      Visualize all contributions
      Export as image
      Custom color themes
    Tech Stack
      JavaScript
      Node.js
      Vercel
    Use Cases
      Portfolio images
      Social sharing
      Self-hosted deploy
    Audience
      Developers
      Open source contributors
    License
      MIT permissive

mindmap root((gh-contributions-chart)) What it does Visualize all contributions Export as image Custom color themes Tech Stack JavaScript Node.js Vercel Use Cases Portfolio images Social sharing Self-hosted deploy Audience Developers Open source contributors License MIT permissive

Click or tap to explore — scroll the page freely

What do people build with it?

USE CASE 1

Export your full GitHub contribution history as an image to share on Twitter, LinkedIn, or your portfolio.

USE CASE 2

Run a self-hosted copy of the contribution chart generator for your GitHub organization or team.

USE CASE 3

Add a custom color theme to the contribution chart and contribute it back to the project.

What is it built with?

JavaScriptNode.jsVercel

How does it compare?

	sallar/github-contributions-chart	livebud/bud	facebook/metro
Stars	5,591	5,591	5,593
Language	JavaScript	JavaScript	JavaScript
Setup difficulty	easy	moderate	easy
Complexity	2/5	3/5	3/5
Audience	developer	developer	developer

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

Your GitHub profile activity must be public, the 'hide activity' setting must be off for the tool to read your data.

MIT license, use freely for any purpose, including commercial, as long as you keep the copyright notice.

So what is it?

This project generates a visual image of every contribution a GitHub user has made since they first created their account. The result is a chart you can save and share on social media or use as a profile image elsewhere. GitHub already shows a similar contribution grid on your public profile page, but it does not offer a way to export or download it as a standalone image file. This tool fills that gap. To use it, you need a GitHub account with public activity enabled. There is a setting in GitHub called Make profile private and hide activity, and it must be left off, otherwise the tool cannot read your contribution data. The README notes that GitHub's own official API does not expose this kind of user statistics, so the project uses a custom API layer built into the application to retrieve it. The code is a web application written in JavaScript and deployed on Vercel, a hosting platform for web apps. If you want to run your own copy locally, you install the dependencies using NPM and start a development server with a single command. Chart themes, which control the color scheme of the generated image, live in a separate companion repository. You can add a new theme by contributing to that other project and also submitting a small update here to include the theme name in the list. The README is short and covers requirements, local setup, deployment, and how to add themes. The project is open source under the MIT license.

Copy-paste prompts

Prompt 1

How do I run the github-contributions-chart app locally? Walk me through npm install and starting the dev server, then generating a chart for my GitHub username.

Prompt 2

I want to add a new color theme to github-contributions-chart. What files do I need to change in the themes repo and in this repo?

Prompt 3

How does github-contributions-chart fetch contribution data if the GitHub API doesn't expose it? What is the custom API layer doing?

Prompt 4

I want to deploy my own copy of github-contributions-chart on Vercel. What environment variables or config do I need to set?

Frequently asked questions