[](https://github.com/timvink/mkdocs-charts-plugin/actions)
# mkdocs-charts-plugin
[MkDocs](https://www.mkdocs.org/) plugin to create plots from data using the declarative [vegalite](https://vega.github.io/vega-lite/) syntax. This makes it easier to [build reproducible reports with MkDocs](https://timvink.nl/reproducible-reports-with-mkdocs/).
👉 See it in action on the [demo page](https://timvink.github.io/mkdocs-charts-plugin/demo/)
Includes supports for [mkdocs-material](https://github.com/squidfunk/mkdocs-material) theme features like [instant loading](https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/?h=reload#instant-loading) and [dark color themes](https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/#color-palette-toggle).
## Installation
Install the plugin using `pip3`:
```shell
pip3 install mkdocs-charts-plugin
```
Next, add the following lines to your `mkdocs.yml`:
```yml
plugins:
- search
- charts
extra_javascript:
- https://cdn.jsdelivr.net/npm/vega@5
- https://cdn.jsdelivr.net/npm/vega-lite@5
- https://cdn.jsdelivr.net/npm/vega-embed@6
markdown_extensions:
- pymdownx.superfences:
custom_fences:
- name: vegalite
class: vegalite
format: !!python/name:mkdocs_charts_plugin.fences.fence_vegalite
```
> If you have no `plugins` entry in your config file yet, you'll likely also want to add the `search` plugin. MkDocs enables it by default if there is no `plugins` entry set.
## Usage
You can insert any valid [vegalite](https://vega.github.io/vega-lite/) JSON into a markdown file. But the real magic is that you can visualize `.json` or `.csv` files:
````json hl_lines="4"
```vegalite
{
"description": "A simple bar chart with embedded data.",
"data": {"url" : "assets/charts/data/basic_bar_chart.json"},
"mark": {"type": "bar", "tooltip": true},
"encoding": {
"x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
"y": {"field": "b", "type": "quantitative"}
}
}
```
````
See the [vegalite editor](https://vega.github.io/editor/#/) for a range of examples.
## Documentation
See the documentation [timvink.github.io/mkdocs-charts-plugin](https://timvink.github.io/mkdocs-charts-plugin/) for examples, use cases and options.
Do checkout the other [charting plugins for mkdocs](https://github.com/mkdocs/mkdocs/wiki/MkDocs-Plugins#images-tables-charts--graphs) that might suit your specific use-case better.
Raw data
{
"_id": null,
"home_page": "https://github.com/timvink/mkdocs-charts-plugin",
"name": "mkdocs-charts-plugin",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.7",
"maintainer_email": null,
"keywords": "mkdocs plugin",
"author": "Tim Vink",
"author_email": "vinktim@gmail.com",
"download_url": "https://files.pythonhosted.org/packages/15/84/d3c731390478a6f9dea0a4517e24287a317a015d85bde7342ba60ddac3e2/mkdocs_charts_plugin-0.0.13.tar.gz",
"platform": null,
"description": "[](https://github.com/timvink/mkdocs-charts-plugin/actions)\n\n\n\n\n\n\n# mkdocs-charts-plugin\n\n[MkDocs](https://www.mkdocs.org/) plugin to create plots from data using the declarative [vegalite](https://vega.github.io/vega-lite/) syntax. This makes it easier to [build reproducible reports with MkDocs](https://timvink.nl/reproducible-reports-with-mkdocs/).\n\n\ud83d\udc49 See it in action on the [demo page](https://timvink.github.io/mkdocs-charts-plugin/demo/)\n\nIncludes supports for [mkdocs-material](https://github.com/squidfunk/mkdocs-material) theme features like [instant loading](https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/?h=reload#instant-loading) and [dark color themes](https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/#color-palette-toggle).\n\n## Installation\n\nInstall the plugin using `pip3`:\n\n```shell\npip3 install mkdocs-charts-plugin\n```\n\nNext, add the following lines to your `mkdocs.yml`:\n\n```yml\nplugins:\n - search\n - charts\n\nextra_javascript:\n - https://cdn.jsdelivr.net/npm/vega@5\n - https://cdn.jsdelivr.net/npm/vega-lite@5\n - https://cdn.jsdelivr.net/npm/vega-embed@6\n\nmarkdown_extensions:\n - pymdownx.superfences:\n custom_fences:\n - name: vegalite\n class: vegalite\n format: !!python/name:mkdocs_charts_plugin.fences.fence_vegalite\n```\n\n> If you have no `plugins` entry in your config file yet, you'll likely also want to add the `search` plugin. MkDocs enables it by default if there is no `plugins` entry set.\n\n## Usage\n\nYou can insert any valid [vegalite](https://vega.github.io/vega-lite/) JSON into a markdown file. But the real magic is that you can visualize `.json` or `.csv` files:\n\n````json hl_lines=\"4\"\n```vegalite \n{\n \"description\": \"A simple bar chart with embedded data.\",\n \"data\": {\"url\" : \"assets/charts/data/basic_bar_chart.json\"},\n \"mark\": {\"type\": \"bar\", \"tooltip\": true},\n \"encoding\": {\n \"x\": {\"field\": \"a\", \"type\": \"nominal\", \"axis\": {\"labelAngle\": 0}},\n \"y\": {\"field\": \"b\", \"type\": \"quantitative\"}\n }\n}\n```\n````\n\nSee the [vegalite editor](https://vega.github.io/editor/#/) for a range of examples.\n\n## Documentation\n\nSee the documentation [timvink.github.io/mkdocs-charts-plugin](https://timvink.github.io/mkdocs-charts-plugin/) for examples, use cases and options.\n\nDo checkout the other [charting plugins for mkdocs](https://github.com/mkdocs/mkdocs/wiki/MkDocs-Plugins#images-tables-charts--graphs) that might suit your specific use-case better.\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "MkDocs plugin to add charts from data",
"version": "0.0.13",
"project_urls": {
"Homepage": "https://github.com/timvink/mkdocs-charts-plugin"
},
"split_keywords": [
"mkdocs",
"plugin"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "316f4015dbb4c26bf1fc4b5b637188fc47ec2f1781baccc2e13b0c48887ae9b0",
"md5": "80c327cc5938e3066336f4e3cf71db28",
"sha256": "cef515bb3b4acb3dfea45787d7db3a6f39bf649dbb369a73416c6a1386cac258"
},
"downloads": -1,
"filename": "mkdocs_charts_plugin-0.0.13-py3-none-any.whl",
"has_sig": false,
"md5_digest": "80c327cc5938e3066336f4e3cf71db28",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.7",
"size": 9848,
"upload_time": "2025-09-02T09:52:24",
"upload_time_iso_8601": "2025-09-02T09:52:24.122575Z",
"url": "https://files.pythonhosted.org/packages/31/6f/4015dbb4c26bf1fc4b5b637188fc47ec2f1781baccc2e13b0c48887ae9b0/mkdocs_charts_plugin-0.0.13-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "1584d3c731390478a6f9dea0a4517e24287a317a015d85bde7342ba60ddac3e2",
"md5": "b670e5fff7f177112ad9eeccfb02db96",
"sha256": "7de0a74a2ecc8a5a17ce49ebf84c3175ec03a17725e85b970c0b2c3d59faa311"
},
"downloads": -1,
"filename": "mkdocs_charts_plugin-0.0.13.tar.gz",
"has_sig": false,
"md5_digest": "b670e5fff7f177112ad9eeccfb02db96",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.7",
"size": 10921,
"upload_time": "2025-09-02T09:52:25",
"upload_time_iso_8601": "2025-09-02T09:52:25.416882Z",
"url": "https://files.pythonhosted.org/packages/15/84/d3c731390478a6f9dea0a4517e24287a317a015d85bde7342ba60ddac3e2/mkdocs_charts_plugin-0.0.13.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-09-02 09:52:25",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "timvink",
"github_project": "mkdocs-charts-plugin",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"lcname": "mkdocs-charts-plugin"
}
JSON
