Need help with vue-plotly?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

David-Desmaisons
144 Stars 37 Forks MIT License 97 Commits 18 Opened issues

Description

📈 vue wrapper for plotly.js

Services available

!
?

Need anything else?

Contributors list

# 2,761
Vue.js
JavaScr...
resize-...
F#
83 commits

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

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.