Github Readme Activity Graph
An activity graph to show you github activities (or contribution)
Github Readme Activity Graph
Supported by JetBrains
A dynamically generated activity graph to show your GitHub activities of last 31 days.#⚠️ NOTICE: DEPLOYMENT MOVED ⚠️
The canonical deployment is now https://github-readme-activity-graph.vercel.app. Previous deployments at https://activity-graph.herokuapp.com (Heroku free tier discontinued) and https://github-readme-activity-graph.cyclic.app (Cyclic.sh shut down in early 2025) are no longer reachable. For background see issue #197.
Please refer to the updated link here
#Table of contents
- Table of contents
- How to Use
- Use themes
- Available Themes
- Customization
- Deploy on your own Replit instance
- Deploy on your own Vercel instance
- Contributing
- Core Team 💻
- Contributors ✨
- Resources Used to build this project
- Star History
#How to Use
Just paste the following URL in your profile readme and you are good to go.
Pass your username in the URL
[](https://github.com/ashutosh00710/github-readme-activity-graph)
#Attention ⚠
#Use themes
username=ashutosh00710&theme=theme_name
[](https://github.com/ashutosh00710/github-readme-activity-graph)
Manual Customization is also available
#Available Themes
| Name | Preview |
|---|---|
| Default (cotton candy) | |
| react | |
| react-dark | |
| github | |
| github-compact | |
| xcode | |
| rogue | |
| merko | |
| vue | |
| tokyo-night | |
| high-contrast |
For more themes click here
#Customization
Customize the appearance of your Activity Graph however you want with URL params.
#Common Options
| Arguments | Description | Type of Value |
|---|---|---|
bg_color |
card's background color | hex code (without #) |
border_color |
card's border color | hex code (without #) |
color |
graph card's text color | hex code (without #) |
title_color |
graph card's title color | hex code (without #) |
line |
graph's line color | hex code (without #) |
point |
color of points on line graph | hex code (without #) |
area_color |
color of the area under the graph | hex code (without #) |
area |
shows area under the graph | boolean (default: false) |
hide_border |
makes the border of the graph transparent | boolean (default: false) |
hide_title |
sets the title to an empty string | boolean (default: false) |
custom_title |
set the title to any string | string |
theme |
name of available themes | string |
radius |
border radius of graph | number (0-16 inclusive) |
height |
height of the graph | number (200-600 inclusive) |
days |
number of to days display on graph | number between (1 - 90) [Recommended below 40] |
from |
date from which the graph starts | format YYYY-MM-DD |
to |
date where the graph will end | format YYYY-MM-DD |
grid |
show grid | boolean (default: true) |
⚠ For custom_title please make sure that you are using %20 for spaces
Example:
custom_title=This%20is%20a%20title
[](https://github.com/ashutosh00710/github-readme-activity-graph)
Example:
[](https://github.com/ashutosh00710/github-readme-activity-graph)
#Deploy on your own Replit instance
Step-by-step instructions for deploying to Replit (from UI)
#Follow the steps
- Sign in to Replit or create a new account at https://replit.com
- Click the Deploy button below
-
On the page that comes up, choose language as
Node.jsand then clickImport from GitHubButton -
Visit this link to create a new Personal Access Token
-
Scroll to the bottom and click "Generate token"
-
Wait clone done and add
Secretswith yourGithub token -
Click the green
RUNbutton on top, the console will run and at last the url will shows on the right -
Now just add the following to your profile readme and you're good to go

#Deploy on your own Vercel instance
Step-by-step instructions for deploying to Vercel (from UI)
#First Method
- Go to vercel.com.
- Click on
Log in. - Sign in with GitHub by pressing
Continue with GitHub. - Sign in to GitHub and allow access to all repositories if prompted.
- Fork this repo.
- Go back to your Vercel dashboard.
- To import a project, click the
Add New...button and select theProjectoption. - Click the
Continue with GitHubbutton, search for the required Git Repository and import it by clicking theImportbutton. - Create a personal access token (PAT) here and enable the
repopermissions (this allows access to see private repo stats). - Add the PAT as an environment variable named
TOKEN. - Click deploy, and you're good to go. See your domains to use the API!
#Second Method
Alternatively, click the button below and follow the instructions.
After the deployment is complete:
- Click the
Continue to Dashboardbutton - In the
Settingstab, click onEnvironment Variablesand follow steps9.and10.ofFirst Method. - Go to
Deploymentstab and redeploy the project.
#Finally
Now just add the following to your profile readme and you're good to go.

#Contributing
Please read through our contributing guidelines. Directions are included for opening issues, coding standards, and notes on development.
#Core Team 💻
#Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
#Resources Used to build this project
| Purpose | Library Name | Link |
|---|---|---|
| Graph Construction | CHARTIST.JS | https://github.com/gionkunz/chartist-js |