Few Partial Views(charts) on one page

Question

I have a View on which I would like to display list of partial Views with the HighChart inside.

Controller:

public ActionResult PartialChart(String lName)
    {
        ReportDict = TempData["Report_Dict"] as Dictionary<ReportElement, List<Shift>>;
        DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts("chart")
        .SetTitle(new Title { Text = lName + " Output" })
        .SetXAxis(new XAxis
        {
            Categories = HCharExt.getCategoriesDate(ReportDict)
        })
        .InitChart(new Chart { Width = 500, Height = 300 })
        .SetSeries(new Series
        {
            Name = lName + " Output",
            Data = new Data(HCharExt.getLineSerie(ReportDict, "output", lName))
        });

        return PartialView(chart);
    }

View:

@{
    ViewBag.Title = "CompleteReport";
}
<h2>Report</h2>

<ul>
@foreach (var l in ViewBag.RepDict)
{
    <li>
    @Html.Action("PartialChart", "Report", new { lName = l.Key.Line.Name })
    </li>
}
</ul>

If I run it, it works but only one Chart (partial View) loads, the last one in the dictionary RepDict. I'm assuming that it loads all of the charts to the same partial View and only last one persist.

How do I load each chart to the new instance of partial View?

Or how should I edit my code to get few same type charts on one page but with different data.

Many Thanks

Answer 1

Solved using different names for each instance of a chart.