Hi,
Maybe this will help you out. This is adding all the series to one chart instead of seperate, but I thought I would do it
this way in case you were trying to do this initially instead of having seperate charts.

@model List<Test.Models.ChartData> 
@using Infragistics.Web.Mvc

@{
    ViewBag.Title = "ScatterSeries";
}

<h2>ScatterChart</h2>

<link type="text/css" href='@Url.Content("~/Content/Ig/ig.ui.chart.igtheme.transparent.css")'
        rel="stylesheet" />
<script type="text/javascript" src="@Url.Content("~/Scripts/Ig/infragistics.loader.js")"></script>

    @(Html.Infragistics().Loader()
                    .ScriptPath(Url.Content("~/Scripts/Ig"))
                    .CssPath(Url.Content("~/Content/Ig"))
            .Render()
    )
    <script id="tooltipTemplate" type="text/x-jquery-tmpl">
        <div id="tooltip" class="ui-widget-content ui-corner-all">
            <span id="tooltipValue">Test: ${item.Value1}</span>
        </div>
    </script>

    <style>
        #legend1
        {
            position: relative;
            float: left;

        }

    </style>

    

    <div>
    @{
        List<Test.Models.ChartData> chartDataSeriesCollection = Model as List<Test.Models.ChartData>;
        
        var i = 0;
        foreach(Test.Models.ChartData chartData in chartDataSeriesCollection)
        {
            //for each series render a different chart
            @(  Html.Infragistics().DataChart()
            .ID("chart")
            .Width("700px")
            .Height("400px")
            .VerticalZoomable(true)
            .HorizontalZoomable(true)
            .TopMargin(50)
            .BottomMargin(50)
            .CrosshairVisibility(Visibility.Visible)

            .Axes((axes) =>
            {
                axes.NumericX("xAxis");
                axes.NumericY("yAxis");
            })
            .Series((series) =>
            {
                series
                .Scatter("series" + i, chartData.AsQueryable()).Title("Series Title")
                .XAxis("xAxis").YAxis("yAxis")
                .XMemberPath((item) => item.Index).MarkerType(MarkerType.Circle)
                .YMemberPath((item) => item.Value1).MarkerType(MarkerType.Circle)
                .Legend(legend => legend.ID("legend1").Width("140px"))
                .ShowTooltip(true)
                    .Thickness(5)
                    .TooltipTemplate("tooltipTemplate");
            })
                .WindowResponse(WindowResponse.Immediate)
               .OverviewPlusDetailPaneVisibility(Visibility.Visible)

            .DataBind()
            .Render()
    )
            i++;
        }
    }

</div>

<script>
    $.ig.loader(function () {
        var customTemplate = {
            measure: function (measureInfo) {
                var size = 20;
                measureInfo.width = size;
                measureInfo.height = size;
            },
            render: function (renderInfo) {
                var ctx = renderInfo.context, radius;
                ctx.fillStyle = renderInfo.data.actualItemBrush().fill();
                ctx.strokeStyle = renderInfo.data.actualItemBrush().fill();
                ctx.lineWidth = 2.0;
                ctx.beginPath();
                radius = Math.min(renderInfo.availableWidth, renderInfo.availableHeight) / 2.0;
                ctx.arc(renderInfo.xPosition, renderInfo.yPosition, radius, 0, Math.PI * 2.0, false);
                ctx.fill();
                ctx.stroke();
                ctx.closePath();
            }
        };

        @{ var j = 0; }
        @foreach(Test.Models.ChartData chartData in chartDataSeriesCollection) {
            <text>
                $("#chart").igDataChart("option", "series", [{ name: "series@(j)", markerTemplate: customTemplate}]);   


                @{ j++; }
            </text>
        }
    });   
</script>

I hope this helps!
I'll be out of the office for a week, so if you have any follow ups you may want to start a new thread in order to have your question answered more quickly.

-Graham

I am not providing any ID while rendering charts. Its automatically taking "DataSeries1", "DataSeries2", "DataSeries3",............

if all the series have the same name, an easy way to set an option for all charts is something like this:

$(

'.ui-chart-container').parent().igDataChart("option", "series", [{ name: 'series1', brush: 'red'}]);

Does the series in each chart have the same name?

-Graham

Hi Graham,

For custom marker template, below code works if Chart ID is "chart"

$("#chart").igDataChart("option", "series", [{ name: "series1", markerTemplate: customTemplate}]); });

But in my case, I have multiple charts getting rendered with IDs as "DataChart1", "DataChart2",.........

Is there any generic way to apply marker template to all Charts on page without using ID ??