Skip to content
A vue wrapper for plotly.js chart library
Branch: master
Clone or download
Martin Hansen
Martin Hansen 0.3.2
Latest commit 3f05b63 Apr 25, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Using react for resize event Apr 25, 2019
src Using react for resize event Apr 25, 2019
test Use react instead of newPlot to redraw. Closes #11 Apr 24, 2019
.babelrc Initial commit Mar 8, 2018
.editorconfig Initial commit Mar 8, 2018
.eslintrc.js Initial commit Mar 8, 2018
.gitattributes Initial commit Mar 8, 2018
.gitignore Enable travis and coveralls Mar 9, 2018
.travis.yml use current distro Mar 9, 2018
LICENSE Create LICENSE Apr 4, 2018
README.md Use react instead of newPlot to redraw. Closes #11 Apr 24, 2019
package-lock.json 0.3.2 Apr 25, 2019
package.json 0.3.2 Apr 25, 2019
webpack.config.js Added tests Mar 8, 2018

README.md

vue-plotly Build Status Coverage Status

Install

npm install @statnett/vue-plotly plotly.js --save

Then use it as a module:

import VuePlotly from '@statnett/vue-plotly'

export default {
  components: {
    VuePlotly
  },
  data: function () {
    return {
      data: [{ x: [1, 3], y: [2, 4] }],
      layout: {},
      options: {}
    }
  }
}
<vue-plotly :data="data" :layout="layout" :options="options"/>

Webpack

To use vue-plotly with webpack you should see this example repo for how to make that work.

In short, install ify-loader and transform-loader and add the following to your webpack config:

module: {
  rules: [
    {
      test: /\.js$/,
      use: [
        'ify-loader',
        'transform-loader?plotly.js/tasks/util/compress_attributes.js',
      ]
    }
  ]
}

https://plot.ly/javascript/getting-started/#start-plotting might also be relevant.

Browser

The browser UMD build is located in the dist folder.

Props

The component supports the following props:

  • data

    The traces to draw. Will trigger a call to react when changed.

  • layout

    The layout options. Will trigger a relayout when changed.

  • options

    The general options https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_config.js

  • autoResize (default: false, not reactive)

    If true, the graph resizes when the window is resized.

  • watchShallow (default: false, not reactive)

    If true, does not trigger a redraw when child properties of data changes, but not the data object itself. Might be needed for large datasets.

Events

All plotly events are captured and emitted as vue events. The names are without the plotly_ prefix. The following events are supported:

click, hover, unhover, selecting, selected, restyle, relayout, autosize, deselect, doubleclick, redraw, animated

Function reference

All functions defined by plotly are available as methods on the component. However it is not recommendable to call most of these manually since it is better to change the reactive properties on the data, layout or options directly, This will in turn trigger an update to the graph. If you do call these manually, the graph data and the props data might not be in sync.

For certain scenarios though it, like downloading an image, you need to call these functions. You call the functions as you would normally, but without the first argument, the DOM element.

The following functions are exposed:

restyle, relayout, update, addTraces, deleteTraces, moveTraces, extendTraces, prependTraces, purge, toImage, downloadImage, plot, newPlot

Some have special handling:

  • toImage

Has default png format, and graph width and height pre filled, this can be overridden.

  • downloadImage

Has default png format, and graph width and height pre filled. Filename is set to the title of the graph and with a date postfix. These can all be overridden.

  • plot

Deprecated: https://plot.ly/javascript/plotlyjs-function-reference/#plotlyplot

Accepts no arguments. Uses data, layout and options from the props data.

  • newPlot

Accepts no arguments. Uses data, layout and options from the props data.

  • react

Accepts no arguments. Uses data, layout and options from the props data.

Read more about plotlyjs function reference here: https://plot.ly/javascript/plotlyjs-function-reference/

You can’t perform that action at this time.