explaingit

sallar/github-contributions-chart

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

TLDR

A web app that turns your entire GitHub contribution history into a downloadable image you can share on social media, GitHub doesn't offer this export itself.

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
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

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.

Tech stack

JavaScriptNode.jsVercel

Getting 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.

In plain English

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?
Open on GitHub → Explain another repo

← sallar on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.