Vue-plotly component

index.html

<div id="plotlyExample" style="grid-template-columns: 50% 50%; display: grid; grid-template-rows: 400px 100px">
	<plotly-graph @hover="hover" v-bind:data="linePlotData" div-id="plot1" v-bind:height="90" :column-number="1"></plotly-graph>
	<plotly-graph @hover="hover" v-bind:data="scatterPlotData" div-id="plot2" v-bind:height="90" :column-number="2"></plotly-graph>
	<input type="range" min="-10" max="10" v-model="currentVal" @change="sliderUpdate" style="grid-column-start: 1; grid-column-end: 3; width: 50%; margin-left: auto; margin-right: auto" />
</div>

script.js

// JavaScript source code
Vue.component('plotly-graph', {
    template: "<div v-bind:id='divId' :class='{ resizePlot: resize }' :style='{ height: height +  \"%\", gridcolumn: columnNumber }'></div>",
    props: {
        data: {
            type: Array
        },
        layout: {
            type: Object
        },
        divId: {
            type: String,
            required: true,
            default: "test1"
        },
        resize: {
            type: Boolean,
            default: true
        },
        height: {
            type: Number,
            default: 100
        },
        columnNumber: {
            type: Number,
            default: 1
        }
    },
    mounted() {
        this.Plot();
        $('#' + this.divId).on('plotly_hover', this.hover);
        this.$watch('data', this.Plot, { deep: true });
        $(window).bind('resize', this.onResize);
    },
    beforeDestroy() {
        this.$el.off('plotly_hover', this.hover);
    },
    methods: {
        hover: function (event, eventData) {
            this.$emit('hover', eventData.points, this.divId);
        },
        Plot() {
            return Plotly.newPlot(this.divId, this.data, this.layout);
        },
        onResize() {
          if(this.resize) {
            var d3 = Plotly.d3;
            gd3 = d3.select('#' + this.divId);
            gd3.style({
                width: '100%',
                height: this.height + '%'
            });
            Plotly.Plots.resize(gd3[0][0]);
          }
        }
    }
});

var plotvm = new Vue({
    el: '#plotlyExample',
    data: {
        linePlotData: [{ x: [1, 2, 3], y: [1, 3, 1], mode: 'lines' }],
        scatterPlotData: [{ x: [1, 2, 3], y: [1, 5, 5], mode: 'markers' }],
        currentVal: 0
    },
    methods: {
        hover(points, id) {
            alert(id + "...x: " + points[0].x + ", y: " + points[0].y);
        },
        sliderUpdate() {
            this.linePlotdata = [{
                x: this.linePlotData[0].x.push(this.linePlotData[0].x.length + 1), y: this.linePlotData[0].y.push(this.currentVal), mode: 'lines'
            }];
            this.scatterPlotdata = [{
                x: this.scatterPlotData[0].x.push(this.scatterPlotData[0].x.length + 1), y: this.scatterPlotData[0].y.push(-this.currentVal), mode: 'lines'
            }];
        }
    }
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.32.0-onprem/plotly.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script>

vue-plotly-component.markdown

Vue-plotly component

A Pen by Robert Hamner on CodePen.

License.