You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

vue-d3-barchart

Package Overview
Dependencies
Maintainers
1
Versions
24
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-d3-barchart

Vue component to draw bar charts using d3

0.0.28
latest
Source
npmnpm
Version published
Maintainers
1
Created
Source

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

Keywords

vue

FAQs

Package last updated on 21 May 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts