Two charts on one page, only one updates on data change.

[mikend]

I have two charts on one page. When I change the data for both charts, only the first one get updated. If I change the order of them, it's still the first one that changes. I've tried to call RenderAsync, but it throws a null reference exception...

[joadan]

Hi,

Make sure you don't share the options object...

[mikend]

Not sharing anything.

[joadan]

Ok.. can you share some code so we can have a look?

[mikend]

Page:

<EditForm>
  <button @onclick="View">View</button>
</EditForm>
<Component1 Data=@data1 />
<Component2 Data=@data2 />

@code {
  private List<MyType>? data1;
  private List<MyType>? data2;

  protected override async Task OnInitializedAsync ()
  {
    await View();
  }

  private async Task View ()
  {
    await ViewChart1();
    await ViewChart2();
  }

  private async Task ViewChart1 ()
  {
    data1 = null;
    data1 = await dataService.GetData1();
  }

  private async Task ViewChart2 ()
  {
    data2 = null;
    data2 = await dataService.GetData2();
  }
}

Component 1:

<div>
  @if (Data is not null) {
    <ApexChart TItem="MyType" Title="">
      <ApexPointSeries
        TItem="MyType"
        Items="Data"
        Name=""
        SeriesType="SeriesType.Pie"
        XValue='e => e.Name"'
        YValue="e => e.Count"
      />
    </ApexChart>
  }
</div>

@code {
  [Parameter] public List<MyType>? Data {get; set;}

  private void OnDataChanged ()
  {
  }
}

Component 2:

<div>
  @if (Data is not null) {
    <ApexChart TItem="MyType" Title="">
      <ApexPointSeries
        TItem="MyType"
        Items="Data"
        Name=""
        SeriesType="SeriesType.Line"
        XValue="e => e.Date"
        YValue="e => e.Count"
      />
    </ApexChart>
  }
</div>

@code {
  [Parameter] public List<MyType>? Data {get; set;}

  private void OnDataChanged ()
  {
  }
}

[joadan]

Hi

I'm sorry it's hard when I can't run the sample code.