vue-roughviz

It's a Vue-wrapper for roughViz.js. See examples in the App.vue.

Installation

npm install vue-roughviz

Components

• RoughBar,
• RoughDonut,
• RoughPie,
• RoughLine,
• RoughScatter,
• RoughStackedBar,
• RoughBarH

Usage

Example for using the Donut-Chart.

<template>
    <h3>Donut</h3>
    <rough-donut
        :data="{
        labels: ['North', 'South', 'East', 'West'],
        values: [10, 5, 8, 3]
        }"
        title="Regions"
        roughness="8"
        :colors="['red', 'orange', 'blue', 'skyblue']"
        stroke="black"
        stroke-width="3"
        fill-style="cross-hatch"
        fill-weight="3.5"
    />
</template>

<script>
import {RoughDonut} from 'vue-roughviz'
Vue.component(RoughDonut)
</script>

Development

npm i
npm run serve

In case it is not working, this repo uses the Vue-Cli.

Lints and fixes files

npm run lint

Declaration and Style

The components are following the Vue Style Guide. That means components are called in Kebab-Style:

<rough-donut></rough-donut>

For each attribute, a line in a component and also in Kebab-Style is recommended. However, both is possible.

fill-weight="0.35" // better than fillWeight
stroke-width="0.5" // better than strokeWidth
fill-style="cross-hatch" // better than fillStyle

By passing an object, Vue needs to bind it.

<rough-pie>
:data="[
    { month: 'Jan', A: 20, B: 5, C: 10 },
    { month: 'Feb', A: 25, B: 10, C: 20 },
    { month: 'March', A: 30, B: 50, C: 10 }
]"
</rough-pie>