vue-nvd3

The NVD3 chart library for Vue
3,727 30
vue vue2 chart d3 nvd3
Install
npm install vue-nvd3
Latest Version:1.0.0
Vue:2
Last Updated:Jan 1, 2017
Links: GitHub  ·  npm
Maintainer: ray-liang

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

Related Packages

vue2-flow

simple and customizable vue 2 flow chart component.

4,286 12
chart vue2 flow chart vue flow chart
vue-gauge-chart

A customizable Vue.js component for gauge charts.

527
chart vue vue2 component gauge
iov-chart

基于 ECharts 的 Vue 2 图表组件库

524
chart vue vue2 echarts iov-chart 组件库
@opendata-ai/openchart-vue

Vue 3 components for openchart: , , ,

25,183 33
chart d3 vue data-table declarative svg visualization
@dullar/mercury

Advanced and highly reusable Mobile UI Components built on Vue2 & You can define...

8,553 6
vue2

Version History

Version Released Vue License
1.0.0 ^2.1.0