score:1

Accepted answer

You can not directly access series array of Vue wrapper for Highcharts. To access internal Highcharts object call getChart method:

new Vue({
  el: "#app",
  name: 'chartSample',
  components: {
    VueHighcharts: VueHighcharts.default
  },
  data () {
    return {
      Highcharts: Highcharts,
      options: {
        chart: {
          type: 'spline',
          animation: Highcharts.svg, // don't animate in old IE
          marginRight: 10
        },
        title: {
          text: 'Live random data'
        },
        xAxis: {
          type: 'datetime',
          tickPixelInterval: null,
          maxZoom: 10 * 1000
        },
        yAxis: {
          title: {
            text: 'Value'
          },
          plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
          }]
        },
        tooltip: {
          formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' +
              Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
              Highcharts.numberFormat(this.y, 2)
          }
        },
        legend: {
          enabled: false
        },
        exporting: {
          enabled: false
        },
        series: []
      }
    }
  },
  mounted () {
    var chart = this.$refs.lineCharts;
    setInterval(function () {
      var series = chart.getChart().series[0];
      if (series != null) {
        var x = (new Date()).getTime()
        var y = Math.random()
        if (series.data.length < 20) {
          series.addPoint([x, y], true, false)
        } else {
          series.addPoint([x, y], true, true)
        }
      } else {
        var a = { name: 'aaa', data: [{x: (new Date()).getTime(), y: Math.random()}] }
        chart.addSeries(a)        
      }
    }, 1000)
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue2-highcharts@1.2.4/dist/vue-highcharts.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="app">
  <div class="chart-wrapper">
    <vue-highcharts :options="options" :Highcharts="Highcharts" ref="lineCharts"></vue-highcharts>
  </div>
</div>


Related Query

More Query from same tag