CODEWITHSUNDEEP
angularchartsionic2
Arianule
Arianule

Reputation: 9053

Refreshing chart Ionic 2 Chart.js

I need to update a a doughnut chart when navagating back to a component but as it is at the moment it is not. 

renderChart(oplTitle, oplScore, oplScoreDifference) {
 this.options = {
  type: 'doughnut',
  data: {
    labels: ["Opl progress", ""],
    datasets: [{
      borderWidth: 0,
      data: [oplScore, oplScoreDifference],
      backgroundColor: [
        'rgba(250, 203, 27, 0.9)',
        'rgba(255, 255, 255, 1)'
      ],
      borderColor: [
        'rgba(250, 203, 27, 1)',
        'rgba(250, 203, 27, 1)'
      ],
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: oplTitle,
      position: 'bottom'
    },
    tooltips: {
      enabled: false,
      backgroundColor: 'rgba(250, 203, 27, 1)'
    },
    legend: {
      display: false,
      labels: {
        boxWidth: 20
      }
    }
  }
  }
  }

I call renderChart when page loads

 ionViewDidLoad() {
    this.renderChart(this.title, this.score, this.difference);
 }

In the Html 

<chart [options]="options"></chart>

As it is at the moment the chart renders but when navigating away and values get updated, it doesnt refresh when returning to the page. How can I 'refresh'

Upvotes: 1

Views: 1176

Answers (1)

sebaferreras
sebaferreras

Reputation: 44669

The issue is because, like you can see in the docs, the ionViewDidLoad event...

Runs when the page has loaded. This event only happens once per page being created. If a page leaves but is cached, then this event will not fire again on a subsequent viewing. The ionViewDidLoad event is good place to put your setup code for the page.

And since the page is being cached, the event just is being executed once (when the page is created). Use the ionViewDidEnter page event instead since it...

Runs when the page has fully entered and is now the active page. This event will fire, whether it was the first load or a cached page.

You can find further information here.

Upvotes: 2

Related Questions