vue-plotly


Thin Vue3 wrapper for href="https://plot.ly/javascript/"
target="_blank"
>plotly.js

It provides:

• all plotly.js methods and events


• data reactivity


• Redraw on resizing

!example

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

$3

- 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.

$3

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.

$3

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:
`javascript
import { eventNames } from 'vue-plotly'
`

Installation


`
yarn add vue-plotly
`

Project setup

`
yarn
`

$3

`
yarn dev
`

$3

`
yarn build
`

$3

One time:
`
yarn test
`
Hacking:
`
yarn test:watch --open
`

$3

`
yarn lint
``