Empty Points

Sep 03, 2021
7 minutes to read

This topic explains what Empty Points are, how the Chart Control processes empty points, and how to add such a point to a chart.

Run Demo: Empty Points

Empty points are points with undefined values. You can use empty points to insert gaps between series point values. The Chart displays empty points as breaks in continuous series (for example, Line or Area), and missing points or bars in discrete series (for example, Bars or Points). Empty points in the Pie, Donut, and Funnel series are skipped.

The following table contains data for the charts above:

Date	Politics	Entertainment	Travel
01-Jan-19	65	56	45
02-Jan-19	78	45	40
03-Jan-19	95	70	56
04-Jan-19	110	82	47
05-Jan-19	108	80	38
06-Jan-19	52	20	31
07-Jan-19	46	10	27
08-Jan-19	70		27
09-Jan-19	86		42
10-Jan-19	92	65
11-Jan-19	108	45	37
12-Jan-19	115	56	21
13-Jan-19	75	10	10
14-Jan-19	65	0	5

To create an empty point, execute one of the following actions:

Set a point’s value to NaN if you use the Chart Designer to add points to a series.

Leave a value undefined if you add points in markup.

XAML

<dxc:ChartControl>
    <dxc:XYDiagram2D>
        <dxc:PointSeries2D DisplayName="Travel">
            <!-- ... -->
            <dxc:SeriesPoint Argument="2016/11/9" Value="42"/>
            <dxc:SeriesPoint Argument="2016/11/10"/> <!-- This is an empty point. -->
            <dxc:SeriesPoint Argument="2016/11/11" Value="37"/>
            <!-- ... -->
        </dxc:PointSeries2D>
    </dxc:XYDiagram2D>
</dxc:ChartControl>

Use the SeriesPoint‘s class constructors that take only an argument as a parameter if you add points to a series in code.

C#
VB.NET

pointSeries.Points.Add(new SeriesPoint(new DateTime(2019, 01, 10)));

pointSeries.Points.Add(New SeriesPoint(New DateTime(2019, 01, 10)))

Or set a data point’s numeric value to Double.NaN(or Single.NaN) in a data source. If a series point has a date-time value, use the DateTime.MinValue value. Use TimeSpan.Zero for the time-span series point values.

Markup:

XAML

<dxc:ChartControl x:Name="chartControl" DataSource="{Binding Data}">
    <dxc:ChartControl.DataContext>
        <local:ChartViewModel/>
    </dxc:ChartControl.DataContext>
    <dxc:XYDiagram2D>
        <dxc:PointSeries2D ArgumentDataMember="Date" ValueDataMember="Politics"      DisplayName="Politics"/>
        <dxc:PointSeries2D ArgumentDataMember="Date" ValueDataMember="Entertainment" DisplayName="Entertainment"/>
        <dxc:PointSeries2D ArgumentDataMember="Date" ValueDataMember="Travel"        DisplayName="Travel"/>
    </dxc:XYDiagram2D>
</dxc:ChartControl>

Code-Behind:

C#
VB.NET

public class ChartViewModel {
    public List<DataPoint> Data { get { return GetPoints(); } }
    public static List<DataPoint> GetPoints() {
        return new List<DataPoint> {
                new DataPoint { Date = new DateTime(2019,1,1), Politics = 65,   Entertainment = 56, Travel = 45 },
                new DataPoint { Date = new DateTime(2019,1,2), Politics = 78,   Entertainment = 45, Travel = 40 },
                new DataPoint { Date = new DateTime(2019,1,3), Politics = 95,   Entertainment = 70, Travel = 56 },
                new DataPoint { Date = new DateTime(2019,1,4), Politics = 110,  Entertainment = 82, Travel = 47 },
                new DataPoint { Date = new DateTime(2019,1,5), Politics = 108,  Entertainment = 80, Travel = 38 },
                new DataPoint { Date = new DateTime(2019,1,6), Politics = 52,   Entertainment = 20, Travel = 31 },
                new DataPoint { Date = new DateTime(2019,1,7), Politics = 46,   Entertainment = 10, Travel = 27 },
                new DataPoint { Date = new DateTime(2019,1,8), Politics = 70,   Entertainment = double.NaN, Travel = 27 },
                new DataPoint { Date = new DateTime(2019,1,9), Politics = 86,   Entertainment = double.NaN, Travel = 42 },
                new DataPoint { Date = new DateTime(2019,1,10), Politics = 92,  Entertainment = 65, Travel = double.NaN},
                new DataPoint { Date = new DateTime(2019,1,11), Politics = 105, Entertainment = 45, Travel = 37 },
                new DataPoint { Date = new DateTime(2019,1,12), Politics = 115, Entertainment = 56, Travel = 21 },
                new DataPoint { Date = new DateTime(2019,1,13), Politics = 75,  Entertainment = 10, Travel = 10 },
                new DataPoint { Date = new DateTime(2019,1,14), Politics = 65,  Entertainment = 0 , Travel = 5  }
            };
    }
} 
public class DataPoint {
    public DateTime Date { get; set; }
    public double Politics { get; set; }
    public double Entertainment { get; set; }
    public double Travel { get; set; }
}

