Asp.net MVC Kendo ui render multiple pie charts

Question

I am trying to render multiple kendo ui pie charts contained within a foreach loop. When rendered, all the tracking items (in Model.TrackingItems) are displayed correctly(which are between the span), however, only the first chart is rendered. There are three items in the Tracking Items in the list, three pie charts should be rendered. Any ideas what could be the problem?

Thanks in advance.

  @foreach (var item in Model.TrackingItems)
        {
             @* THIS PART IS RENDERED FOR EACH ITEM *@

   <span>Not Done - </span>@Html.Encode(item.NotDone)<br />
                    <span>Not Required - </span>@Html.Encode(item.NotRequired)<br />
                    <span>Completed - </span>@Html.Encode(item.Completed)<br />
                    <span>Cancelled - </span>@Html.Encode(item.Cancelled)<br />

               @* ONLY THE FIRST PIE CHART IS RENDERED *@
                <div id="@Html.Encode(item.Id)" class="chart-wrapper">
                    @(Html.Kendo().Chart()
                    .Name("chart")
                    .Title(title => title
                    .Text("Tracking Info")
                    .Position(ChartTitlePosition.Top))
                    .Legend(legend => legend
                    .Visible(false)
                )
                .Series(series =>
                {
                    series.Pie(new dynamic[] {
                        new {category="Not Done",value=@item.NotDone,color="#9de219"},
                        new {category="Not Required",value=@item.NotRequired,color="#90cc38"},
                        new {category="Completed",value=@item.Completed,color="#068c35"},
                        new {category="Cancelled",value=@item.Cancelled,color="#006634"},

                })
                .Labels(labels => labels
                    .Template("#= category #: \n #= value#%")
                    .Background("transparent")
                    .Visible(true)
                )
                .StartAngle(150);
                })
                .Tooltip(tooltip => tooltip
                .Visible(true)
                .Format("{0}%")
                ))
                </div>
        }

Answer 1

It turned out the .Name attribute needs to be unique not the div id.

Changed

 .Name("chart")

To

 .Name(@Html.Encode(item.Id))