NuxtJS HighCharts Series data only updates once

user_5568405 0
Viewed 503

I am currently using nuxt-highcharts: 1.0.8 and nuxt: 2.11.0

I have a basic series data below where I want it to update continuously using setInterval. My update is more on adding a single candle only then that single additional candle will always update. But after adding the first time, my chart will not change anymore.

(Not Working Properly)

<template>
  <div>
    <highstock
      :options="chartOptions"
      :update="['options.title', 'options.series']"
    />
    time: {{ time }}
    <button @click="updateChart">Click Here</button>
  </div>
</template>

<script>
const data = [
  [1318607760000, 421.07, 421.49, 420.7, 421.46],
  [1318607820000, 421.4601, 421.71, 421.36, 421.69],
  [1318607880000, 421.69, 421.94, 421.663, 421.94],
  [1318607940000, 421.94, 422, 421.8241, 422]
];

export default {
  data() {
    return {
      time: 1318607940000,
      open: 421.94,
      high: 422,
      low: 421.8241,
      close: 422,
      chartOptions: {
        credits: { enabled: false },
        chart: {
          pinchType: "xy",
          zoomBySingleTouch: true,
          panning: { enabled: true, type: "xy" }
        },
        title: {
          text: "BTC / USD"
        },
        rangeSelector: {
          buttons: [
            {
              type: "hour",
              count: 1,
              text: "1h"
            },
            {
              type: "hour",
              count: 2,
              text: "2h"
            },
            {
              type: "hour",
              count: 4,
              text: "4h"
            },
            {
              type: "hour",
              count: 6,
              text: "6h"
            },
            {
              type: "hour",
              count: 12,
              text: "12h"
            },
            {
              type: "day",
              count: 1,
              text: "1d"
            }
          ],
          selected: 5,
          inputEnabled: false
        },
        navigator: { enabled: false },
        series: [
          {
            type: "candlestick",
            data,
            tooltip: {
              valueDecimals: 2
            },
            upColor: "#3fbf4a",
            upLineColor: "#3fbf4a",
            color: "#e81010"
            // pointStart: 1631631295000, // need 3 0s on the end from a UNIX timestamp
            // pointInterval: 4000 // The interval between data
          }
        ],
        time: { timezone: "Asia/Singapore" }
      }
    };
  },
  mounted() {
    const _this = this;
    setInterval(function() {
      _this.time += 60000;
      _this.open += 1;
      _this.high += 1;
      _this.low += 1;
      _this.close += 1;
      _this.updateChart([
        _this.time,
        _this.open,
        _this.high,
        _this.low,
        _this.close
      ]);
    }, 5000);
  },
  methods: {
    updateChart(number) {
      this.chartOptions.series = [
        {
          type: "candlestick",
          data: data.concat([number]),
          tooltip: {
            valueDecimals: 2
          },
          upColor: "#3fbf4a",
          upLineColor: "#3fbf4a",
          color: "#e81010"
        }
      ];
    }
  }
};
</script>

I have another example but this is working where the chart always updates and the data is very much simpler.

(Working Example)

<template>
  <div>
    <highstock
      :options="chartOptions"
      :update="['options.title', 'options.series']"
    />
    time: {{ time }}
    <button @click="updateChart">Click Here</button>
  </div>
</template>

<script>
const data = [1, 2, 3, 4];

export default {
  data() {
    return {
      time: 1318607940000,
      open: 421.94,
      high: 422,
      low: 421.8241,
      close: 422,
      chartOptions: {
        credits: { enabled: false },
        chart: {
          pinchType: "xy",
          zoomBySingleTouch: true,
          panning: { enabled: true, type: "xy" }
        },
        title: {
          text: "BTC / USD"
        },
        rangeSelector: {
          buttons: [
            {
              type: "hour",
              count: 1,
              text: "1h"
            },
            {
              type: "hour",
              count: 2,
              text: "2h"
            },
            {
              type: "hour",
              count: 4,
              text: "4h"
            },
            {
              type: "hour",
              count: 6,
              text: "6h"
            },
            {
              type: "hour",
              count: 12,
              text: "12h"
            },
            {
              type: "day",
              count: 1,
              text: "1d"
            }
          ],
          selected: 5,
          inputEnabled: false
        },
        navigator: { enabled: false },
        series: [
          {
            type: "candlestick",
            data,
            tooltip: {
              valueDecimals: 2
            },
            upColor: "#3fbf4a",
            upLineColor: "#3fbf4a",
            color: "#e81010"
          }
        ],
        time: { timezone: "Asia/Singapore" }
      }
    };
  },
  mounted() {
    const _this = this;
    setInterval(function() {
      _this.open += 300;
      _this.updateChart(_this.open);
    }, 3000);
  },
  methods: {
    updateChart(number) {
      this.chartOptions.series = [
        {
          type: "candlestick",
          data: data.concat(number),
          tooltip: {
            valueDecimals: 2
          },
          upColor: "#3fbf4a",
          upLineColor: "#3fbf4a",
          color: "#e81010"
        }
      ];
    }
  }
};
</script>

<style lang="scss" scoped></style>

My real goal is to continuously add candles for every interval but I want to get past this challenge first. But the end goal for this practice is to create a stock market data graph. I hope you can assist me, I have been trying for hours

You may replicate with my repository is: https://github.com/infrastructure-playground/vuejs. Kindly setup w/ the steps below then visit localhost:3000/charts :

$ git clone -b feat/highcharts https://github.com/infrastructure-playground/vuejs.git
$ cd vuejs
$ npm install
$ npm run dev
nuxt.js
1 Answers

I once had the same problem (also when handling with highcharts actually), that updating an array inside an object caused a reactivity problem with a component that was dependent on the object.

I solved it by using Object.assign() to replace the object all at once to the updated object, instead of updating the original object's attributes.

try to do the following:

updateChart(number) {
  const updatedSeries = [
    {
      type: "candlestick",
      data: data.concat([number]),
      tooltip: {
        valueDecimals: 2
      },
      upColor: "#3fbf4a",
      upLineColor: "#3fbf4a",
      color: "#e81010"
     }
  ];
  Object.assign(this.chartOptions.series, updatedSeries)
}

I think this answer also explains the problem itself.

user_152139300
Related