aurium / vue-plotly

📈 vue wrapper for plotly.js

vue-plotly

Thin Vue3 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

<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