# vue-plotly
[](https://github.com/David-Desmaisons/vue-plotly/issues)
[](https://circleci.com/gh/David-Desmaisons/vue-plotly)
[](https://codecov.io/gh/David-Desmaisons/vue-plotly)
[](https://www.npmjs.com/package/vue-plotly)
[](https://github.com/David-Desmaisons/vue-plotly/blob/master/LICENSE)
Thin vue wrapper for plotly.js
It provides:
- all plotly.js methods and events
- data reactivity
- Redraw on resizing
## Live example
https://david-desmaisons.github.io/vue-plotly/
## Usage
```HTML
```
```javascript
import { Plotly } from 'vue-plotly'
export default {
components: {
Plotly
},
data:{
data:[{
x: [1,2,3,4],
y: [10,15,13,17],
type:"scatter"
}],
layout:{
title: "My graph"
}
}
}
```
## API
#### Props
- `data` ***Array*** (*optional*)
[Data](https://plot.ly/javascript/reference/) to be displayed
- `layout` ***Object*** (*optional*)
Graphic [layout](https://plot.ly/javascript/reference/#layout)
- `id` ***String*** (*optional*)
Id of the root HTML element of the component.
- Others:
Plotly component implements the [transparent wrapper pattern](https://zendev.com/2018/05/31/transparent-wrapper-components-in-vue.html):
All other props will be passed as plotly graphic [option](https://plot.ly/javascript/configuration-options/).
## Installation
```
npm install vue-plotly
```
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Run your tests
```
npm run test
```
### Lints and fixes files
```
npm run lint
```
### Run your unit tests
```
npm run test:unit
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).