Skip to content
📈 vue wrapper for plotly.js
JavaScript Vue HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
docs
example
public
src
tests
.browserslistrc
.eslintrc.js
.gitignore
LICENSE
README.md
babel.config.js
jest.config.js
package-lock.json
package.json
postcss.config.js
vue.config.js

README.md

vue-plotly

GitHub open issues CircleCI codecov Npm version MIT License

Thin vue wrapper for 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

<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

See Configuration Reference.

You can’t perform that action at this time.