Vue-plotly-cartesian NPM

Forked from @rleys/vue-plotly

Using plotly.js-cartesian-dist-min

Ref: https://www.npmjs.com/package/plotly.js-cartesian-dist-min

Ready-to-use minified plotly.js cartesian distributed bundle.

Contains trace modules scatter, bar, box, heatmap, histogram, histogram2d, histogram2dcontour, image, pie, contour, scatterternary and violin.

For more info on plotly.js, go to https://github.com/plotly/plotly.js

vue-plotly

Thin vue wrapper for plotly.js

It provides:

all methods and events of plotly.js-cartesian-dist-min
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-cartesian'

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.