A dynamically generated activity graph to show your GitHub activities of last 31 days.
The deployment of this project is moved from https://activity-graph.herokuapp.com
domain to https://github-readme-activity-graph.cyclic.app
. In case https://github-readme-activity-graph.cyclic.app
doesn't work try with https://github-readme-activity-graph.vercel.app
for more details, refer this
Please refer to the updated link here
- 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
Just paste the following URL in your profile readme and you are good to go.
Pass your username
in the URL
[![Ashutosh's github activity graph](https://github-readme-activity-graph.vercel.app/graph?username=Ashutosh00710)](https://github.com/ashutosh00710/github-readme-activity-graph)
username=ashutosh00710&theme=theme_name
[![Ashutosh's github activity graph](https://github-readme-activity-graph.vercel.app/graph?username=Ashutosh00710&theme=dracula)](https://github.com/ashutosh00710/github-readme-activity-graph)
Manual Customization is also available
Name | Preview |
---|---|
Default (cotton candy) | |
react | |
react-dark | |
github | |
github-compact | |
xcode | |
rogue | |
merko | |
vue | |
tokyo-night | |
high-contrast |
For more themes click here
Customize the appearance of your Activity Graph however you want with URL params.
Arguments | Description | Type of Value |
---|---|---|
bg_color |
card's background 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
[![Ashutosh's github activity graph](https://github-readme-activity-graph.vercel.app/graph?username=ashutosh00710&custom_title=This%20is%20a%20title&hide_border=true)](https://github.com/ashutosh00710/github-readme-activity-graph)
Example:
[![Ashutosh's github activity graph](https://github-readme-activity-graph.vercel.app/graph?username=ashutosh00710&bg_color=fffff0&color=708090&line=24292e&point=24292e&area=true&hide_border=true)](https://github.com/ashutosh00710/github-readme-activity-graph)
Step-by-step instructions for deploying to Replit (from UI)
- 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.js
and then clickImport from GitHub
Button -
Visit this link to create a new Personal Access Token
-
Scroll to the bottom and click "Generate token"
-
Wait clone done and add
Secrets
with yourGithub token
-
Click the green
RUN
button 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
![Github Activity Graph](<url from step 5>/graph?username=<username>)
Step-by-step instructions for deploying to Vercel (from UI)
- 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 theProject
option. - Click the
Continue with GitHub
button, search for the required Git Repository and import it by clicking theImport
button. - Create a personal access token (PAT) here and enable the
repo
permissions (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!
Alternatively, click the button below and follow the instructions.
After the deployment is complete:
- Click the
Continue to Dashboard
button - In the
Settings
tab, click onEnvironment Variables
and follow steps9.
and10.
ofFirst Method
. - Go to
Deployments
tab and redeploy the project.
Now just add the following to your profile readme and you're good to go.
![Github Activity Graph](<{your_own_domain_name}.vercel.app>/graph?username=<username>)
Please read through our contributing guidelines. Directions are included for opening issues, coding standards, and notes on development.
Ashutosh Dwivedi π π» π π€ β |
Kshitij Srivastava π π» π π¨ |
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
Purpose | Library Name | Link |
---|---|---|
Graph Construction | CHARTIST.JS | https://github.com/gionkunz/chartist-js |