Nagging Mario's Princess

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

    Install

    npm i vue-nvd3

    DownloadsWeekly Downloads

    493

    Version

    1.0.0

    License

    none

    Last publish

    Collaborators

    • ray-liang