statnett/vue-plotly

A vue wrapper for plotly.js chart library

vue-plotly

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/

vue-plotly's Issues

autoResize duplicates legend

If I set :autoResize="true", it ends up with having multiple listing of the legend everytime resize event fires.

Before resizing..

After resizing..

Also, autoResize doesn't fire when the plot is first displayed (as resize event hasn't fired yet). So I am calling plot() function when the plot is first displayed. It correctly resizes it, but it has the same side effect of duplicating the legend everytime I call plot().

Props constructor for watchShallow

In the props

vue-plotly/src/Plotly.vue

Line 47 in 3f05b63

watchShallow: false,

Should be

            watchShallow: {
              type:Boolean,
              default: function() {
                return false
              }
            },

because props references types, not values. eslint picks up this bug

Happy to provide a PR for this if needed

Vue 3 + Vite compatibility

Hey there 👋

We are migrating our Vue 2 + Vue CLI application to a Vue 3 + Vite application.

We are struggling with adapting Plotly to this new system.

Does someone have a way to make Plotly Vue 3 + Vite compatible?

Thanks

event doesn't work

v-on:click="plotlyEvent"

This is not working. Please advise!

Implementation example missing

Hello, thanks for providing this wrapper!

However it would help if you could add an implementation example :)

How to implement

Hey,

Thanks for putting this together. I am trying to implement this in a Laravel project using Vue and Webpack. I have followed the details in the Readme but when I try to render the component (vue-plotly) it says it's an undefined component - I'm new to VueJS so any help/step-by-step details you'd be able to provide would be fantastic! Cheers! :D

Cant use function animate

I tried to do some animation, but I receive this error:

vue.runtime.esm.js:1888 TypeError: _statnett_vue_plotly__WEBPACK_IMPORTED_MODULE_0___default.a.animate is not a function

this is my function:

    test()
    {
      VuePlotly.animate(
        {
          data: [{y: [Math.random(), Math.random(), Math.random()]}],
          traces: [0],
          layout: {}
        }, {
        transition: {
        duration: 500,
        easing: 'cubic-in-out'
        },
        frame: {
        duration: 500
        }
      })
    }

Vue-Plotly + Vuelayers help on popup

I am trying to create a component that features a map with points on it (from a csv ideally) that will display a Plotly popup containing a graph based on the point selected. I am not sure where to start and would really appreciate if someone can help with a codepen. I have been able to that using Folium and python scripting but the Vue/Vuelayers/Vueplotly combo has got me at a lost.

Please add plotly_afterplot to event list

Could you please add the plotly_afterplot event to the events supported by vue-plotly? I would like to be notified when the graph is panned so that I may retrieve more data to fill in the chart.

Hiding mode bar for plots?

Is it possible to remove the modebar for a vue plot with this library?

JSON input to vue to be plotted with plotly

