Search results

Empty Points

The data points those uses the null or undefined as value are considered as empty points. The empty data points are ignored and not plotted in the chart. You can customize those points, using the emptyPointSettings property in series. The default mode of the empty point is Gap. Other supported modes are Average and Zero.

tagHelper
empty.cs
@section ControlsSection{
 <ejs-accumulationchart id="container" title="Annual Product wise Profit Analysis" >
                    <e-accumulationchart-tooltipsettings enable="true"></e-accumulationchart-tooltipsettings>
                    <e-accumulationchart-legendsettings visible="false">
                    </e-accumulationchart-legendsettings>
                    <e-accumulation-series-collection>
                        <e-accumulation-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="Profit" >
                            <e-accumulationseries-datalabel name="text" visible="true" position="Outside">
                             </e-accumulationseries-datalabel>
                            <e-accumulationseries-emptypointsettings mode="Zero" fill="red"></e-accumulationseries-emptypointsettings>
                        </e-accumulation-series>
                    </e-accumulation-series-collection>
                </ejs-accumulationchart>
 }
public ActionResult Index()
        {
            List<EmptyPointsChartData> chartData = new List<EmptyPointsChartData>
            {

                new EmptyPointsChartData { xValue = "Rice",  yValue = 80   },
                new EmptyPointsChartData { xValue = "Wheat", yValue = null },
                new EmptyPointsChartData { xValue = "Oil",   yValue = 70   },
                new EmptyPointsChartData { xValue = "Corn",  yValue = 60   },
                new EmptyPointsChartData { xValue = "Gram",  yValue = null },
                new EmptyPointsChartData { xValue = "Milk",  yValue = 70   },
                new EmptyPointsChartData { xValue = "Peas",  yValue = 80   },
                new EmptyPointsChartData { xValue = "Fruit", yValue = 60   },
                new EmptyPointsChartData { xValue = "Butter",yValue = null },            

            };
            ViewBag.dataSource = chartData;      
            return View();
        }
        public class EmptyPointsChartData
        {
            public string xValue;
            public Nullable<double> yValue;
        }

Customization

Specific color for an empty point can be set by using the fill property in emptyPointSettings and the border for an empty point can be set by using the border property.

tagHelper
custom.cs
@section ControlsSection{
   <ejs-accumulationchart id="container" title="Annual Product wise Profit Analysis" >
                    <e-accumulationchart-tooltipsettings enable="true"></e-accumulationchart-tooltipsettings>
                    <e-accumulationchart-legendsettings visible="false">
                    </e-accumulationchart-legendsettings>
                    <e-accumulation-series-collection>
                        <e-accumulation-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="Profit" >
                            <e-accumulationseries-datalabel name="text" visible="true" position="Outside">
                             </e-accumulationseries-datalabel>
                            <e-accumulationseries-emptypointsettings mode="Average" fill="red"></e-accumulationseries-emptypointsettings>
                        </e-accumulation-series>
                    </e-accumulation-series-collection>
                </ejs-accumulationchart>
 }
public ActionResult Index()
        {
            List<EmptyPointsChartData> chartData = new List<EmptyPointsChartData>
            {

                new EmptyPointsChartData { xValue = "Rice",  yValue = 80   },
                new EmptyPointsChartData { xValue = "Wheat", yValue = null },
                new EmptyPointsChartData { xValue = "Oil",   yValue = 70   },
                new EmptyPointsChartData { xValue = "Corn",  yValue = 60   },
                new EmptyPointsChartData { xValue = "Gram",  yValue = null },
                new EmptyPointsChartData { xValue = "Milk",  yValue = 70   },
                new EmptyPointsChartData { xValue = "Peas",  yValue = 80   },
                new EmptyPointsChartData { xValue = "Fruit", yValue = 60   },
                new EmptyPointsChartData { xValue = "Butter",yValue = null },            

            };
            ViewBag.dataSource = chartData;       
            return View();
        }
        public class EmptyPointsChartData
        {
            public string xValue;
            public Nullable<double> yValue;
        }