@aurium/vue-plotly
v2.0.0-rc5
Published
<p align="center"><img width="140"src="https://raw.githubusercontent.com/David-Desmaisons/vue-plotly/master/example/assets/logo.png"></p>
Downloads
38
Maintainers
Readme
vue-plotly
Live example
https://david-desmaisons.github.io/vue-plotly/
Usage
<plotly :data="data" :layout="layout" :display-mode-bar="false"/>
import Plotly from 'vue-plotly'
export default {
components: {
Plotly
},
data() {
return {
data:[{
x: [1,2,3,4],
y: [10,15,13,17],
type:"scatter"
}],
layout:{
title: "My graph"
}
}
}
}
API
Props
data
Array (optional)Data to be displayed
layout
Object (optional)Graphic layout
id
String (optional)Id of the root HTML element of the component.
Others:
Plotly component implements the transparent wrapper pattern:All other props will be passed as plotly graphic option.
Exposed methods
All Plotly.js instance methods are exposed by the component instance with "plotly
" prefix, plus the simplifyed toImage()
and downloadImage()
, that preset some options.
See the usage example at graphpicker.vue
.
Events
All Plotly.js events are re-emited by the component instance and you can listen with the v-on
directive.
See the usage example at graphpicker.vue
.
If you need, all event names are exported by this package:
import { eventNames } from 'vue-plotly'
Installation
yarn add vue-plotly
Project setup
yarn
Compiles and hot-reloads for development
yarn dev
Compiles and minifies for production
yarn build
Run your tests
One time:
yarn test
Hacking:
yarn test:watch --open
Lints and fixes files
yarn lint