vue-nvd3

1.0.0 • Public • Published

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

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

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

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.0.0
    302
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 1.0.0
    302

Package Sidebar

Install

npm i vue-nvd3

Weekly Downloads

302

Version

1.0.0

License

none

Last publish

Collaborators

  • ray-liang