Search results

Empty Points

Data points that contains NaN value are considered as empty points. The empty data points can be ignored or 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.

empty.razor
<EjsAccumulationChart Title="Annual Product wise Profit Analysis">
    <AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>
  
    <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
  
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@DataSource" XName="XValue" YName="YValue">
            <AccumulationChartEmptyPointSettings Mode="AccEmptyPointMode.Zero"></AccumulationChartEmptyPointSettings>
            <AccumulationDataLabelSettings Name="Text" Visible="true" Position="AccumulationLabelPosition.Outside"></AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</EjsAccumulationChart>

@code{
    public class ChartData
    {
        public string XValue;
        public double YValue;
        public string Text;
    }
    
    public List<ChartData> DataSource = new List<ChartData>
    {
        new ChartData { XValue = "Jan", YValue = 3, Text= "Jan: 3" },
        new ChartData { XValue = "Feb", YValue = 3.5, Text= "Feb: 3.5" },
        new ChartData { XValue = "Mar", YValue = 7, Text= "'Mar: 7" },
        new ChartData { XValue = "Apr", YValue = 13.5, Text= "Apr: 13.5" },
        new ChartData { XValue = "May", YValue = 19, Text= "May: 19" },
        new ChartData { XValue = "Jun", YValue = 23.5, Text= "Jun: 23.5" },
        new ChartData { XValue = "Jul", YValue = Double.NaN, Text= "" },
        new ChartData { XValue = "Aug", YValue = 25, Text= "Aug: 25" },
        new ChartData { XValue = "Sep", YValue = 21, Text= "Sep: 21" },
        new ChartData { XValue = "Oct", YValue = 15, Text= "Oct: 15" },
        new ChartData { XValue = "Nov", YValue = 9, Text= "Nov: 9" },
        new ChartData { XValue = "Dec", YValue = 3.5, Text= "Dec: 3.5" }
    };
}

Empty Points

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.

custom.razor
<EjsAccumulationChart Title="Annual Product wise Profit Analysis">
        <AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>
  
        <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
  
        <AccumulationChartSeriesCollection>
            <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"
                                     Name="Profit">
                <AccumulationChartEmptyPointSettings Mode="@Mode" Fill="red"></AccumulationChartEmptyPointSettings>
                <AccumulationDataLabelSettings Visible="true" Name="Text" Position="AccumulationLabelPosition.Outside"></AccumulationDataLabelSettings>
            </AccumulationChartSeries>
        </AccumulationChartSeriesCollection>
</EjsAccumulationChart>

@code{
    public string Mode = "Average";
    
    public class Statistics
    {
        public string Browser;
        public double Users;
        public string Text;
        public string Fill;
    }
    public List<Statistics> StatisticsDetails = new List<Statistics>
    {
       new Statistics { Browser = "Chrome", Users = 37, Text= "37%", Fill="#498fff"},
       new Statistics { Browser = "UC Browser", Users = 17, Text= "17%", Fill="#ffa060"},
       new Statistics { Browser = "iPhone", Users = 19, Text= "19%", Fill="#ff68b6"},
       new Statistics { Browser = "Others", Users = 4 , Text= "4%", Fill="#81e2a1"},
    };
}