vue-d3-barchart

    0.0.28 • Public • Published

    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

    Install

    npm i vue-d3-barchart

    DownloadsWeekly Downloads

    56

    Version

    0.0.28

    License

    MIT

    Unpacked Size

    3.55 MB

    Total Files

    42

    Last publish

    Collaborators

    • jsjs