Chart the languages used throughout all repositories belonging to any GitHub user.
-
The extension automatically injects the chart as a profile section when browsing GitHub.
-
The API generates an SVG that can be used in a profile README.md or anywhere on the web.
Use the Chrome extension to visualize the spread of repo languages for any user. If installed and turned on, it will automatically inject the chart into any user page visited on GitHub as a profile section.
- Download the repo as a ZIP file from GitHub.
- Unzip the file and you should have a folder named
github-user-language-chart-extension-main. - In Chrome, go to the extensions page (
chrome://extensions/). - Enable Developer Mode.
- Drag the folder (
github-user-language-chart-extension-main) anywhere on the page to import it.
View the interactive demo for examples of any GitHub user's chart, and what their page would look like with the extension enabled.
The extension charts are visible to you only. If you want everyone to see your chart, consider using the API.
The API allows you to make a request to a given GitHub username's endpoint and sends back an SVG version of their chart that can be used in your GitHub README.md or anywhere on the web.
A simple implementation would look something like this:
HTML
<img src="https://github-user-linguist-chart.herokuapp.com/mhollingshead" alt="Languages" />Markdown
Request URLs should be structured as follows:
https://github-user-linguist-chart.herokuapp.com/<YOUR USERNAME>?<OPTION 1>&<OPTION 2>&<...>
There are several options you can provide to customize the componet style:
| Option | Values | Default | Description |
|---|---|---|---|
width |
number (min 400, max 2000) |
904 |
The width of the SVG image in px. |
theme |
default_light | default_dark | dark_dimmed | dark_high_contrast | universal |
default_light |
The theme of the component. All GitHub themes are accepted. Additionally, universal uses mid-range colors that work on both dark and light backgrounds. |
background |
true | false |
true |
If false, the background, border, and component padding will be removed. |
border |
true | false |
true |
This option only applies when background is true. If false, the outer border will be removed. |
title |
true | false |
true |
If false, the title will be ommitted. |
title_text |
String (URI encoded) |
Languages |
The text contents of the component title. Be cautious of the length of your title as word-wrap currently isn't supported. |
Below are some examples of various options. To use the code snippets, replace <USERNAME> with your username and <OPTS> with any additional options.
width=600:
<img src="https://github-user-linguist-chart.herokuapp.com/<USERNAME>?width=600" />background=false:
<img src="https://github-user-linguist-chart.herokuapp.com/<USERNAME>?<OPTS>&background=false" />theme=default_dark:
<img src="https://github-user-linguist-chart.herokuapp.com/<USERNAME>?<OPTS>&theme=default_dark" />theme=dark_dimmed:
<img src="https://github-user-linguist-chart.herokuapp.com/<USERNAME>?<OPTS>&theme=dark_dimmed" />theme=dark_high_contrast:
<img src="https://github-user-linguist-chart.herokuapp.com/<USERNAME>?<OPTS>&theme=dark_high_contrast" />theme=universal:
<img src="https://github-user-linguist-chart.herokuapp.com/<USERNAME>?<OPTS>&theme=universal" />border=false:
<img src="https://github-user-linguist-chart.herokuapp.com/<USERNAME>?<OPTS>&border=false" />title=false:
<img src="https://github-user-linguist-chart.herokuapp.com/<USERNAME>?<OPTS>&title=false" />title_text=My%20Repo%20Languages:
<img src="https://github-user-linguist-chart.herokuapp.com/<USERNAME>?<OPTS>&title_text=My%20Repo%20Languages" />- The extension uses the GitHub API to get user data. Each new user page visited requires 1 request for their repo list and
<number of repos>requests for the languages used in each repo– making a total of<number of repos> + 1API requests. - Because of the API's rate limit, accessing many profiles (especially profiles with large amounts of repositories) in a short amount of time could result in reaching the rate limit. If a request results in a non-ok response, no chart will be injected until requests can be made again.
- Cookies are used to save user data that has already been received within the last hour in order to reduce API requests.
- The API uses the GitHub API server-side. Each user image requested requires the same
<number of repos> + 1amount of API requests. - To reduce the number of API requests made by the server, images are cached for 2 hours after rendering.