# vue-nvd3

> The NVD3 chart library for Vue

Latest version **1.0.0** (published 2017-01-01) · 0 weekly downloads

## Install

```sh
npm install vue-nvd3
pnpm add vue-nvd3
yarn add vue-nvd3
bun add vue-nvd3
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2017-01-01 |
| First published | 2017-01-01 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 4.0.0 |
| Dependencies | 3 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 30 |
| Author | Ray |
| Maintainers | ray-liang |
| Keywords | d3, nvd3, vue, vue2, chart |

## Links

- npm: https://www.npmjs.com/package/vue-nvd3
- Repository: https://github.com/DotNetAge/vue-nvd3
- Homepage: https://github.com/DotNetAge/vue-nvd3#readme
- Issues: https://github.com/DotNetAge/vue-nvd3.git/issues
- npm.io page: https://npm.io/package/vue-nvd3

## Dependencies (3)

- [d3](https://npm.io/package/d3.md) ^3.5.17
- [vue](https://npm.io/package/vue.md) ^2.1.0
- [nvd3](https://npm.io/package/nvd3.md) ^1.8.5

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2017-01-01

## README

# vue-nvd3

The NVD3 chart library for Vue. 

> This library is just in beta version. It's only using in my project i will add the tests and examples in the future versions.


## Install

```
$ npm install vue-nvd3
```

[Live Demo](https://dotnetage.github.io/vue-nvd3)

## Components in this library

Tag | Component 
----|----------
`<vn-bar>`| `BarChart`
`<vn-bubble>`| `BubbleChart`
`<vn-hgrouped-bar>`| `HBarChart`
`<vn-line-bar>`| `LineBarChart`
`<vn-line>`| `LineChart`
`<vn-pie>`| `PieChart`
`<vn-stacked-area>`| `StackedAreaChart`

## Dependencies
  
- vue: "^2.1.0"
- nvd3: "^1.8.5",
- d3: "^3.5.17"

## How to use

```js
import Vue from 'Vue'
import VueNVD3 from 'vue-nvd3'
Vue.use(VueNVD3)
```

## References

### `<vn-bar>` - `BarChart`

attribute | type | default | description
----------|------|---------|------------
`model`| `Array` | `[]` | The data to show on the chart
`height` | `String` | `'300px'` | The chart height
`textField`| `String`| `'label'` | Specify which field should be show as axis label text of the data model
`valueField`| `String` | `'value'` |  Specify which field should be use as axis values of the data model
`staggerLabels`| `Boolean`| `true` | -
`tooltips`| `Boolean`| `false`| Whether show the tooltips when mouse on the bars
`showValues`| `Boolean`| `true` | Identity whether show the values on the chart
`colors`| `Array`| `['#82DFD6', '#ddd']` | The bar colors
    
    
    
### `<vn-bubble>` - `BubbleChart`

attribute | type | default | description
----------|------|---------|------------
`model`| `Array` | `[]` | The data to show on the chart
`height` | `String` | `300px` | The chart height
`xFormat` | `Function`, `String` | `undefined` |
`yFormat` | `Function` `String` | `undefined` |
`showDistX` | `Boolean` | `true` |
`showDistY` | `Boolean` | `true` |
`colors` | `Array` | `['#82DFD6', '#ddd']` |

### `<vn-hgrouped-bar>` - `HBarChart`

attribute | type | default | description
----------|------|---------|------------
`model`| `Array` | `[]` | The data to show on the chart
`height` | `String` | `300px` | The chart height
`textField`| `String`| `'label'` | Specify which field should be show as axis label text of the data model
`valueField`| `String` | `'value'` |  Specify which field should be use as axis values of the data model
`height` | `Number`| `null` |
`yFormat` | `Function`,`String` | `undefined`  | 
`showControls` | `Boolean` | `true` |
`colors` | `Array` | `['#82DFD6', '#ddd']` |


### `<vn-line-bar>` - `LineBarChart`

attribute | type | default | description
----------|------|---------|------------
`model`| `Array` | `[]` | The data to show on the chart
`height` | `String` | `300px` | The chart height
`xFormat` | `Function`, `String` | `undefined` |
`y1Format` | `Function`, `String` | `undefined` |
`y2Format` | `Function`, `String` | `undefined` |
`colors`| `Array` | `['#82DFD6', '#ddd']` | 

### `<vn-line>` - `LineChart`

attribute | type | default | description
----------|------|---------|------------
`model`| `Array` | `[]` | The data to show on the chart
`height` | `String` | `300px` | The chart height
`xFormat` | `Function`, `String` | `undefined` |
`yFormat`| `Function`, `String`| `undefined`  |
`colors` | `Array` | `['#82DFD6', '#ddd']`|
   
### `<vn-pie>` - `PieChart`

attribute | type | default | description
----------|------|---------|------------
`model`| `Array` | `[]` | The data to show on the chart
`height` | `String` | `300px` | The chart height
`showLabels` | `Boolean` | `true` |
`margin` | `Object` | `{top: 30, right: 20, bottom: 20, left: 20}`,
`width` | `Number` | `null` |
`height` | `Number` |`null`|
`showTooltipPercent` | `Boolean` | `false` |
`showLegend`| `Boolean` | `true` |
`legendPosition` | `String` | `'top'` | 
`labelThreshold` | `Number`| `0.05` |
`labelType` | `String` | `'percent'` |
`donut` | `Boolean` | `false` | 
`donutRatio`| `Number` | `0.35` |
`textField`| `String`| `'label'` | Specify which field should be show as axis label text of the data model
`valueField`| `String` | `'value'` |  Specify which field should be use as axis values of the data model
`colors` | `Array` | `['#82DFD6', '#ddd']` | 

### `<vn-stacked-area>` - `StackedAreaChart`

attribute | type | default | description
----------|------|---------|------------
`model`| `Array` | `[]` | The data to show on the chart
`height` | `String` | `300px` | The chart height
`xFormat` | `Function`, `String` |`undefined` | 
`yFormat` | `Function`, `String` |`undefined` |
`rightAlignYAxis` | `Boolean` | `true` |
`showControls` | `Boolean` | `true` |
`clipEdge` | `Boolean` | `true` |
`colors` | `Array` | `['#82DFD6', '#ddd']`|

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