Keep README charts in sync with a small GitHub Action

I got tired of updating chart screenshots in READMEs by hand.

Either the numbers were stale, or I’d regenerate an image, commit it, and forget the next week. For docs and GitHub READMEs I don’t need a full chart library on the page — I need a vector file that still looks sharp.

So I wired ProvChart’s SVG API into a GitHub Action.

What it does

1. You describe charts in .provchart/charts.json
2. On schedule or workflow_dispatch, the Action calls the API
3. It writes .svg files into the repo (e.g. docs/charts/)
4. A commit step pushes them if anything changed

README stays simple:

![API traffic](./docs/charts/demo.svg)

No Chart.js in the README. No screenshot pipeline.

Minimal setup

Secret: PROVCHART_API_KEY (from the ProvChart dashboard)

Config (array of payloads):

[
  {
    "file": "demo.svg",
    "type": "area",
    "theme": "midnight",
    "width": 640,
    "height": 320,
    "axisX": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    "series": [
      {
        "name": "Requests",
        "color": "#8b7bff",
        "points": [20, 85, 40, 60, 10, 40, 95]
      }
    ]
  }
]

Workflow sketch:

- uses: fscss-ttr/provchart-readme-action@v1.0.4
  with:
    api-key: ${{ secrets.PROVCHART_API_KEY }}
    config: .provchart/charts.json
    output-dir: docs/charts

Then auto-commit the docs/charts/*.svg files if you want.

Why this shape

• SVG fits Markdown and docs better than a heavy client chart stack
• CI owns refresh; the README only references files
• Same JSON model as the rest of ProvChart (line, area, bar, gauge, …)

Gauges at about 220×220 work well in a README without taking over the page.

Try without starting from zero

Sample repo (fork → add the secret → run the workflow):

github.com/Figsh/provchart-charts

Action:

github.com/fscss-ttr/provchart-readme-action

---

Not a replacement for interactive dashboards. Just a practical way to keep docs charts honest without babysitting PNGs.

---

fscss-ttr / provchart-readme-action

CI generates SVG charts and commits them for README/docs

ProvChart README Action

Generate vector SVG charts with the ProvChart API inside GitHub Actions, then commit them for live README and docs embeds.

No Chart.js. No screenshot bots. Pure SVG from JSON.

Action	fscss-ttr/provchart-readme-action
Sample repo (fork & test)	Figsh/provchart-charts
API	chart.devtem.org
License	MIT

---

Try in 2 minutes (recommended)

1. Fork github.com/Figsh/provchart-charts
2. Add a repository secret: PROVCHART_API_KEY (Dashboard → Developer API)
3. Actions → run Test ProvChart Action (workflow_dispatch)
4. SVGs land under docs/charts/ and are committed automatically

That repo already has .provchart/charts.json, the workflow, and README embeds.

---

Quick start (your own repo)

1. API key secret

Settings → Secrets and variables → Actions → New repository secret

Name	Value
PROVCHART_API_KEY	Your ProvChart API key

2. Config — .provchart/charts.json

[
  {
    "file": "demo.svg"
    "type": "area",
    "theme": "midnight",
    "width": 640,
    "height": 320,
    "axisX": [

…

View on GitHub