Data Markers in ASP.NET CORE Chart Component

23 Jun 202319 minutes to read

Data markers are used to provide information about the data points in the series. You can add a shape to adorn each data point.

Marker

Markers can be added to points by enabling the Visible option of the marker property. By default, distinct markers will be enabled for each series in the chart.

<ejs-chart id="container" width="60%" title="Olympic Medal Counts - RIO">
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="y"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
            <e-series-marker visible="true"></e-series-marker>
        </e-series>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="y1"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
            <e-series-marker visible="true"></e-series-marker>
        </e-series>
    </e-series-collection>
</ejs-chart>
public ActionResult Index()
        {
            List<VerticalData> chartData = new List<VerticalData>
            {
               new VerticalData{ x= 2005, y= 28, y1= 18 },
               new VerticalData{ x= 2006, y= 25, y1= 10 },
               new VerticalData{ x= 2007, y= 26, y1= 20 }, 
               new VerticalData{ x= 2008, y= 27, y1= 35 },
               new VerticalData{ x= 2009, y= 32, y1= 23 },
               new VerticalData{ x= 2010, y= 35, y1= 25 }, 
               new VerticalData{ x= 2011, y= 30, y1= 15 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class VerticalData
        {
            public double x;
            public double y;
            public double y1;
        }

Shape

Markers can be assigned with different shapes such as Rectangle, Circle, Diamond etc. using the Shape property.

<ejs-chart id="container" width="60%">
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource" xName="x" yName="y"
                      type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
                <e-series-marker visible="true" shape="Diamond" width="10" height="10"></e-series-marker>
            </e-series>
        </e-series-collection>
    </ejs-chart>
public ActionResult Index()
        {
            List<VerticalData> chartData = new List<VerticalData>
            {
               new VerticalData{ x= 2005, y= 28 },
               new VerticalData{ x= 2006, y= 25 },
               new VerticalData{ x= 2007, y= 26 }, 
               new VerticalData{ x= 2008, y= 27 },
               new VerticalData{ x= 2009, y= 32 },
               new VerticalData{ x= 2010, y= 35 }, 
               new VerticalData{ x= 2011, y= 30 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class VerticalData
        {
            public double x;
            public double y;
        }

NOTE

To know more about the marker shape type refer the shape.

Images

Apart from the shapes, you can also add custom images to mark the data point using the imageUrl property.

<ejs-chart id="container" width="60%">
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource" xName="x" yName="y"
                      type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
                <e-series-marker visible="true" width="10" height="10"
                imageUrl="sun_annotation.png"></e-series-marker>
            </e-series>
        </e-series-collection>
    </ejs-chart>
public ActionResult Index()
        {
            List<VerticalData> chartData = new List<VerticalData>
            {
               new VerticalData{ x= 2005, y= 28 },
               new VerticalData{ x= 2006, y= 25 },
               new VerticalData{ x= 2007, y= 26 }, 
               new VerticalData{ x= 2008, y= 27 },
               new VerticalData{ x= 2009, y= 32 },
               new VerticalData{ x= 2010, y= 35 }, 
               new VerticalData{ x= 2011, y= 30 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class VerticalData
        {
            public double x;
            public double y;
        }

Customization

Marker’s color and border can be customized using fill and border properties.

<ejs-chart id="container" width="60%">
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource" xName="x" yName="y"
                      type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
                <e-series-marker visible="true" width="10" height="10"
                fill="red">
                    <e-marker-border width="2" color="blue"></e-marker-border>
                </e-series-marker>
            </e-series>
        </e-series-collection>
    </ejs-chart>
public ActionResult Index()
        {
            List<VerticalData> chartData = new List<VerticalData>
            {
               new VerticalData{ x= 2005, y= 28 },
               new VerticalData{ x= 2006, y= 25 },
               new VerticalData{ x= 2007, y= 26 }, 
               new VerticalData{ x= 2008, y= 27 },
               new VerticalData{ x= 2009, y= 32 },
               new VerticalData{ x= 2010, y= 35 }, 
               new VerticalData{ x= 2011, y= 30 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class VerticalData
        {
            public double x;
            public double y;
        }

Customizing specific point

You can also customize the specific marker and label using pointRender event. The pointRender event allows you to change the shape, color and border for a point.

<ejs-chart id="container" width="60%" pointRender="pointRender">
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource" xName="x" yName="y"
                      type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
                <e-series-marker visible="true" width="10" height="10">
                </e-series-marker>
            </e-series>
        </e-series-collection>
    </ejs-chart>
<script>
    pointRender= function(args){
        if (args.point.index === 3) {
            args.fill = 'red',
            args.width = 20;
            args.height = 20;
            args.shape = 'Diamond'
        }
    }
</script>
public ActionResult Index()
        {
            List<VerticalData> chartData = new List<VerticalData>
            {
               new VerticalData{ x= 2005, y= 28 },
               new VerticalData{ x= 2006, y= 25 },
               new VerticalData{ x= 2007, y= 26 }, 
               new VerticalData{ x= 2008, y= 27 },
               new VerticalData{ x= 2009, y= 32 },
               new VerticalData{ x= 2010, y= 35 }, 
               new VerticalData{ x= 2011, y= 30 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class VerticalData
        {
            public double x;
            public double y;
        }

Fill marker with series color

Marker can be filled with the series color by setting the isFilled property to true.

<ejs-chart id="container" width="60%" pointRender="pointRender">
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource" xName="x" yName="y"
                      type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
                <e-series-marker visible="true" width="10" height="10" isFilled = "true">
                </e-series-marker>
            </e-series>
        </e-series-collection>
    </ejs-chart>
public ActionResult Index()
        {
            List<VerticalData> chartData = new List<VerticalData>
            {
               new VerticalData{ x= 2005, y= 28 },
               new VerticalData{ x= 2006, y= 25 },
               new VerticalData{ x= 2007, y= 26 }, 
               new VerticalData{ x= 2008, y= 27 },
               new VerticalData{ x= 2009, y= 32 },
               new VerticalData{ x= 2010, y= 35 }, 
               new VerticalData{ x= 2011, y= 30 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class VerticalData
        {
            public double x;
            public double y;
        }