Adding a vertical line removed all scatter plot points

Question

Using ASP.NET MVC Kendo framework, without the line

series.Line(lineData).Name("Vertical Line");

the chart displays the scatter plot as expected.

I wanted to add a vertical line at halfway point. However in doing so, it caused the whole chart to have all its scatter plot points removed.

Code as below:

@{
    Random rand = new Random();
    List<object> scatterData = new List<object>();

    for (int i = 0; i < 100; i++)
    {
        scatterData.Add(new { 
            x = rand.NextDouble() * 5, 
            y = rand.NextDouble() * 5 
        });
    }

    // Vertical line data
    List<object> lineData = new List<object> { new { x = 2.5, y = 0 }, new { x = 2.5, y = 5 } };
}

@(Html.Kendo().Chart()
    .Name("chart")
    .Title("Scatter Plot with PF Curve")
    .Legend(legend => legend
        .Position(ChartLegendPosition.Bottom)
    )
    .Series(series =>
    {
        series.Scatter(scatterData).Name("Scatter Data");
        series.Line(lineData).Name("Vertical Line"); // Add this line
    })
    .XAxis(x => x
        .Numeric()
        .Min(0)
        .Max(5)
        .Title(title => title.Text("Consequences"))
    )
    .YAxis(y => y
        .Numeric()
        .Min(0)
        .Max(5)
        .Title(title => title.Text("Likelihood"))
    )
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Format("{0:N2}")
        .Template("#= series.name #: x: #= value.x #, y: #= value.y #")
    )
)

Answer 1

I don't think that Kendo allows the mixing of Scatter and Line charts due to their inherent design differences, I think you'll need to find an alternative approach.