vue3-plotly

Thin vue wrapper for plotly.js

It provides:

• all plotly.js methods and events
• data reactivity
• Redraw on resizing

Usage

<VuePlotly :data="data" :layout="layout" :display-mode-bar="false"></VuePlotly>

import { VuePlotly } from 'vue3-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.

Installation

npm install vue3-plotly

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint