https://github.com/reazndev/github-chart-builder
Tool to create your own unique GH contribution charts and use them to your liking
https://github.com/reazndev/github-chart-builder
chart contribution-graph github
Last synced: 24 days ago
JSON representation
Tool to create your own unique GH contribution charts and use them to your liking
- Host: GitHub
- URL: https://github.com/reazndev/github-chart-builder
- Owner: reazndev
- License: mit
- Created: 2025-11-18T17:14:10.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2026-05-19T22:58:28.000Z (about 1 month ago)
- Last Synced: 2026-05-20T01:49:49.539Z (about 1 month ago)
- Topics: chart, contribution-graph, github
- Language: JavaScript
- Homepage: http://gh.ruu.by/
- Size: 1.12 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
#
GitHub Chart Builder
Generate customizable SVG contribution charts for your portfolio or README.
---
A simple tool to customize your GitHub contribution graph and generate a clean SVG image to embed in your portfolio or profile README.
## Features
- **Interactive Preview:** Type any GitHub username to see their graph instantly.
- **Custom Themes:** Pick from built-in presets or configure custom Hex colors for active/inactive days.
- **Tweak Everything:** Adjust months (1-48), box sizes, cell spacing, and border radius.
- **Unified & Containerized:** Single React + Node application with simple Docker/Compose setup.
## Query Options
The backend handles parameters directly via URL queries, including:
- `months` (1-48)
- `boxSize` (pixel dimension of grid cells)
- `boxSpacing` (pixel spacing between grid cells)
- `borderRadius` (border curves for grid cells)
- `inactiveColor` (hex code for zero contribution days)
- `minActivityColor` (hex code for low contribution days)
- `maxActivityColor` (hex code for high contribution days)
- `showLabels` (boolean flag to toggle month listings)
- `labelColor` (hex code for month labels)
---
## Screenshots
---
## Local Development
To run the application locally, you will need a personal GitHub access token (minimal `read:user` scope).
1. Clone the repository:
```bash
git clone https://github.com/reazndev/github-chart-builder.git
cd github-chart-builder
```
2. Install dependencies:
```bash
npm install
```
3. Setup environment variables:
Copy `.env.example` to `.env` and fill in your GITHUB_TOKEN:
```bash
cp .env.example .env
```
4. Launch in development mode:
```bash
npm run dev
```
*Runs both Vite and Express concurrently. Open `http://localhost:5173` to view the app.*
---
## Production & Docker Deployment
To build and host using Docker Compose:
1. Copy `.env.example` to `.env` and specify your `GITHUB_TOKEN` (required for querying public contribution graphs). If you want to support private repositories via GitHub OAuth2, also configure `GITHUB_CLIENT_ID`, `GITHUB_CLIENT_SECRET`, `GITHUB_REDIRECT_URI`, and a secure `ENCRYPTION_KEY`.
2. Spin up the container stack:
```bash
docker compose up -d
```
*The container exposes port `8030`, serving both the API endpoints and the optimized built frontend assets.*
---
## Contributing
Feel free to open an issue or submit a pull request if you run into bugs or have layout improvements to share!
## Contributors
## License
This project is MIT licensed — see [LICENSE](LICENSE).
