Empty or Null Values in Chart

[Danial]

Hi, is there anyway to not show empty or null values? For example, I have data for Jan to April but there are no data from May to Dec but I still want to show the X Axis to still display up till December. How do I achieve this? Thanks!

@using Syncfusion.Blazor.Charts

<SfChart Width="60%" Height="100%" Title="Chart zzztitle">

    <ChartPrimaryXAxis Title="Month" Maximum="11" Minimum="0" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>

    <ChartPrimaryYAxis Title="Temperature"></ChartPrimaryYAxis>

    <ChartTooltipSettings Enable="true"></ChartTooltipSettings>

    <ChartLegendSettings Visible="true"></ChartLegendSettings>

    <ChartSeriesCollection>

        <ChartSeries Name="Weather" DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Spline">

            <ChartMarker>

                <ChartDataLabel Visible="true"></ChartDataLabel>

            </ChartMarker>

        </ChartSeries>

    </ChartSeriesCollection>

</SfChart>

@code{

    public class Data

    {

        public string X;

        public double Y;

    }

    public List<Data> WeatherReports = new List<Data>

{

        new Data{ X= "Jan", Y= -3 },

        new Data{ X= "Feb", Y= 3.5 },

        new Data{ X= "Mar", Y= 7 },

        new Data{ X= "Apr", Y= 16.5 },

        new Data{ X = "May"},

        new Data{ X = "Jun"},

        new Data{ X = "July"},

        new Data{ X = "Aug"},

        new Data{ X = "Sep"},

        new Data{ X = "Oct"},

        new Data{ X = "Nov"},

        new Data{ X = "Dec"}

    };

[Travis]

Set the empty point mode to "gap"

see demo here:

https://blazor.syncfusion.com/demos/chart/empty-point?theme=bootstrap4

 <ChartSeriesCollection>

        <ChartSeries Name="Weather" DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Spline">

            <ChartMarker>

                <ChartDataLabel Visible="true"></ChartDataLabel>

            </ChartMarker>
           <ChartEmptyPointSettings Fill="#e6e6e6" Mode="Gap"></ChartEmptyPointSettings>

        </ChartSeries>

-Travis

[Danial]

Thank you so much Travus. It works!

[Srihari Muthukaruppan]

Hi Danial, 

 

We have analysed your query. As suggested earlier we can achieve your requirement by using the ChartEmptyPointSettings Mode. There are four different possibilities to display the null values such as Gap, Zero, Drop and Average. We have also provided the working in our demo sample. Please find the sample below. 

 

Demo link: https://blazor.syncfusion.com/demos/chart/empty-point?theme=bootstrap4 

 

Let us know if you have any concerns. 

 

Regards, 

Srihari