Public Class ChartViewModel
    Public ReadOnly Property Data As List(Of DataPoint)
        Get
            Return GetPoints
        End Get
    End Property

    Public Shared Function GetPoints() As List(Of DataPoint)
        Return New List(Of DataPoint) From {
            New DataPoint With { .Date = New DateTime(2019, 1, 1), .Politics = 65, .Entertainment = 56, .Travel = 45 },
            New DataPoint With { .Date = New DateTime(2019, 1, 2), .Politics = 78, .Entertainment = 45, .Travel = 40 },
            New DataPoint With { .Date = New DateTime(2019, 1, 3), .Politics = 95, .Entertainment = 70, .Travel = 56 },
            New DataPoint With { .Date = New DateTime(2019, 1, 4), .Politics = 110, .Entertainment = 82, .Travel = 47 },
            New DataPoint With { .Date = New DateTime(2019, 1, 5), .Politics = 108, .Entertainment = 80, .Travel = 38 },
            New DataPoint With { .Date = New DateTime(2019, 1, 6), .Politics = 52, .Entertainment = 20, .Travel = 31 },
            New DataPoint With { .Date = New DateTime(2019, 1, 7), .Politics = 46, .Entertainment = 10, .Travel = 27 },
            New DataPoint With { .Date = New DateTime(2019, 1, 8), .Politics = 70, .Entertainment = Double.NaN, .Travel = 27 },
            New DataPoint With { .Date = New DateTime(2019, 1, 9), .Politics = 86, .Entertainment = Double.NaN, .Travel = 42 },
            New DataPoint With { .Date = New DateTime(2019, 1, 10), .Politics = 92, .Entertainment = 65, .Travel = Double.NaN },
            New DataPoint With { .Date = New DateTime(2019, 1, 11), .Politics = 105, .Entertainment = 45, .Travel = 37 },
            New DataPoint With { .Date = New DateTime(2019, 1, 12), .Politics = 115, .Entertainment = 56, .Travel = 21 },
            New DataPoint With { .Date = New DateTime(2019, 1, 13), .Politics = 75, .Entertainment = 10, .Travel = 10 },
            New DataPoint With { .Date = New DateTime(2019, 1, 14), .Politics = 65, .Entertainment = 0, .Travel = 5 }
        }
    End Function
End Class

Public Class DataPoint
    Public Property Date As Date
    Public Property Politics As Double
    Public Property Entertainment As Double
    Public Property Travel As Double
End Class

The Chart Control does not display series labels, tooltips, and the crosshair cursor label for empty points.

Missing points (points that do not exist for particular axis arguments) are represented as empty points if the ProcessMissingPoints (NumericAggregationScaleOptionsBase.ProcessMissingPoints, DateTimeAggregationScaleOptionsBase.ProcessMissingPoints or TimeSpanAggregationScaleOptionsBase.ProcessMissingPoints) property is set to InsertEmptyPoints.

Tip

You can use scale breaks to hide specific data ranges from an axis.
To limit data displayed in a chart, configure visual and whole axis ranges.
If you use an argument axis with a date-time scale, you can exclude holidays, weekends or particular hours from a scale. Refer to Work Time and Workday Configuration for more information.

