Vue-nvd3 NPM | npm.io

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.

$ npm install vue-nvd3

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

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

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']`

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']`

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']`

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']`

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']`

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']`