# vuepress-plugin-roughviz

> A plugin for adding roughViz.js to VuePress.

Latest version **0.2.0** (published 2021-08-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install vuepress-plugin-roughviz
pnpm add vuepress-plugin-roughviz
yarn add vuepress-plugin-roughviz
bun add vuepress-plugin-roughviz
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2021-08-18 |
| First published | 2021-02-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 5.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 371 |
| Author | Renovamen |
| Maintainers | renovamen |
| Keywords | vue, vuepress, vuepress-plugin, rough-viz, roughviz, roughviz.js |

## Links

- npm: https://www.npmjs.com/package/vuepress-plugin-roughviz
- Repository: https://github.com/Renovamen/vuepress-theme-gungnir
- Homepage: https://github.com/Renovamen/vuepress-theme-gungnir/tree/main/packages/plugins/roughviz
- Issues: https://github.com/Renovamen/vuepress-theme-gungnir/issues
- npm.io page: https://npm.io/package/vuepress-plugin-roughviz

## Dependencies (1)

- [rough-viz](https://npm.io/package/rough-viz.md) ^1.0.6

## Recent versions

- 0.2.0 (latest) — 2021-08-18
- 0.1.9 — 2021-08-18
- 0.1.8 — 2021-06-16
- 0.1.7 — 2021-04-05
- 0.1.6 — 2021-03-31
- 0.1.5 — 2021-02-28
- 0.1.0 — 2021-02-01

## README

# vuepress-plugin-roughviz

A plugin for adding [roughViz.js](https://github.com/jwilber/roughViz) to [VuePress](https://vuepress.vuejs.org/) to create sketchy/hand-drawn styled charts in Markdown.

[Demo](https://vuepress-theme-gungnir.vercel.app/zh/docs/plugins/roughviz.html)


 

## Installation

Install this plugin with:

```bash
yarn add vuepress-plugin-roughviz
# or
npm install vuepress-plugin-roughviz
```

Then add it to your `.vuepress/config.js`:

```js
module.exports = {
  plugins: [
    [
      'vuepress-plugin-roughviz'
    ]
  ]
}
```


 

## Usage

Then you can use [roughViz.js](https://github.com/jwilber/roughViz) in Markdown.

roughViz.js supports the following chart types:

- Bar (`bar`)
- Horizontal Bar (`barh`)
- Donut (`donut`)
- Line (`line`)
- Pie (`pie`)
- Scatter (`scater`)
- Stacked Bar (`stackedbar`)

So the format of your code block's `token.info` should be `roughviz-{ chart-type }`. For example, to draw a Donut chart:

~~~json
```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:

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

Refer to the [documentation of roughViz.js](https://github.com/jwilber/roughViz) for more information.


 

## License

[MIT](LICENSE)

---
_Source: https://npm.io/package/vuepress-plugin-roughviz · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._