This project provides a service to generate and display GitHub-style contribution graphs for any GitHub user. It's perfect for adding a visual representation of your GitHub activity to your profile README or any other markdown file.
- Generate contribution graphs similar to those on GitHub profiles
- Customizable for any GitHub username
- Responsive SVG output that scales well on different devices
- Includes month and day labels for better context
- Displays a color legend for contribution intensity
To use this in your GitHub README or any markdown file, simply add the following line:
![GitHub Contribution Graph](https://contribution-graph-ohi6.onrender.com/api/graph?username=YourGitHubUsername)
Replace YourGitHubUsername
with the GitHub username for which you want to generate the graph.
-
Customizing Size
You can adjust the size of the graph by using HTML in your markdown:
<img src="https://contribution-graph-ohi6.onrender.com/api/graph?username=YourGitHubUsername" width="720" height="112" alt="GitHub Contribution Graph" />
-
Linking to Profile
Make the graph clickable and link to the GitHub profile:
[![GitHub Contribution Graph](https://contribution-graph-ohi6.onrender.com/api/graph?username=YourGitHubUsername)](https://github.com/YourGitHubUsername)
-
Refreshing the Graph
To ensure your graph is up-to-date, add a query parameter that changes:
![GitHub Contribution Graph](https://contribution-graph-ohi6.onrender.com/api/graph?username=YourGitHubUsername&v=1)
Increment the
v
value when you want to refresh the image.
The API endpoint is:
https://contribution-graph-ohi6.onrender.com/api/graph
Query Parameters:
username
: The GitHub username (required)
- Clone the repository
- Install dependencies with
npm install
- Create a
.env.local
file and add your GitHub token:GITHUB_TOKEN=your_personal_access_token
- Run the development server with
npm run dev
- Open http://localhost:3000 in your browser
This project is designed to be easily deployed on platforms like Render or Vercel. Make sure to set the GITHUB_TOKEN
environment variable in your deployment settings.
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
- Inspired by the GitHub contribution graph
- Built with Next.js and React