Plugin vuepress-plugin-roughviz for adding roughViz.js to VuePress to create sketchy/hand-drawn styled charts in Markdown.
# Install
yarn add vuepress-plugin-roughviz
# or
npm install vuepress-plugin-roughviz
Then add it to your .vuepress/config.js:
module.exports = {
plugins: [
[
'vuepress-plugin-roughviz'
]
]
}
# Usage
roughViz.js supports the following 7 chart types:
- Bar (
bar) - Horizontal Bar (
barh) - Donut (
donut) - Line (
line) - Pie (
pie) - Scatter (
scater) - Stacked Bar (
stackedbar)
So the format of the code block's token info should be roughviz-{ chart-type }. For example, to draw a Donut chart:
{
"data": {
"labels": ["North", "South", "East", "West"],
"values": [10, 5, 8, 3]
},
"title": "Regions",
"colors": ["red", "orange", "blue", "skyblue"],
"roughness": 4
}
Code
```roughviz-donut
{
"data": {
"labels": ["North", "South", "East", "West"],
"values": [10, 5, 8, 3]
},
"title": "Regions",
"colors": ["red", "orange", "blue", "skyblue"],
"roughness": 4
}
```
Refer to the documentation of roughViz.js for more information.