[](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": null,
"docs_url": null,
"requires_python": ">=3.6",
"maintainer_email": null,
"keywords": "mkdocs plugin",
"author": "Tim Vink",
"author_email": "vinktim@gmail.com",
"download_url": "https://files.pythonhosted.org/packages/2e/c6/6c03fd186c8899a635567118faa66d2340ae4faa3e82714d6f876e025db4/mkdocs_charts_plugin-0.0.11.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\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.11",
"project_urls": {
"Homepage": "https://github.com/timvink/mkdocs-charts-plugin"
},
"split_keywords": [
"mkdocs",
"plugin"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "9de4c8d0574f5f0282e5c93ae8269ec199148db9436fa9d7a30b265b6e5e195a",
"md5": "1cf174ad5086412c410c6dcb0fdd61c6",
"sha256": "875844599c2cf9d552ffffbde82e5ee25469d4665eefd3db5d2dcf6eadff6e99"
},
"downloads": -1,
"filename": "mkdocs_charts_plugin-0.0.11-py3-none-any.whl",
"has_sig": false,
"md5_digest": "1cf174ad5086412c410c6dcb0fdd61c6",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.6",
"size": 9331,
"upload_time": "2024-08-26T15:31:33",
"upload_time_iso_8601": "2024-08-26T15:31:33.543038Z",
"url": "https://files.pythonhosted.org/packages/9d/e4/c8d0574f5f0282e5c93ae8269ec199148db9436fa9d7a30b265b6e5e195a/mkdocs_charts_plugin-0.0.11-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "2ec66c03fd186c8899a635567118faa66d2340ae4faa3e82714d6f876e025db4",
"md5": "c3bc52fbc32ebdafd76e0d18e7374507",
"sha256": "d82e34f9933ea4537c34386c242765b7b721bfd6cb0ffd2bd881c1e554738ee6"
},
"downloads": -1,
"filename": "mkdocs_charts_plugin-0.0.11.tar.gz",
"has_sig": false,
"md5_digest": "c3bc52fbc32ebdafd76e0d18e7374507",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.6",
"size": 10341,
"upload_time": "2024-08-26T15:31:34",
"upload_time_iso_8601": "2024-08-26T15:31:34.845001Z",
"url": "https://files.pythonhosted.org/packages/2e/c6/6c03fd186c8899a635567118faa66d2340ae4faa3e82714d6f876e025db4/mkdocs_charts_plugin-0.0.11.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-08-26 15:31: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
