How to add a live star history chart to your github readme

Source: Dev.to

Disclaimer

Important Notice: This application is based on star-history/star-history and has been modified and upgraded. We will continue to add more data analysis features. We express our sincere gratitude to the original authors! This document has also been modified and improved based on the original repository’s documentation.

New repository

github-data-analysis-

We updated the chart implementation and introduced MongoDB‑based caching to reduce GitHub API calls and improve performance, and added a dark theme.

Data query and image download

We provide direct data query and image download capabilities, but you need to supply your GitHub personal access token. The system does not store your token on the server side.

Embedding chart images directly does not require your token, but GitHub rate limits may affect usage. MongoDB caching is used to mitigate this impact as much as possible.

Add a live star‑history chart to your GitHub README

Now we support embedding a live star‑history chart into your GitHub README. The screenshot above is from our own GitHub data analysis.

A snippet is generated after querying a repository on the star‑history.com main page; simply copy that snippet into your README markdown file.

Embed with “

After reviewing popular web‑side embedding implementations, we chose “ as the container. It can display the original chart on a webpage without requiring a backend server and remains interactive with real‑time data.

Because GitHub API imposes strict rate limits on anonymous callers, users must provide their own personal access tokens to overcome that limit.

Step‑by‑step guide to use iframe embed

1. Open gitdata.xuanhun520.com and query a repository.

2. Click the Embed button below the chart.

3. Input your personal access token.

   

4. Click the Copy button, then paste the generated “ snippet into your website or blog.

Live chart image in SVG format

The iframe‑based embed is an improvement, but it has some limitations:

• GitHub’s markdown flavor does not allow rendering “, so you cannot embed the chart directly in a repository README.
• Users must provide a personal access token. Although the token is never stored on our server (we have no server), it can be seen in the page source, which limits usage to trusted platforms (e.g., internal dashboards).

Step‑by‑step guide to add the chart to your GitHub README

1. Open gitdata.xuanhun520.com and query a repository.

2. Scroll down below the action buttons.

   

3. Click the Copy button to copy the static image URL.

4. Paste the markdown image link into your repository’s README.

Everything is done. 😎

Conclusion

We provide two ways to embed a real‑time star‑history chart:

• Interactive embed: Use an “ for an auto‑sizeable, interactive chart on private networks or dashboards.
• Static image: Show an up‑to‑date chart in public places (e.g., GitHub README) with a simple image link, for example:

https://gitdata.xuanhun520.com/api/starimg?repos=visactor/vchart&type=Date&theme=dark

Future Plans

• Add more data analysis capabilities, such as forks‑history charts and contributor activity charts.
• Implement user authentication to support analysis of private repositories.
• Introduce additional visualization forms, including infographics and animated charts.