Data Markers

14 Mar 202215 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 the points by enabling the visible option of the marker 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"></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;
        }

Shape

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

<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 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;
        }