vdb

vue-d3-barchart

Vue component to draw bar charts with d3 v4

Showing:

Popularity

Downloads/wk

50

GitHub Stars

15

Maintenance

Last Commit

1yr ago

Contributors

1

Package

Dependencies

3

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Vue Graph

Readme

GitHub issues GitHub license npm

vue-d3-barchart

Small component to draw charts using d3 v4

vue d3 barchart

Demo

Demo

Installation

npm install vue-d3-barchart --save

Usage

  ...  
  <d3-barchart :data='data' :options='options'/>
  ...

import D3BarChart from 'vue-d3-barchart'
...
  components: {
    D3BarChart
  },
....

<style src="vue-d3-barchart/dist/vue-d3-barchart.css"></style>

Or: import source component from: 'vue-d3-barchart/src/vue-d3-barchart.vue' And install devDependencies. (d3-scale, stylus and pug) See: package.json)

Props

  • data: Array of values or objects (see options: getX,getY)

  • options:

    • size:{w,h}

    • getX: function(d)

    • getY: function(d)

    • labels: Boolean show axis labels

    • axis: { valuesY:Boolean, valuesX:boolean, linesX:boolean, linesY:boolean } render axis

    • axisTicks

    • padding: 0.1 bar padding

    • colors: Array | Object

      • Array: (range) [ maxValueColor, minValueColor ]
      • Object { key(value): color} , max values first
    • colorInterpol: Function | name of D3 function

    • colorScale: Function | name of D3 function (colorInterpol Overrides this option)

    • colorCb: Color Function: (x,d) => {return color}, Overrides colorScale and colorInterpol

    • line: Boolean render line

    • formatX: Function(x) --> x

    • formatY: Function(y) --> y

    • formatLabel(d, formatX, formatY) -> , one value per line: String | Object: {style,css,txt}

default:

      formatLabel (bar, formatX, formatY) {
        return [
          'x: ' + formatX(bar.xv),
          'y: ' + formatY(bar.yv)
        ]
      },
  • bars: Boolean : show bars | Object:

    • gradient: Boolean | Object : { sroke:Boolean, fill:Boolean }
  • curve: Boolean | Object:

    • type: String | Function

      • String, name of d3 curve Types ex: 'linearClosed' or 'curveLinearClosed' (default: MonotoneX) see d3-shape#curves

      • Fuction: custom curve function

    • style: Object: {css-prop: value}

    • gradient: Boolean | Object : { sroke:Boolean, fill:Boolean }

    • close: Boolean, close curve to chart limits

  • curveBack: render another curve, with same settings as default.

  • marks: Boolean | Object: {type: point | square style:{ fill , stroke }, size }

  • domain Object: {max:[number],min:[number] The domain values are auto calculated from data, but for example,if you want a chart that start from zero you can pass the domain option as: {min:0}

d object

  • xv: original x value
  • yv: original y value
  • x: computed chart x value
  • y: computed chart y value
  • color: computed chart color
  • percentX: percent of x
  • percentY: percent of y
  • w: computed bar width,
  • d: original data

Events

  • barClick: fired on click/touch bar, emits bar,event

Dependencies

  • d3-scale
  • d3-array
  • d3-shape

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial