[](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).
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.
## 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 using:
````
```vegalite
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
{"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
{"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
]
},
"mark": "bar",
"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 you could copy-paste into your mkdocs site
## Documentation
See the documentation [timvink.github.io/mkdocs-charts-plugin](https://timvink.github.io/mkdocs-charts-plugin/) for examples, use cases and options.
Raw data
{
"_id": null,
"home_page": "https://github.com/timvink/mkdocs-charts-plugin",
"name": "mkdocs-charts-plugin",
"maintainer": "",
"docs_url": null,
"requires_python": ">=3.6",
"maintainer_email": "",
"keywords": "mkdocs plugin",
"author": "Tim Vink",
"author_email": "vinktim@gmail.com",
"download_url": "https://files.pythonhosted.org/packages/ca/80/670f18d7e3fffa6bd4deff3d32358350e1081a5360b82a91fe701ef8bc11/mkdocs-charts-plugin-0.0.10.tar.gz",
"platform": null,
"description": "[](https://github.com/timvink/mkdocs-charts-plugin/actions)\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\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\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 using:\n\n````\n```vegalite\n{\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.json\",\n \"description\": \"A simple bar chart with embedded data.\",\n \"data\": {\n \"values\": [\n {\"a\": \"A\", \"b\": 28}, {\"a\": \"B\", \"b\": 55}, {\"a\": \"C\", \"b\": 43},\n {\"a\": \"D\", \"b\": 91}, {\"a\": \"E\", \"b\": 81}, {\"a\": \"F\", \"b\": 53},\n {\"a\": \"G\", \"b\": 19}, {\"a\": \"H\", \"b\": 87}, {\"a\": \"I\", \"b\": 52}\n ]\n },\n \"mark\": \"bar\",\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 you could copy-paste into your mkdocs site\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\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "MkDocs plugin to add charts from data",
"version": "0.0.10",
"project_urls": {
"Homepage": "https://github.com/timvink/mkdocs-charts-plugin"
},
"split_keywords": [
"mkdocs",
"plugin"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "ff57fab45c731a44fe4f25ce13206990ac7fae386dd5c831344300daf943f966",
"md5": "b7f3202957013f9c31ee277b1d4e9859",
"sha256": "474c2cd48b7a0a0edad50a97f3b427f81cbaf5f266f4f599298d2a172d385adb"
},
"downloads": -1,
"filename": "mkdocs_charts_plugin-0.0.10-py3-none-any.whl",
"has_sig": false,
"md5_digest": "b7f3202957013f9c31ee277b1d4e9859",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.6",
"size": 9230,
"upload_time": "2023-08-28T07:58:33",
"upload_time_iso_8601": "2023-08-28T07:58:33.221707Z",
"url": "https://files.pythonhosted.org/packages/ff/57/fab45c731a44fe4f25ce13206990ac7fae386dd5c831344300daf943f966/mkdocs_charts_plugin-0.0.10-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "ca80670f18d7e3fffa6bd4deff3d32358350e1081a5360b82a91fe701ef8bc11",
"md5": "8672b17df9bb239155d65a097878e45d",
"sha256": "5843afee0dcc567cc33ee4e0106c222f3e9ada3aaa17b5ac5d73b5b9e15b094d"
},
"downloads": -1,
"filename": "mkdocs-charts-plugin-0.0.10.tar.gz",
"has_sig": false,
"md5_digest": "8672b17df9bb239155d65a097878e45d",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.6",
"size": 8093,
"upload_time": "2023-08-28T07:58:34",
"upload_time_iso_8601": "2023-08-28T07:58:34.363444Z",
"url": "https://files.pythonhosted.org/packages/ca/80/670f18d7e3fffa6bd4deff3d32358350e1081a5360b82a91fe701ef8bc11/mkdocs-charts-plugin-0.0.10.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2023-08-28 07:58:34",
"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
