Vue-d3-barchart NPM

vue-d3-barchart

Small component to draw charts using d3 v4

vue d3 barchart

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}