Ira Novianti

GitHub Chartify

Last updated Apr 21, 2026

On this page: Usage · Options · Try it

This is a tool that reads a public GitHub contribution graph and renders it as an animated SVG bar chart, grouped by week or day.

Repo: github.com/iranovianti/github-chartify

You can also change the grids to circles (style: circles):

Or show only the weekly chart (mode: vertical):

Or only the daily chart (mode: horizontal):

Usage

I made this mainly as a GitHub Action for profile READMEs.

As a GitHub Action

1. Create a workflow at .github/workflows/update-chart.yml:

name: Update contribution chart

on:
  schedule:
    - cron: '0 0 * * *'
  workflow_dispatch:

jobs:
  update:
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - uses: actions/checkout@v4
      - uses: iranovianti/github-chartify@v1
        with:
          username: ${{ github.repository_owner }}
          # other options here
      - run: |
          git config user.email "github-actions[bot]@users.noreply.github.com"
          git config user.name "github-actions[bot]"
          git add data/
          git diff --staged --quiet || git commit -m "Update chart"
          git pull --rebase
          git push

2. Embed in your profile README:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="data/contributions-dark.svg" />
  <source media="(prefers-color-scheme: light)" srcset="data/contributions.svg" />
  <img src="data/contributions.svg" />
</picture>

Example on my profile: github.com/iranovianti.

From the command line

Clone the repo and run:

git clone https://github.com/iranovianti/github-chartify
cd github-chartify
node scripts/cli.js --username <username>

With options:

node scripts/cli.js --username <username> --speed slow --mode vertical --style circles

Output goes to data/ by default. Override with --output.

Options

Try it

Enter a GitHub username to generate a chart right here:

Enter a GitHub username and click Generate Generating…