MkDocs plugin to create plots from data using the declarative vegalite syntax. This makes it easier to build reproducible reports with MkDocs.
👉 See it in action on the demo page
Includes supports for mkdocs-material theme features like instant loading and dark color themes.
Do checkout the other charting plugins for mkdocs that might suit your specific use-case better.
Install the plugin using pip3
:
pip3 install mkdocs-charts-plugin
Next, add the following lines to your mkdocs.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 thesearch
plugin. MkDocs enables it by default if there is noplugins
entry set.
You can insert any valid vegalite 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 for a range of examples you could copy-paste into your mkdocs site
See the documentation timvink.github.io/mkdocs-charts-plugin for examples, use cases and options.