Area charts » Area with missing points

@Html.Highcharts4Net().AreaChart(settings =>
{
    settings.SetChart(s => s.SpacingBottom = 30);

    settings.SetTitle(s => s.Text = "Fruit consumption *");

    settings.SetSubtitle(s =>
    {
        s.Text = "* Jane's banana consumption is unknown";
        s.Floating = true;
        s.Align = HorizontalAligns.Right;
        s.VerticalAlign = VerticalAligns.Bottom;
        s.Y = 15;
    });

    settings.SetLegend(s =>
    {
        s.Layout = Layouts.Vertical;
        s.Align = HorizontalAligns.Left;
        s.VerticalAlign = VerticalAligns.Top;
        s.X = 150;
        s.Y = 100;
        s.Floating = true;
        s.BorderWidth = 1;
        s.BackgroundColor = new ColorOrGradient("(Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'", false); // false to avoid quotes in the javascript code.
    });

    settings.AddXAxis(s =>
    {
        s.Categories = new[]
        {
            "Apples", "Pears", "Oranges", "Bananas", "Grapes", "Plums", "Strawberries", "Raspberries"
        };
    });
    settings.AddYAxis(s =>
    {
        s.Title = new YAxisTitle
        {
            Text = "Y-Axis"
        };
        s.Labels = new YAxisLabels
        {
            Formatter = @"function () { return this.value; }"
        };
    });

    settings.SetTooltip(s => s.Formatter = @"function () { return '<b>' + this.series.name + '</b><br />' + this.x + ': ' + this.y; }");

    settings.SetPlotOptions(s =>
    {
        s.Area = new PlotOptionsArea
        {
            FillOpacity = 0.5
        };
    });

    settings.SetCredits(s => s.Enabled = false);

    settings.AddSeries(s =>
    {
        s.Name = "John";
        s.Data = new Data(new HighchartsDataPoint?[]
        {
            0, 1, 4, 4, 5, 2, 3, 7
        });
    });
    settings.AddSeries(s =>
    {
        s.Name = "Jane";
        s.Data = new Data(new HighchartsDataPoint?[]
        {
            1, 0, 3, null, 3, 1, 2, 1
        });
    });
}).Render()