Hello Martijn,

Thank you for getting back to me!

I’m glad that you find the provided information helpful and that you manage to achieve your requirements!

Thank you for using Infragistics Components!

Best Regards,
Martin Evtimov
Associate Software Developer
Infragistics, Inc.

I found the answer... by setting igDataChart markerOutlines option to the same given brushes during initializing igDataChart.

 $("#chart").igDataChart({
                isHorizontalZoomEnabled: true,
                isVerticalZoomEnabled: true,
                windowResponse: "immediate",
                brushes: brushes,
                markerOutlines: brushes,
                width: "100%",
                axes: [
                    {
                        type: "numericX",
                        name: "xAxis",
                        stroke: "black",
                        strokeThickness: 1,
                        LabelTopMargin: 10,
                        minorStroke: "WhiteSmoke",
                        labelAngle: 0,
                        labelExtent: 40,
                        labelTextColor: "black"

                    }, {
                        type: "numericY",
                        name: "yAxis",
                        stroke: "black",
                        strokeThickness: 1,
                        majorStroke: "lightGrey",
                        minorStroke: "WhiteSmoke",
                        labelExtent: 60,
                        labelTextColor: "black",
                        formatLabel: function (item) {
                            return item.toFixed(2);
                        }
                    }
                ]
               
            });

Hello Martin,

Thank you very much for your provided sample. I managed to restrict the igDataChart brushes to my own given list. However, facing now another problem. The series outline is now differs from the series brush. 

This is my code used to initialize data chart and add demo series.

@{
    ViewBag.Title = "title";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Test Chart</h2>
<div class="container-fluid" style="padding: 0; height: 100%; width: 100%">
    <div class="row" style="height: 95%; margin: 0px">
        <div id="chartDiv" class="col-md-12" style="width: 100%; height: 100%; padding: 0; margin: 0; border: 1px solid black; background-color: white">
            <div id="chart" style="height: 88%"></div>
            <div id="chartZoom"></div>
            <div>
                <input type="checkbox" id="chartMarker" />
                <label for="chartMarker" style="margin:0">Show data markers</label>
            </div>
            <div id="legend"></div>
            <button onclick="addDemoData()">Add data</button>
        </div>
       
    </div>
</div>

@section ViewScripts
{


    <script type="text/javascript">

        var seriesIndex = 0;
        var series = [];
        var points = [];
        var brushes = ["green", "red", "pink", "yellow", "aqua", "brown", "violet", "chocolate"];
        $(function () {
            log("Test Chart - begin");
            initializeDataChart();
            // chart marker code
            var marker = document.getElementById("chartMarker");
            marker.checked = true;
            $("#chartMarker").click(function() {
                var mType = ($(this).is(":checked")) ? "circle" : "none";
                var arrayLength = series.length;
                for (var i = 0; i < arrayLength; i++) {
                    if (series[i].type === "scatterLine" &
                        series[i].brush !== "rgba(245, 0, 24, 0.3)" &
                        series[i].brush !== "rgba(0, 0, 255, 0.3)") {
                        series[i].markerType = mType;
                        log(series[i]);
                    }
                }
                $("#chart").igDataChart({
                    series: series
                });
                
            });
            log("Test Chart - end");
        });
        function initializeDataChart() {
            log("initializeDataChart()");
            $("#chart").igDataChart({
                isHorizontalZoomEnabled: true,
                isVerticalZoomEnabled: true,
                windowResponse: "immediate",
                brushes: brushes,
                width: "100%",
                axes: [
                    {
                        type: "numericX",
                        name: "xAxis",
                        stroke: "black",
                        strokeThickness: 1,
                        LabelTopMargin: 10,
                        minorStroke: "WhiteSmoke",
                        labelAngle: 0,
                        labelExtent: 40,
                        labelTextColor: "black"

                    }, {
                        type: "numericY",
                        name: "yAxis",
                        stroke: "black",
                        strokeThickness: 1,
                        majorStroke: "lightGrey",
                        minorStroke: "WhiteSmoke",
                        labelExtent: 60,
                        labelTextColor: "black",
                        formatLabel: function (item) {
                            return item.toFixed(2);
                        }
                    }
                ]
               
            });
            $("#chartZoom").igZoombar({
                target: "#chart",
                height: "25px",
                zoomAction: "immediate",
                defaultZoomWindow: {
                    left: 0,
                    width: 100
                }
            });
            // get brushes
            var getActualBrushes = $("#chart").igDataChart("option", "brushes");
            log("ActualBrushes:" + JSON.stringify(getActualBrushes));
        }

        function addData(name, points) {
            var demoData = { "name": name, "points": points };
            points.push(demoData);
            createSeries(demoData.name, demoData.points);
            $("#chart").igDataChart({
                series: series
            });
        }

        function addDemoData() {
            seriesIndex += 1;
            var demoPoints = [];
            for (var i =0; i < 10; i++) {
                var point = {};
                point.Value = Math.floor(Math.random() * 101);
                point.Order =i;
                demoPoints.push(point);
            }
            addData("s"+seriesIndex, demoPoints);
        }
        function createSeries(dataName, points) {

            var s = {
                type: "scatterLine",
                name: dataName,
                markerType: "circle",
                //markerOutline: "black",
                thickness: 2,
                xAxis: "xAxis",
                yAxis: "yAxis",
                xMemberPath: "Order",
                yMemberPath: "Value",
                trendLineThickness: 3,
                showTooltip: true,
                title: dataName,
                dataSource: points,
                legend: { element: "legend" },
                legendItemTemplate: {
                    render: renderLegendItemTemplate
                }
            };
            series.push(s);
            log("series contains (" + series.length + ")");
        }

        function renderLegendItemTemplate(renderInfo) {

            var $context = renderInfo.context,
                $color = $("<td>").css("background-color", renderInfo.data.series().actualBrush().fill()).width(15).height(15);
            var $text = $("<td>").text(renderInfo.data.series().title()).addClass("ui-chart-legend-item-text");
            var $space = $("<td>").text(" ");
            $context.append($color);
            $context.append($space);
            $context.append($text);
        }
    </script>


}

 With best regards,

Martijn