Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/David-Desmaisons/vue-plotly
📈 vue wrapper for plotly.js
https://github.com/David-Desmaisons/vue-plotly
Last synced: about 2 months ago
JSON representation
📈 vue wrapper for plotly.js
- Host: GitHub
- URL: https://github.com/David-Desmaisons/vue-plotly
- Owner: David-Desmaisons
- License: mit
- Created: 2019-03-13T04:31:10.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-04-30T15:54:54.000Z (about 1 year ago)
- Last Synced: 2024-04-11T20:03:12.837Z (about 2 months ago)
- Language: JavaScript
- Homepage: https://david-desmaisons.github.io/vue-plotly/
- Size: 9.61 MB
- Stars: 251
- Watchers: 3
- Forks: 76
- Open Issues: 38
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-vue - vue-plotly - Wrapper for [plotly.js](https://plot.ly/javascript/) declarative charting library that ships with 20 chart types, including 3D charts, statistical graphs, and SVG maps. (Components & Libraries / UI Components)
- awesome-vue - vue-plotly - Wrapper for [plotly.js](https://plot.ly/javascript/) declarative charting library that ships with 20 chart types, including 3D charts, statistical graphs, and SVG maps. (Components & Libraries / UI Components)
- awesome-vue - vue-plotly - Wrapper for [plotly.js](https://plot.ly/javascript/) declarative charting library that ships with 20 chart types, including 3D charts, statistical graphs, and SVG maps. (Components & Libraries / UI Components)
- awesome-vue - vue-plotly - Wrapper for [plotly.js](https://plot.ly/javascript/) declarative charting library that ships with 20 chart types, including 3D charts, statistical graphs, and SVG maps. (Components & Libraries / UI Components)
- awesome-vue - vue-plotly - Wrapper for [plotly.js](https://plot.ly/javascript/) declarative charting library that ships with 20 chart types, including 3D charts, statistical graphs, and SVG maps. (Components & Libraries / UI Components)
- awesome-vue - vue-plotly - Wrapper for [plotly.js](https://plot.ly/javascript/) declarative charting library that ships with 20 chart types, including 3D charts, statistical graphs, and SVG maps. (Components & Libraries / UI Components)
- awesome-vue - vue-plotly - Wrapper for [plotly.js](https://plot.ly/javascript/) declarative charting library that ships with 20 chart types, including 3D charts, statistical graphs, and SVG maps. (Components & Libraries / UI Components)
- awesome-vue - vue-plotly - Wrapper for [plotly.js](https://plot.ly/javascript/) declarative charting library that ships with 20 chart types, including 3D charts, statistical graphs, and SVG maps. (Components & Libraries / UI Components)
- awesome-vue - vue-plotly - Wrapper for [plotly.js](https://plot.ly/javascript/) declarative charting library that ships with 20 chart types, including 3D charts, statistical graphs, and SVG maps. (Components & Libraries / UI Components)
- awesome-vue - vue-plotly - Wrapper for [plotly.js](https://plot.ly/javascript/) declarative charting library that ships with 20 chart types, including 3D charts, statistical graphs, and SVG maps. (UI Components / Charts)
- awesome-vue - vue-plotly - Wrapper for [plotly.js](https://plot.ly/javascript/) declarative charting library that ships with 20 chart types, including 3D charts, statistical graphs, and SVG maps. (Components & Libraries / UI Components)
README
# vue-plotly
[![GitHub open issues](https://img.shields.io/github/issues/David-Desmaisons/vue-plotly.svg)](https://github.com/David-Desmaisons/vue-plotly/issues)
[![CircleCI](https://circleci.com/gh/David-Desmaisons/vue-plotly.svg?style=shield)](https://circleci.com/gh/David-Desmaisons/vue-plotly)
[![codecov](https://codecov.io/gh/David-Desmaisons/vue-plotly/branch/master/graph/badge.svg)](https://codecov.io/gh/David-Desmaisons/vue-plotly)
[![Npm version](https://img.shields.io/npm/v/vue-plotly.svg)](https://www.npmjs.com/package/vue-plotly)
[![MIT License](https://img.shields.io/github/license/David-Desmaisons/vue-plotly.svg)](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
![example](./example/assets/demo.gif)
## Live example
https://david-desmaisons.github.io/vue-plotly/
## Usage
```HTML
```
```javascript
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](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/).