ng-apexcharts icon indicating copy to clipboard operation
ng-apexcharts copied to clipboard

Apex charts fail to update

Open granthoff1107 opened this issue 4 years ago • 1 comments

I'm trying to create a real time candlestick chart using apexcharts. I can see the chart being initialized fine however it does not update.

I have chart options which looks like so

     this.chartOptions = {
           series: [
             {
               name: "My-series",
               data: this.getSampleData()
             }
           ],
           chart: {
             height: 350,
             type: "candlestick"
           },
           title: {
             text: "BTC SMA Chart"
           },
           xaxis: {
             type: 'datetime'
           }
         };

I have a websocket which is attempting to update

         data: { x, y }[]
         this.connection.on("candlesReceived", (candleJson) => {
           var candle = JSON.parse(candleJson);
           console.log("open: " + candle.open + " high: "
             + candle.high + " low:" + candle.low + " close:" + candle.close);

             this.data.push({ x:Date.parse(candle.timeStamp), y: [candle.open, candle.high, candle.low, candle.close]})
             this.chartOptions.series = [{ data: this.data }]
         })

On update I can see my values from the console however nothing is updated in the chart.

granthoff1107 avatar Mar 09 '21 23:03 granthoff1107

Check this out: https://stackblitz.com/edit/ngapexcharts-demo?file=src%2Fapp%2Fapp.component.ts

jigneshk5 avatar Mar 20 '21 18:03 jigneshk5