Search code examples
plotlyblazor-server-sidesubplot

Does Plotly.Blazor support subplots, and if so is there any documentation

I am trying to develop a simple web dashboard in Blazor, and I have need to link axes together so that when one chart is zoomed, the corresponding Y axes on the other charts are similarly zoomed.

I know this is possible in plotly using subplots, however I cannot find any documentation on whether or not they have been ported to the Blazor iteration.

I appreciate any assistance.

Thanks,

Solution

  • For anyone else searching, I found the answer after a few days of digging (could not find decent documentation on Plotly.Blazor).

    What you're looking for is the Domain property of the Axis and the XAxis or YAxis property of the Scatter:

    xAxis1.Domain = new List<object> {0, 0.5};
xAxis2.Domain = new List<object> {0.5, 1};

scatter1.XAxis = "x1";
scatter2.XAxis = "x2";

    This will create two X axis side by side in the same chart, each spanning 50% of the total chart width. The Scatter data can then be assigned to the corresponding axis via their number (starting at 1).

    You can add a small visual buffer between axes to help differentiate the charts:

    xAxis1.Domain = new List<object> {0, 0.49}
xAxis2.Domain = new List<object> {0.51, 1}