David-Desmaisons / Vue Plotly
Licence: mit
📈 vue wrapper for plotly.js
Stars: ✠151
Programming Languages
javascript
184084 projects - #8 most used programming language
vue-plotly
plotly.js
It provides: Thin vue wrapper for- all plotly.js methods and events
- data reactivity
- Redraw on resizing
Live example
https://david-desmaisons.github.io/vue-plotly/
Usage
<Plotly :data="data" :layout="layout" :display-mode-bar="false"></Plotly>
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 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.
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].