Search results

Data Markers

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.

tagHelper
marker.cs
<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.

tagHelper
shape.cs
<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.

tagHelper
images.cs
<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.

tagHelper
custom.cs
<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. pointRender event allows you to change the shape, color and border for a point.

tagHelper
custom-point.cs
<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;
        }