mkdocs-charts-plugin
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.
Installation
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 the search
plugin. MkDocs enables it by default if there is no plugins
entry set.
Usage
You can insert any valid vegalite JSON into a markdown file. But the real magic is that you can visualize .json
or .csv
files:
```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 for a range of examples.
Documentation
See the documentation timvink.github.io/mkdocs-charts-plugin for examples, use cases and options.
Do checkout the other charting plugins for mkdocs that might suit your specific use-case better.