search

apexcharts / Blazor-ApexCharts

A blazor wrapper for ApexCharts.js
https://apexcharts.github.io/Blazor-ApexCharts
MIT License
788 stars 91 forks source link

Chart first load slow #360

Closed Solbstr closed 7 months ago

Solbstr commented 9 months ago

Hi

I'm encountering a noticeable delay when using MudBlazor Dialog with an integrated Apex Chart. This delay, approximately 1-2 seconds, occurs only during the first opening of the dialog. Subsequent openings are immediate and smooth. This behavior persists across different navigations within the application. However, once the page is reloaded, the initial delay reappears with the same characteristics.

<MudDialog DisableSidePadding=true Style="@_dialogStyle">
      <DialogContent>
          <ApexChart TItem="DietHistoryDto" Options="@options" Title="@_title" @ref="apexChart">
              <ApexPointSeries TItem="DietHistoryDto"
                              Items="@DietHistoryData"
                              Name="@_localizer["BodyWeight"]"
                              XValue="@(item => item.CreatedOn.ToString("dd MMM yy"))"
                              YValue="@(item => (decimal?)item.BodyWeight)" ShowDataLabels="false" />

              <ApexPointSeries TItem="DietHistoryDto"
                              Items="@DietHistoryData"
                              Name="@_localizer["FatPercentage"]"
                              XValue="@(item => item.CreatedOn.ToString("dd MMM yy"))"
                              YValue="@(item => (decimal?)item.FatPercentage)" ShowDataLabels="false" />
          </ApexChart>
      </DialogContent>
  </MudDialog>

Blazor wasm hosted (.NET 8) Mudblazor (6.11.1) Blazor Apex Charts (2.2.0)

joadan commented 9 months ago

Hi,

So you only sew this when the chart is in a dialog? If you have a chart in a "normal" page it's not slow?

Solbstr commented 8 months ago

@joadan, after conducting further tests, I can confirm that the slow initial loading of Blazor ApexCharts occurs not just within dialogs but also on standard pages. It appears to be a general phenomenon where the charts load more slowly the first time they are rendered, regardless of the context in which they are placed.

This slow loading does not seem related to network issues, as I have observed files being served from cache after the initial load. The relevant files include:

blazor-apexcharts.js apexcharts.esm.js Blazor-ApexCharts.wasm.sha256-xxxxxxxx

As a temporary workaround, I've created a preload component for a single chart and placed it in the main layout with display:none. This approach has significantly reduced the first load time to approximately 0.5 seconds

chart