GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → DotNetAge → vue-nvd3

DotNetAge / vue-nvd3

Licence: other
The NVD3 chart library for Vue

Programming Languages

javascript
184084 projects - #8 most used programming language
Vue
7211 projects
HTML
75241 projects

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']
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].