github-readme-activity-graph
A dynamically generated activity graph to show your GitHub activities of last 31 days.
Top Related Projects
:zap: Dynamically generated stats for your github readmes
📊 An infographics generator with 30+ plugins and 300+ options to display stats about your GitHub account and render them as SVG, Markdown, PDF or JSON!
🏆 Add dynamically generated GitHub Stat Trophies on your readme
🔥 Stay motivated and show off your contribution streak! 🌟 Display your total contributions, current streak, and longest streak on your GitHub profile README
A tool to generate your github summary card for profile README
Better GitHub statistics images for your profile, with stats from private repos too
Quick Overview
The GitHub Readme Activity Graph is a customizable SVG that displays a user's GitHub activity contributions. It provides a visually appealing way to showcase commit history, pull requests, and issues on a GitHub profile readme.
Pros
- Highly customizable with various themes and color options
- Easy to integrate into GitHub profile readmes
- Supports both light and dark modes
- Automatically updates to reflect recent activity
Cons
- Requires a third-party service to generate and host the graph
- May slow down the loading of GitHub profile pages
- Limited to displaying activity from the last year
- Some users may find it visually distracting or unnecessary
Code Examples
[![Ashutosh's github activity graph](https://github-readme-activity-graph.vercel.app/graph?username=Ashutosh00710)](https://github.com/ashutosh00710/github-readme-activity-graph)
This code generates a default activity graph for the specified user.
[![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)
This example applies the "dracula" theme to the activity graph.
[![Ashutosh's github activity graph](https://github-readme-activity-graph.vercel.app/graph?username=Ashutosh00710&bg_color=ffffff&color=000000&line=00ff00&point=ff0000&area=true&hide_border=true)](https://github.com/ashutosh00710/github-readme-activity-graph)
This code customizes the graph with specific colors and options.
Getting Started
To add the activity graph to your GitHub profile readme:
- Create a new repository with your GitHub username as the repository name.
- Add a
README.md
file to the repository. - Copy and paste one of the code examples above into your
README.md
file. - Replace
Ashutosh00710
with your GitHub username. - Commit and push the changes to your repository.
Your GitHub profile will now display the activity graph. You can further customize the graph by adjusting the parameters in the URL.
Competitor Comparisons
:zap: Dynamically generated stats for your github readmes
Pros of github-readme-stats
- More comprehensive statistics, including top languages, GitHub streaks, and wakatime stats
- Highly customizable with themes, custom title, icons, and layout options
- Supports private repositories and organizations
Cons of github-readme-stats
- Lacks a dedicated activity graph feature
- May require more setup and configuration for advanced features
- Can be slower to load due to the amount of data it processes
Code Comparison
github-readme-activity-graph:
[![Ashutosh's github activity graph](https://github-readme-activity-graph.cyclic.app/graph?username=Ashutosh00710&theme=dracula)](https://github.com/ashutosh00710/github-readme-activity-graph)
github-readme-stats:
![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=radical)
[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact)](https://github.com/anuraghazra/github-readme-stats)
github-readme-stats offers a wider range of statistics and customization options, making it more versatile for showcasing GitHub profiles. However, github-readme-activity-graph specializes in providing a visually appealing activity graph, which is not available in github-readme-stats. The choice between the two depends on the specific needs of the user and the desired presentation of GitHub statistics.
📊 An infographics generator with 30+ plugins and 300+ options to display stats about your GitHub account and render them as SVG, Markdown, PDF or JSON!
Pros of metrics
- More comprehensive: Offers a wide range of metrics and visualizations beyond activity graphs
- Highly customizable: Allows users to create personalized dashboards with various plugins
- Supports multiple platforms: Can fetch data from GitHub, GitLab, and other sources
Cons of metrics
- More complex setup: Requires more configuration and may be overwhelming for beginners
- Higher resource usage: Due to its extensive features, it may consume more API calls and processing power
- Steeper learning curve: Users need to understand multiple plugins and options to fully utilize the tool
Code Comparison
metrics:
- uses: lowlighter/metrics@latest
with:
filename: metrics.svg
token: ${{ secrets.METRICS_TOKEN }}
base: header, activity, community, repositories, metadata
plugin_isocalendar: yes
github-readme-activity-graph:
<a href="https://github.com/ashutosh00710/github-readme-activity-graph">
<img src="https://activity-graph.herokuapp.com/graph?username=ashutosh00710&theme=github" />
</a>
The code snippets show that metrics requires more configuration options, while github-readme-activity-graph is simpler to implement but offers fewer customization options.
🏆 Add dynamically generated GitHub Stat Trophies on your readme
Pros of github-profile-trophy
- Provides a visually appealing trophy showcase for GitHub achievements
- Offers customization options for trophy appearance and layout
- Includes a wider range of achievements, such as followers, stars, and commits
Cons of github-profile-trophy
- Less focus on detailed contribution activity over time
- May not provide as much insight into a user's recent coding patterns
- Limited to predefined achievement categories
Code Comparison
github-profile-trophy:
[![trophy](https://github-profile-trophy.vercel.app/?username=ryo-ma)](https://github.com/ryo-ma/github-profile-trophy)
github-readme-activity-graph:
[![Ashutosh's github activity graph](https://github-readme-activity-graph.cyclic.app/graph?username=Ashutosh00710)](https://github.com/ashutosh00710/github-readme-activity-graph)
Both projects offer easy integration into GitHub profiles using a single line of markdown. The github-profile-trophy code generates a trophy showcase, while github-readme-activity-graph produces a detailed activity graph.
github-profile-trophy focuses on highlighting specific achievements and milestones, making it ideal for users who want to showcase their overall GitHub accomplishments. On the other hand, github-readme-activity-graph provides a more detailed view of a user's contribution patterns over time, which can be valuable for demonstrating consistent activity and productivity.
Ultimately, the choice between these two projects depends on whether a user prioritizes showcasing achievements or visualizing their coding activity patterns.
🔥 Stay motivated and show off your contribution streak! 🌟 Display your total contributions, current streak, and longest streak on your GitHub profile README
Pros of github-readme-streak-stats
- Focuses on continuous contribution streaks, providing motivation for daily GitHub activity
- Offers a wide range of customization options for colors and appearance
- Lightweight and fast-loading, with minimal impact on README load times
Cons of github-readme-streak-stats
- Limited to streak statistics, lacking comprehensive activity visualization
- Doesn't provide insights into contribution types or repository-specific activity
- May encourage quantity over quality in contributions to maintain streaks
Code Comparison
github-readme-streak-stats:
def get_streak_count(contributions):
streak = 0
for day in contributions:
if day.count > 0:
streak += 1
else:
break
return streak
github-readme-activity-graph:
const generateGraph = (contributions) => {
const svg = d3.select('svg');
svg.selectAll('rect')
.data(contributions)
.enter()
.append('rect')
.attr('x', (d, i) => i * 10)
.attr('y', (d) => 100 - d.count * 5)
.attr('width', 8)
.attr('height', (d) => d.count * 5);
};
The code snippets highlight the different focus areas of each project. github-readme-streak-stats calculates streak counts, while github-readme-activity-graph generates a visual representation of contribution activity over time.
A tool to generate your github summary card for profile README
Pros of github-profile-summary-cards
- Offers a wider variety of card types, including language stats, commit stats, and productive time
- Provides more customization options for colors and themes
- Easier to set up and use with pre-defined templates
Cons of github-profile-summary-cards
- Less focus on detailed contribution activity visualization
- May not provide as comprehensive a view of long-term activity patterns
- Limited to predefined card layouts, which may restrict creativity
Code Comparison
github-readme-activity-graph:
- uses: Ashutosh00710/github-readme-activity-graph@v1.0
with:
username: "${{ github.repository_owner }}"
bg_color: "#000000"
color: "#ffffff"
line: "#ff0000"
github-profile-summary-cards:
- uses: vn7n24fzkq/github-profile-summary-cards@release
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
USERNAME: ${{ github.repository_owner }}
Both projects aim to enhance GitHub profiles with visual representations of user activity. github-readme-activity-graph focuses on providing a detailed, customizable graph of contribution activity over time. In contrast, github-profile-summary-cards offers a broader range of pre-designed cards showcasing various aspects of a user's GitHub profile. The choice between the two depends on whether you prefer a focused, in-depth activity visualization or a more diverse set of profile statistics presented in a card format.
Better GitHub statistics images for your profile, with stats from private repos too
Pros of github-stats
- Provides a wider range of GitHub statistics, including top languages, star history, and commit history
- Generates static SVG images, which can be easily embedded in various platforms
- Offers more customization options for the generated images
Cons of github-stats
- Requires more setup and configuration compared to github-readme-activity-graph
- May have slower generation times due to the broader range of statistics it calculates
- Less focused on visualizing contribution activity over time
Code Comparison
github-stats:
def get_stats(username):
user = g.get_user(username)
repos = user.get_repos()
stats = calculate_stats(repos)
return stats
github-readme-activity-graph:
const getContributions = async (username, token) => {
const query = `query($username: String!) { ... }`;
const variables = { username };
return await fetchGraphQL(query, variables, token);
};
Both projects use different approaches to fetch GitHub data. github-stats uses the PyGithub library to interact with the GitHub API, while github-readme-activity-graph uses GraphQL queries for more efficient data retrieval.
github-readme-activity-graph focuses specifically on generating contribution graphs, making it more streamlined for that particular use case. On the other hand, github-stats offers a broader range of statistics but requires more setup and processing time.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
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 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
- 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
[![Ashutosh's github activity graph](https://github-readme-activity-graph.vercel.app/graph?username=Ashutosh00710)](https://github.com/ashutosh00710/github-readme-activity-graph)
Attention â
Use themes
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
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 # ) |
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)
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.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>)
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 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!
Second Method
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.
Finally
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>)
Contributing
Please read through our contributing guidelines. Directions are included for opening issues, coding standards, and notes on development.
Core Team ð»
Ashutosh Dwivedi ð ð» ð ð¤ â |
Kshitij Srivastava ð ð» ð ð¨ |
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 |
Star History
Made with ⤠and TypeScript
Top Related Projects
:zap: Dynamically generated stats for your github readmes
📊 An infographics generator with 30+ plugins and 300+ options to display stats about your GitHub account and render them as SVG, Markdown, PDF or JSON!
🏆 Add dynamically generated GitHub Stat Trophies on your readme
🔥 Stay motivated and show off your contribution streak! 🌟 Display your total contributions, current streak, and longest streak on your GitHub profile README
A tool to generate your github summary card for profile README
Better GitHub statistics images for your profile, with stats from private repos too
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot