Chart can't be populated from data component [vue-highcharts wrapper]

Question

I'm starting with the Higcharts wrapper for vue. Currently I'm migrating the code of a stockchart that I was using outside vue without problems into the wrapper. Everything is going well except that I can't populate the chart from component data or computed variables. Only from hard-written array or from component props.

This is the code:

<template>
  <highcharts
    class="stock"
    v-bind:constructor-type="'stockChart'"
    v-bind:options="config"
    v-bind:deepCopyOnUpdate="false"
  ></highcharts>
</template>

<script>
export default {
  name: "stockChart",
  props: {
    options: {
      type: Object,
      required: true
    }
  },
  data: function() {
    return {
      config: {
        series: [{
          name: this.options.title,
          //data: [[1,3],[2,7],[3,9],[4,2],[5,0],[10,13]] //THIS WORKS!
          //data: this.options.plotData                   //THIS ALSO WORKS!!
          data: this.plotData                             //THIS DOESN'T...
        }],
        (...)
      },
      plotData: [[1,3],[2,7],[3,9],[4,2],[5,0],[10,13]]
    }
  },
  computed: {
    // THIS ALSO ISN'T WORKING... THAT IS HOW I WANT IT TO WORK
    /*plotData: function(){
        return this.options.xData.map((e,i) => [e, this.options.yData[i]]);
    }*/
  }
}

</script>
<style scoped>
    .stock {
      width: 70%;
      margin: 0 auto
    }
</style>

I don't understand anything. The three methods should be equivalent. Why I can load data from props but not from data or computed? I can't find any good documentation about the vue wrapper to understand why is this happening.

Thanks for your help,

H25E

daniel_s · Accepted Answer · 2020-05-22 13:11:05Z

1

The answer is very simple. The reason is that the Vue defines all component data only after returning a whole data object, so you should not use this keyword to refer other component data within data definition. In order to make it work correctly, you should keep the plotData within component's data, but move the config into the computed properties. Take a look on the code below:

  props: {
    options: {
      type: Object,
      required: true
    }
  },
  data: function() {
    return {
      plotData: [[1,3],[2,7],[3,9],[4,2],[5,0],[10,13]]
    }
  },
  computed: {
    config: function() {
      return {
        series: [{
          name: this.options.title,
          data: this.plotData
        }]
      }
    },
  }

answered May 22, 2020 at 13:11

daniel_s

3,7521 gold badge10 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Héctor Over a year ago

Yes. That make it work. To understand it 100%... I can't define properties insie data{} dependent on each other?

daniel_s Over a year ago

Indeed. You should not try to do that because it will not work at all.

Collectives™ on Stack Overflow

Chart can't be populated from data component [vue-highcharts wrapper]

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related