Define How to Handle Empty Points

Use a series’s EmptyPointOptions property to access empty point settings. Specify the EmptyPointOptions.ProcessPoints property to select the manner in which the chart control should handle empty points.

For example, use the following code to display points with predicted values instead of empty points.

ProcessEmptyPointsMode.Interpolate is enabled

XAML

<dxc:BarSideBySideSeries2D ...>
    <dxc:BarSideBySideSeries2D.EmptyPointOptions>
        <dxc:EmptyPointOptions ProcessPoints="Interpolate" Brush="#80808080"/>
    </dxc:BarSideBySideSeries2D.EmptyPointOptions>
</dxc:BarSideBySideSeries2D>

Customize Appearance of Empty Points

Appearance settings of empty points depends on the series type. Depending on the series, set the EmptyPointOptions property value to one of the following types and configure empty point appearance settings:

EmptyPointOptions – Contains common empty point settings and can be used for all series.
LineEmptyPointOptions – Contains settings specific to line series.
AreaEmptyPointOptions – Contains settings specific to area series.

The example below configures empty point appearance for line, area, and bar series. Empty points are painted gray:

Customized empty points

XAML

<dxc:LineSeries2D DisplayName="Day Temperature" ...>
    <dxc:LineSeries2D.EmptyPointOptions>
        <dxc:LineEmptyPointOptions ProcessPoints="Interpolate" 
                                   Brush="#808080">
            <dxc:LineEmptyPointOptions.LineStyle>
                <dxc:LineStyle Thickness="1" >
                    <dxc:LineStyle.DashStyle>
                        <DashStyle Dashes="2 2"/>
                    </dxc:LineStyle.DashStyle>
                </dxc:LineStyle>
            </dxc:LineEmptyPointOptions.LineStyle>
        </dxc:LineEmptyPointOptions>
    </dxc:LineSeries2D.EmptyPointOptions>
</dxc:LineSeries2D>
<dxc:AreaSeries2D DisplayName="Wind" ...>
    <dxc:AreaSeries2D.EmptyPointOptions>
        <dxc:AreaEmptyPointOptions ProcessPoints="Interpolate" 
                                   Brush="#80808080">
            <dxc:AreaEmptyPointOptions.Border>
                <dxc:SeriesBorder Brush="DarkGray"/>
            </dxc:AreaEmptyPointOptions.Border>
        </dxc:AreaEmptyPointOptions>
    </dxc:AreaSeries2D.EmptyPointOptions>
</dxc:AreaSeries2D>
<dxc:BarSideBySideSeries2D DisplayName="Pressure" ...>
    <dxc:BarSideBySideSeries2D.EmptyPointOptions>
        <dxc:EmptyPointOptions ProcessPoints="Interpolate" 
                               Brush="#80808080"/>
    </dxc:BarSideBySideSeries2D.EmptyPointOptions>
</dxc:BarSideBySideSeries2D>

Show Isolated Points

The Chart does not draw a point between two empty points. To display a point in this case, enable the ShowIsolatedPoints (LineSeries2D.ShowIsolatedPoints or CircularLineSeries2D.ShowIsolatedPoints) property.

ShowIsolatedPoints = true	ShowIsolatedPoints = false

XAML

<dxc:ChartControl>
    <dxc:XYDiagram2D>
        <dxc:LineSeries2D ShowIsolatedPoints="True">
            <dxc:SeriesPoint Argument="A" Value="5"/>
            <dxc:SeriesPoint Argument="B" Value="6"/>
            <dxc:SeriesPoint Argument="C" />
            <dxc:SeriesPoint Argument="D" Value="4"/> <!-- This point is isolated. -->
            <dxc:SeriesPoint Argument="E" />
            <dxc:SeriesPoint Argument="F" Value="6"/>
            <dxc:SeriesPoint Argument="G" Value="8"/>
            <dxc:SeriesPoint Argument="H" Value="7"/>
        </dxc:LineSeries2D>
    </dxc:XYDiagram2D>
</dxc:ChartControl>

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Define How to Handle Empty Points

Customize Appearance of Empty Points

Show Isolated Points