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