Donut chart loader not showing

[Constantinos]

I am using a Donut chart in my asp.net core application.

issue is that it is not showing the default loader while it fetch for data. on place of chart it looks blank space.

as it is not user friendly, please suggest me if i am missing something.

below is the code

@(
Html.Kendo().Chart<SampleProj.Models.Home.HomeChartViewModel>()
.Name("chart1")
.ChartArea(chartArea => chartArea.Background("transparent"))
.Legend(legend => legend.Position(ChartLegendPosition.Bottom))
.SeriesDefaults(series =>series.Donut().StartAngle(90))
.DataSource(ds => ds.Read(read => read.Action("GetApplicationByType", "Home")))
.Series(series =>
{
series.Donut(model => model.value, model => model.category)
.Name("Application Type")
.Labels(labels => labels
.Visible(true)
.Position(ChartSeriesLabelsPosition.OutsideEnd)
.Template("#= category #: \n #= value#%")
.Background("transparent")
)
.ColorField("color");
})
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= category # (#= series.name #): #= value #%")
.Format("{0}%")
)
)

 

[Alexander]

Hi Constantinos,

For the benefit of the community, I am attaching my reply from a previous discussion of ours, so that the community can benefit from it as well.

"Generally, the Telerik UI for ASP.NET Core Donut Chart Type does not expose a built-in loading indicator upon fetching its content.

Regardless, we have a dedicated knowledge base article. That further depicts how an overlay can be explicitly set for the Chart upon fetching its data which can be found here:

• Show Overlay while the Chart Is Loading

I have discussed a similar topic in a public forum post that you might find helpful, as it gives a more detailed overlook of how the aforementioned can be incorporated in the case of a Telerik UI for ASP.NET Core Chart incarnation:

• Can Line Chart be rendered without binding data? - more in particular the approach is outlined as an answer to the second inquiry.

Having this in mind, I have created a proof-of-concept example that further depicts this approach. Where I have purposefully simulated a slow fetching data process on the server-side as follows:

[HttpPost]
public ActionResult _WorldScreenResolution()
{
    Thread.Sleep(5000);
}

This is the exhibited behavior:

I hope this helps."

Kind Regards,
Alexander
Progress Telerik