layout prop is ignored

[nboughton]

I'm trying to create a stacked bar chart but find that the layout prop is being ignored. My .vue file can be seen here

The relevant line invokes plotly with:

<plotly :data="qData.freqDist" :layout="layout.freq" />

The relevant data is defined as:

 data() {
    return {
      ...
      qData: {},
      layout: {
        freq: {
          title: "Draw Frequency",
          barmode: "stack"
        }
      },
     ...
  }

The qData prop is filled via ajax request at page load and after a form action is submitted, might this cause an issue?

[ped59430]

The freqDist attribute is not reactive if not declared in data.

You can use this.$set(qData, 'freqDist', yourAjaxReceivedValues) to make it reactive.

See this docs

[David-Desmaisons]

@nboughton any news on this?

[nboughton]

I've tried adding freqDist as part of the template data:

data() {
    return {
    ...
      qData: {
        timeSeries: {},
        freqDist: {}
      },
      layout: {
        freq: {
          title: "Draw Frequency",
          barmode: "stack"
        }
      },
...
}

And using set to ensure the data is reactive:

onSubmit() {
      this.$axios
        .post("/query", this.params)
        .then(res => {
          this.$set(this.qData, "freqDist", res.data.freqDist);
          this.$set(this.qData, "timeSeries", res.data.timeSeries);
          this.$set(this.qData, "mainTable", res.data.mainTable);
        })
        .catch(err => alert(err));
    },

However the chart still does not display as stacked bar data.

[David-Desmaisons]

Could you create a jsfiddle?

[nboughton]

I'm attempting to but I'm not sure how to load vue-plotly on there. I've never used jsfiddle before and the server backend that I send ajax requests to is not deployed publicly. I usually just bake it into a docker image for testing and running.

[ped59430]

You can use unpkg https://unpkg.com/ to upload your npm packages in jsfiddle.

For the backend, maybe you can just copy and hardcode a subset of the data, and trigger the onSubmit() from a button?

[nboughton]

https://jsfiddle.net/hybacw74/1/

I still can't get it to run vue-plotly

[jomarahi]

Try this:
<plotly ref="plot" :data="qData.freqDist" :layout="layout.freq" />

and add a watch on your layout.freq and qData.freqDist:

watch: {
    'qData.freqDist': {
      async handler (val) {
        await this.$nextTick()
        this.$refs.plot.schedule({ replot: false })
      },
      deep: true
    },
    'layout.freq': {
      async handler (val) {
        this.$refs.plot.innerLayout = val
        await this.$nextTick()
        this.$refs.plot.schedule({ replot: false })
      },
      deep: true
    }
  }

[nboughton]

This works perfectly.

Thank you very much!

[ped59430]

Worked also on my bar plot ! Thanks !!