Combined charts order does not appear to impact render order.

[TroelsL]

Description

The order in which charts are entered in ChartExtensions.Combine does not determine how they are rendered.

Repro steps

Please provide the steps required to reproduce the problem

1. Run the following code:

var x = Enumerable.Range(0,10);
var y = x.Select(x => x * 1.1d);
var y2 = y.Select(x => x * 0.9d);
var chart = ChartExtensions.Combine(new [] { 
    Chart.Area<int,double, string>(x: x, y: y2, Name: "Two", Color: "#dd0000"),
    Chart.Column<int,double, string>(keys: x, values: y, Name: "One", Color: "#00dd00"),
});
            
display(chart);

2. Observe the resulting visual.
3. Move the Column chart above (before) the Area chart in the array:

var x = Enumerable.Range(0,10);
var y = x.Select(x => x * 1.1d);
var y2 = y.Select(x => x * 0.9d);
var chart = ChartExtensions.Combine(new [] { 
    Chart.Column<int,double, string>(keys: x, values: y, Name: "One", Color: "#00dd00"),
    Chart.Area<int,double, string>(x: x, y: y2, Name: "Two", Color: "#dd0000"),
});
            
display(chart);

4. Observe the resulting visual.

Ob

Expected behavior

I would expect the bars to block view of the area chart in the first example.

Actual behavior

The two renders are identical except for the legend.

Known workarounds

None that I know of.

Related information

• Executed in Jupyter on Alpine Linux
• Branch: 2.0.0-preview.6
• .NET 5.0

[kMutagene]

To mirror the stuff i already wrote in duiscord for future reference here:

plotly seems to behave differently when rendering traces of different types (bar vs scatter(thats what area crerates) in this case). You can work around this using multiple axes
so the bar chart gets an y aqxis with id 2 and therefore will be rendered above the area trace
due to #134 and #133 this is quite cumbersome in C# though, so i can show you a non-type-safe workaround until we fixed those

static void Main(string[] args)
{
    var x = Enumerable.Range(0, 10);
    var y = x.Select(x => x * 1.1d);
    var y2 = y.Select(x => x * 0.9d);

    var yAxis1 = new Axis.LinearAxis();
    yAxis1.SetValue("title", "y1");

    var yAxis2 = new Axis.LinearAxis();
    yAxis2.SetValue("title", "y2");
    yAxis2.SetValue("side", "right");
    yAxis2.SetValue("overlaying", "y1"); // this is necessary because the background of the y2 plane would overlay above the area trace otherwise.

    var chart = ChartExtensions.Combine(new[] {
        Chart.Area<int,double, string>(x: x, y: y2, Name: "Two", Color: "#dd0000")
            .WithAxisAnchor(Y:1), // assign this trace to yAxis with id 1
        Chart.Column<int,double, string>(keys: x, values: y, Name: "One", Color: "#00dd00")
            .WithAxisAnchor(Y:2), // assign this trace to yAxis with id 2
    })
            .WithY_Axis(yAxis1, 1)  // add both y axes to the combined chart
            .WithY_Axis(yAxis2, 2); // add both y axes to the combined chart
    chart.Show();
}

[kMutagene]

[kMutagene]

Closing this, as the underlying issue is by design, there is a workaround, and it now should work in C# as well without much hassle.