https://github.com/emiliorizzo/vue-d3-barchart
Vue component to draw bar charts with d3 v4
https://github.com/emiliorizzo/vue-d3-barchart
Last synced: 7 months ago
JSON representation
Vue component to draw bar charts with d3 v4
- Host: GitHub
- URL: https://github.com/emiliorizzo/vue-d3-barchart
- Owner: emiliorizzo
- License: mit
- Created: 2017-07-19T17:17:49.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T01:34:52.000Z (almost 3 years ago)
- Last Synced: 2025-04-20T15:45:32.072Z (8 months ago)
- Language: Vue
- Size: 3.62 MB
- Stars: 17
- Watchers: 2
- Forks: 6
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-d3-barchart - Vue component to draw bar charts with d3 v4 ` 📝 a year ago` (UI Components [🔝](#readme))
- awesome-vue - vue-d3-barchart - Small component to draw charts using d3. (Components & Libraries / UI Components)
README
[](https://github.com/emiliorizzo/vue-d3-barchart/issues) [](https://raw.githubusercontent.com/emiliorizzo/vue-d3-barchart/master/LICENSE) [](https://www.npmjs.com/package/vue-d3-barchart)
## vue-d3-barchart
> Small component to draw charts using d3 v4
## Demo
[Demo](https://emiliorizzo.github.io/vue-d3-barchart/)
## Installation
``` bash
npm install vue-d3-barchart --save
```
## Usage
```xml
...
...
```
``` javascript
import D3BarChart from 'vue-d3-barchart'
...
components: {
D3BarChart
},
....
```
``` html
```
Or: *import source component from:* 'vue-d3-barchart/src/vue-d3-barchart.vue'
*And install devDependencies.* (d3-scale, stylus and pug)
See: [package.json](https://github.com/emiliorizzo/vue-d3-barchart/blob/master/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:*
```javasctipt
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](https://github.com/d3/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