Hey there,
I am new to Vue. I am enjoying it so far. However I am stuck in a problem I need help with. straight to the topic, I don’t know to to pass the result of an Ajax using Axios call to a variable to render it to my scatter plot using your library . Here is how I tried to do it.

 data () {
       return {
        //flag is defined as an array that I push the ajax response to
       flag:[],
       scatter:{
         data: [{ x: [2, 300,36], y: [200, 400,800] }],
         layout: {'title': String(this.flag)},
         options: {}
       },
  },        

mounted(){
axios.get('http://192.168.1.10:8000/books/api/?format=json')
.then(response => (this.flag = response))
}
when I try to use flag in layout it says undefined. This is so strange how flag could it be undefined and why? I would appreciate your help. thanks in advance.

Multiple instances affect eachother in a breaking way

I have two Plotly instances, which plot data after a button press (e.g. click button one, data for the first instance is plotted).

• plot 1 is a scatter plot
• plot 2 is a group violin plot

If I click the button for plot one, everything works fine. If I then click the button for plot two, however, the group violin mode of layout is updated in the internalLayout data of of plot one! Note, that each of these instances have separate data and layouts!
e.g.

<VuePlolty v-bind="propsOne" />
<VuePlolty v-bind="propsTwo" />

So how to get around this?

add dropdown to vue plotly charts

Hi, I am new with vue-plotly and I can't figure it out how to bind dropdown events in vue-plotly. Any kind of demo code is appreciated and also, please provide some examples for beginners. Thanks

autoResize not working

autoResize doesn't appear to be working, and it looks like it might be a two part issue.

In this commit the code went from using the function generated by debounce as the event listener, to accidentally throwing that function away. The result here is that this.react never ends up getting called because the generated debouncing function never got called.

I would suspect that this snippet would fix that aspect of the problem

this.__resizeListener = debounce(() => {
  this.internalLayout.datarevision++
  this.react()
}, 200)

however javascript isn't my strongest language.

The second part of it is that even once this change is made and react gets called, it still doesn't appear to successfully resize the image. I haven't ruled out that just being part of my specific setup though. Thoughts?

Question: using of methods

Question: How do I use react method and redraw?
I am having the data updated with another fetch from the backend but it is not reflecting the change in the chart.

Thanks

Resize Error

When autoResize is enabled, each window resize doubles the number of graphs, duplicating the same line over and over.

New plot is very expensive for frequent data changes.

I would advise using Plotly.react instead of newPlot and relayout.
This will simplify your code and instead of rebuilding a whole new plot it just redraws the styling and traces.
plotly.react docs
I actually wrote a tiny implementation of your bigger idea of embedding vuejs in plotly.js

https://medium.com/@bobthomas295/vuejs-and-plotly-js-reactive-charts-da9b3b59f2dc

Here you can see how easy it is to use the Plotly.react and the speed you get with it.

[Documentation Request]: Animation

Please provide a minimal example of animation with your wrapper. I have data dynamically bound, but it seems to just have plotly redraw, when animation is specified in options

Plotly with API

Hi everyone,

I need mount a graph with data of the a API. I'm using https://github.com/statnett/vue-plotly
My code is:

<vue-plotly :data="data" :layout="layout" :options="options" />
<script>
import axios from "axios";
import VuePlotly from "@statnett/vue-plotly";

export default {
  components: {
    VuePlotly
  },
  data() {
    return {
      fields: [],
      data: [{ x: [], y: [] }],
      layout: {},
      options: {},
      responsive: true
    };
  },
  mounted() {
    var url = "http://www.mocky.io/v2/5d77aa2f3200005b00923f71";

    axios.get(url).then(r => {
      this.fields = r.data.fields;
    });
  }
};
</script>

How make this?

Autosize plot

Hi. How can i do for auto sizing plot by containers size ?

Error: Style is not done loading

Using mapbox-gl and binding data to the component like this

<plotly :data="plot.data" :layout="plot.layout" :options="plot.options" />

I get the following exception in the console.

Uncaught (in promise) Error: Style is not done loading
    at i._checkLoaded (mapbox-gl.js?e192:33)
    at i.addSource (mapbox-gl.js?e192:33)
    at r.addSource (mapbox-gl.js?e192:33)
    at ScatterMapbox.proto.addSource (plot.js?ac37:46)
    at Object.createScatterMapbox [as plot] (plot.js?ac37:123)
    at Mapbox.proto.updateData (mapbox.js?3fca:296)
    at eval (mapbox.js?3fca:171)

Points are plotted on the map, and I have no problems in functionality, but the above is irritating.

Licence

What licence is this package under?

Issues when switch from bar plot to heatmap

Hi all!

I am really stuck on this bug where if the 'x' data passed to vue-plotly contains strings, the graph will crash when removing the data to switch to a heatmap.

I am finding it quite hard to make this reproducible in a jsfiddle because I can't get a CDN working for vue-plotly but if anyone can help I would be immensely appreciative.

Here's my attempt to show the error:

<template>
  <div id="app">
          <div class="input-div">
            <el-checkbox
              style="margin-top:3px;"
              :checked="false"
              @change="plotAsHeatmap($event)"
              border
            >Plot as heatmap</el-checkbox>
          </div>
    <vue-plotly class="chart" ref="plotly" :data="pdata" :layout="layout" :autoResize="true" />
  </div>
</template>
<script>
import VuePlotly from "@statnett/vue-plotly";
import Vue from "vue";
import {Checkbox} from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(Checkbox);
export default {
  name: "HeatmapBug",
  components: { VuePlotly },
  data: function() {
    return {
      pdata: [{ x: [], y: [], type: "scatter" }],
      layout: {
        title: "Loading csv file",
        paper_bgcolor: "rgba(0,0,0,0)",
        plot_bgcolor: "rgba(0,0,0,0)"
      },
    };
  },
  methods: {
    plotAsHeatmap: function(event) {
      if (event) {
        this.pdata = [
          {
            z: [[1, 20, 30], [20, 1, 60], [30, 60, 1]],
            type: "heatmap"
          }
        ];
      } else {
        this.pdata[0].x = ['1','2', '3']
        this.pdata[0].y = [1,2,3]
        this.pdata[0].type = "bar";
      }
    },
  }
};

new Vue({
  render: h => h(HeatmapBug),
}).$mount('#app')

</script>

How to implement locale ?

hi,

i would like to implement diffrent locale with vue-plotly.
what is the best way to do this ?

thanks

Triggering Hover Events

Hi,

I'm trying to manualy trigger an hover event on my chart so it would display the tooltips for the last records on loading.

This is something documented in the official docs

var curve1 = Math.floor(Math.random()*2),
        curve2 = Math.floor(Math.random()*2),
        point1 = Math.floor(Math.random()*14),
        point2 = Math.floor(Math.random()*14);
Plotly.Fx.hover('myDiv',[
        {curveNumber:curve1, pointNumber:point1},
        {curveNumber:curve2, pointNumber:point2}
    ]);

but I'm having some difficulties on how to implement it with the vue-plotly component

<vue-plotly :data="data" :layout="layout" :options="options"/>

In advance, many thanks for the help

Hovering events do not work when using `computed` plotting data.

Hello,

when using computed or data that is added dynamically vue-plotly should reinitialize the event handlers so it supports hovering on new plotted points as well.

Best,
Jacob

How to reduce size by using plotly bundles

Is there a way to reduce this wrapper size by only importing the needed dependencies or bundles?

such as Plotly Basic

EDIT: Managed to implement it by directly editing the wrapper.
At Plotly.vue changed
import Plotly from 'plotly.js'
to

import Plotly from 'plotly.js-basic-dist'

and at vue-plotly.js changed every reference to plotly.js to plotly.js-basic-dist

but I think there should be a correct way to implement this feature.

Broken on IE11

Tested to use the prebuilt dist version of plotly.js and it worked well.

Seems as it is https://github.com/a-vis/regl-scatter2d that have problem with IE11 not sure how they manage to build plotly.js without that issue.

Works with: Plotly.js 1.38.3 import Plotly from 'plotly.js/dist/plotly'

Usage with Nuxt

To use with Nuxt 2.10.0, I had to do the following to avoid "document is not defined":

Make a new file in plugins called vue-plotly.js and put this in it:

import Vue from 'vue';
import vPlotly from '@statnett/vue-plotly';

const VuePlotly = {
  install(Vue) {
    Vue.component('vue-plotly', vPlotly);
  },
};
Vue.use(VuePlotly);
export default VuePlotly;

And add this line to nuxt.config.js (or update plugins)

  plugins: [{ src: '~plugins/vue-plotly', mode: 'client' }],

Then, you can use <vue-plotly/> anywhere without having to import it.

---

Prior to discovering this solution, I had wrapped my chart component in <client-only/>, and was loading that component like this:

components: {
    // See here: https://stackoverflow.com/a/50458090/107083
    graph: () => import('@/components/Graph.vue'),
  },

This also worked, but I would get a warning. The above way seems "more correct".

I'm curious if anybody wants to comment on pros/cons of either approach, but am mainly putting this here in case others are stuck with this issue.

WebGL context leaking?

I am not sure if I need to do something explicit to remove the old view, but vue-plotly seems to be opening but never closing old webgl context once it's no longer used.

After a while, I start seeing the following error message.

Error: WebGL warning: Exceeded 16 live WebGL contexts for this principal, losing the least recently used one.

Can it be updated to close the old webgl upon destroy hook?

can not use d3 function

in plotly we can use d3 functions like read csv and stuff like that but i could not do it here or and d3 manupulations and functions

3d plot not working ("Webgl is not supported by your browser")

When I try to display 3d plots (like a scatter3d), I get an error message saying "Webgl is not supported by your browser".

If I use plotly directly, I get a working plot.

Does vue-plotly not support 3d plots?

Need support in using functions in vue-plotly class

Need some example of using Plotly functions like plot, extendTraces.

The use of functions using the Plotly library is listed below.
https://codepen.io/etpinard/pen/qZzyXp