$ cd /home/

plugin-roughviz

Gungnir
2020-03-26
3 min

npm github license

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:

Code 
```roughviz-donut
{
  "data": {
    "labels": ["North", "South", "East", "West"],
    "values": [10, 5, 8, 3]
  },
  "title": "Regions",
  "colors": ["red", "orange", "blue", "skyblue"],
  "roughness": 4
}
```

To load a local csv file, a feasible way is to put your csv file under .vuepress/public/ folder (.vuepress/public/csv/flavors.csv for example), then:

Code 
```roughviz-bar
{
  "data": "/csv/flavors.csv",
  "labels": "flavor",
  "values": "price"
}
```

Refer to the documentation of roughViz.js for more information.

# License

MIT

← plugin-katex →