Usage

The simplest way to use GitHub Bubble Chart is with the default settings:

https://github-bubble-chart.vercel.app?username=YOUR_GITHUB_USERNAME

Replace YOUR_GITHUB_USERNAME with your actual GitHub username to generate a bubble chart showing your most-used programming languages.

Important

Since the GitHub API only allows 5k requests per hour per user account, the public Vercel instance hosted on https://github-bubble-chart.vercel.app could possibly hit the rate limit. We use caching to prevent this from happening when possible. If you need guaranteed availability or want to access private repository data, consider deploying your own instance with your personal GitHub token.

Note

Please visit the configuration page to get more information on how to use the GitHub Bubble Chart.

Embedding in GitHub Profile

Add this to your GitHub profile README.md to display your language bubble chart:

![GitHub Bubble Chart](https://github-bubble-chart.vercel.app?username=YOUR_GITHUB_USERNAME)

Embedding in Websites

Use an iframe for interactive features:

<iframe
  src="https://github-bubble-chart.vercel.app?username=YOUR_GITHUB_USERNAME"
  width="800"
  height="600"
  frameborder="0"
>
</iframe>

Basic Examples

Top Languages Chart

This generates a chart of your most used languages:

https://github-bubble-chart.vercel.app?username=YOUR_GITHUB_USERNAME

Warning

When using the top-langs mode (default), icons for programming languages are fetched from Devicons. Some less common languages may have missing icons as they're not available in the Devicons library. The chart will still display these languages, but without an icon. If you find missing icons, you can open an issue on GitHub Bubble Chart repository or directly on the Devicons repository.

Custom Sizing

Adjust the size of your chart:

https://github-bubble-chart.vercel.app?username=YOUR_GITHUB_USERNAME&width=800&height=600

Using Dark Theme

Display your chart with a dark theme:

https://github-bubble-chart.vercel.app?username=YOUR_GITHUB_USERNAME&theme=dark

Advanced Usage

Limiting the Number of Languages

Display only the top 5 languages:

https://github-bubble-chart.vercel.app?username=YOUR_GITHUB_USERNAME&langs-count=5

Customizing the Title

Change the chart title:

https://github-bubble-chart.vercel.app?username=YOUR_GITHUB_USERNAME&title=My%20Programming%20Languages

Custom Configuration File

For more advanced customization, use a custom configuration file:

https://github-bubble-chart.vercel.app?username=YOUR_GITHUB_USERNAME&mode=custom-config&config-path=config.json

The configuration file must be available in your GitHub repository. See the Configuration page for details.