Convert Figma logo to code with AI

Ashutosh00710 logogithub-readme-activity-graph

A dynamically generated activity graph to show your GitHub activities of last 31 days.

1,591
654
1,591
4

Top Related Projects

:zap: Dynamically generated stats for your github readmes

13,603

📊 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:

  1. Create a new repository with your GitHub username as the repository name.
  2. Add a README.md file to the repository.
  3. Copy and paste one of the code examples above into your README.md file.
  4. Replace Ashutosh00710 with your GitHub username.
  5. 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.

13,603

📊 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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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

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

NamePreview
Default (cotton candy)graph
reactgraph
react-darkgraph
githubgraph
github-compactgraph
xcodegraph
roguegraph
merkograph
vuegraph
tokyo-nightgraph
high-contrastgraph

For more themes click here

Customization

Customize the appearance of your Activity Graph however you want with URL params.

Common Options

ArgumentsDescriptionType of Value
bg_colorcard's background colorhex code (without #)
colorgraph card's text colorhex code (without #)
title_colorgraph card's title colorhex code (without #)
linegraph's line colorhex code (without #)
pointcolor of points on line graphhex code (without #)
area_colorcolor of the area under the graphhex code (without #)
areashows area under the graphboolean (default: false)
hide_bordermakes the border of the graph transparentboolean (default: false)
hide_titlesets the title to an empty stringboolean (default: false)
custom_titleset the title to any stringstring
themename of available themesstring
radiusborder radius of graphnumber (0-16 inclusive)
heightheight of the graphnumber (200-600 inclusive)
daysnumber of to days display on graphnumber between (1 - 90) [Recommended below 40]
fromdate from which the graph startsformat YYYY-MM-DD
todate where the graph will endformat YYYY-MM-DD
gridshow gridboolean (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

  1. Sign in to Replit or create a new account at https://replit.com
  2. Click the Deploy button below
Run on Repl.it
  1. On the page that comes up, choose language as Node.js and then click Import from GitHub Button

    Replit

  2. Visit this link to create a new Personal Access Token

  3. Scroll to the bottom and click "Generate token"

  4. Wait clone done and add Secrets with your Github token

    Secrets

  5. Click the green RUN button on top, the console will run and at last the url will shows on the right

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

  1. Go to vercel.com.
  2. Click on Log in. image
  3. Sign in with GitHub by pressing Continue with GitHub. image
  4. Sign in to GitHub and allow access to all repositories if prompted.
  5. Fork this repo.
  6. Go back to your Vercel dashboard.
  7. To import a project, click the Add New... button and select the Project option. image
  8. Click the Continue with GitHub button, search for the required Git Repository and import it by clicking the Import button. image
  9. Create a personal access token (PAT) here and enable the repo permissions (this allows access to see private repo stats). image
  10. Add the PAT as an environment variable named TOKEN. image
  11. 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.

Deploy to Vercel

After the deployment is complete:

  1. Click the Continue to Dashboard button image
  2. In the Settings tab, click on Environment Variables and follow steps 9. and 10. of First Method. image
  3. Go to Deployments tab and redeploy the project. image

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):


Upamanyu Das

📖

Jonah Lawrence

💻 📖

Milind Modi

📖

Vaibhav

💻 📖

Jacob Philpott

💻 📖

Sonu Kumar

🎨 📖

Mykola Symon

💻

Sreyan Ghosh

🎨

Anant Mishra

🎨

Skyler

🎨

Iryna Mykoliuk

🎨

Dalpat Rathore

🎨 💻

Dmitriy Fishman

📖

MagicLike

🎨 💻

OnkarRuikar

💻

valetzx

📖

tranthaituananh

🎨 📖

polekstulod

📖

jmloudis

💻

fabianocouto

💻 📖

This project follows the all-contributors specification. Contributions of any kind welcome!

Resources Used to build this project

PurposeLibrary NameLink
Graph ConstructionCHARTIST.JShttps://github.com/gionkunz/chartist-js


Star History

Star History Chart

Made with ❤ and TypeScript