Restore option is not working when fetching data from api

I'm using echarts in angular 16 project. Init data is empty and filled with data from api. When using zoom option and then restore the chart is empty (init state) and not filled with api call.

How to solve it? I'm using the merge input after subscribe from api.

<div 
    echarts (chartInit)="onChartInit($event)" 
    (chartFinished)="chartFinished()" 
    [loading]="isLoading" 
    [merge]= "dynamicData" 
    [options]="chartOption" 
    class="demo-chart">
</div>

Either you initialize your chart after receiving the api data or you could write your own restore option using user defined tools.

Example:

toolbox: {
  feature: {
    myRestore: {
      title: 'Restore',
      icon: 'M3.8,33.4 M47,18.9h9.8V8.7 M56.3,20.1 C52.1,9,40.5,0.6,26.8,2.1C12.6,3.7,1.6,16.2,2.1,30.6 M13,41.1H3.1v10.2 M3.7,39.9c4.2,11.1,15.8,19.5,29.5,18 c14.2-1.6,25.2-14.1,24.7-28.5',
      onclick: () => myChart.setOption({dataZoom: {start: 0, end: 100}}),
    }
  }
}