component.html

<div class="chart-wrapper">
  <canvas baseChart [datasets]="barChartDatafour" [labels]="barChartLabelsfour"
    [options]="barChartOptionsfour" [plugins]="barChartPluginsfour" [legend]="barChartLegendfour"
    [chartType]="barChartTypefour" [colors]="chartColorsfour">
  </canvas>
</div>

component.ts

submit() {
  this.newStartDate = this.datePipe.transform(this.model.startDate, 'yyyy-MM-dd');
  this.newEndDate = this.datePipe.transform(this.model.endDate, 'yyyy-MM-dd');
    this.http.post(this.url + "/portwise", {
      startDate: this.newStartDate,
      endDate: this.newEndDate
    }).subscribe((data2: any) => {
      let resp12 = Array.from(Object.keys(data2), l => data2[l]);
      this.typeResponse = resp12[0];
      localStorage.setItem('state', JSON.stringify(this.typeResponse.map(j => j.state)));
      localStorage.setItem('port', JSON.stringify(this.typeResponse.map(j => j.port)));
      localStorage.setItem('ship', JSON.stringify(this.typeResponse.map(j => j.ship)));
    }
  )
}

public barChartOptionsfour: ChartOptions = {
  responsive: true,
  scales: {
    xAxes: [{
      ticks: {
        autoSkip: false,

      }
    }], yAxes: [{
      ticks: {
        min: 0
      }
    }]
  },
  plugins: {
    datalabels: {
      anchor: 'end',
      align: 'end',
    }
  }
};
public barChartLabelsfour: Label[] = JSON.parse(localStorage.getItem('state'));
public barChartTypefour: ChartType = 'bar';
public barChartLegendfour = true;
public barChartPluginsfour = [pluginDataLabels];

public barChartDatafour: ChartDataSets[] = [
  {
    data: JSON.parse(localStorage.getItem('transport')), label: 'port'
  },
  {
    data: JSON.parse(localStorage.getItem('traffic')), label: 'ship'
  }
];


public chartColorsfour: Array<any> = [
  {
    backgroundColor: '#2196f3',
    borderColor: '#2196f3',
    pointBackgroundColor: '#2196f3',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: '#2196f3'
  },
  {
    backgroundColor: '#61a0a8',
    borderColor: '#61a0a8',
    pointBackgroundColor: '#61a0a8',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: '#61a0a8'
  }
];

I am new in angular. In the above code I want to update or refresh data of bar chart but I don't understand how to do that? Data are coming but it display when I refresh the page. Now, I am looking for when I click on button then the data will show. So, How can I do this?

Thank You