On initially rendering the chart everything is laid out perfectly works as expected. Upon leaving the page with the PlotlyChart and reentering, the Plotly component gets broken down and spread across the page. I'm not able to find a difference in the HTML but there are differences in the Computed values.
Below is the Code:
@rendermode InteractiveServer
@page "/scatter-plot-server"
@using Plotly.Blazor.Traces.ScatterGlLib
@using Plotly.Blazor.LayoutLib
@using Plotly.Blazor.LayoutLib.YAxisLib
@using System.Diagnostics
@using Title = Plotly.Blazor.LayoutLib.Title
<h3>Scatter Plot Server</h3>
<MudContainer>
<PlotlyChart @rendermode="InteractiveServer" style="width: 70vw" @bind-Config="_config" @bind-Layout="_layout" @bind-Data="_data" @ref="_chart" AfterRender="AddData" />
</MudContainer>
<MudContainer>
<MudButton @onclick="()=>AddData(100000)" Variant="Variant.Filled" Color="Color.Primary">Add Data</MudButton>
<MudButton @onclick="()=>AddData(100000)" Variant="Variant.Filled" Color="Color.Primary">Live Data</MudButton>
</MudContainer>
@code {
[CascadingParameter] private MudTheme Theme { get; set; } = new MudTheme();
PlotlyChart _chart = new PlotlyChart();
Config _config = new Config();
Layout _layout = new Layout();
IList<ITrace> _data = new List<ITrace>
{
new Plotly.Blazor.Traces.ScatterGl()
{
Name = "ScatterTrace",
Mode = ModeFlag.Lines | ModeFlag.Markers,
X = new List<object>{1,2,3},
Y = new List<object>{1,2,3}
},
new Plotly.Blazor.Traces.ScatterGl()
{
Name = "ScatterTrace2",
Mode = ModeFlag.Lines | ModeFlag.Markers,
X = new List<object>{5,6,7},
Y = new List<object>{5,6,7}
}
};
protected override void OnInitialized()
{
_config = new Config
{
Responsive = true
};
_layout = new Layout
{
Title = new Title
{
Text = GetType().Name
},
PaperBgColor = Theme.PaletteDark.Surface.ToString(),
PlotBgColor = Theme.PaletteDark.Surface.ToString(),
Font = new Font
{
Color = Theme.PaletteDark.TextPrimary.ToString()
},
YAxis = new List<YAxis>
{
new()
{
Title = new Plotly.Blazor.LayoutLib.YAxisLib.Title
{
Text = "ScatterTrace"
}
},
new()
{
Title = new Plotly.Blazor.LayoutLib.YAxisLib.Title
{
Text = "ScatterTrace2"
},
}
}
};
_data = new List<ITrace>
{
new ScatterGl()
{
Name = "ScatterTrace",
Mode = ModeFlag.Lines | ModeFlag.Markers,
X = new List<object> { 1, 2, 3 },
Y = new List<object> { 1, 2, 3 }
},
new ScatterGl()
{
Name = "ScatterTrace2",
Mode = ModeFlag.Lines | ModeFlag.Markers,
X = new List<object> { 5, 6, 7 },
Y = new List<object> { 5, 6, 7 }
}
};
base.OnInitialized();
}
private async void AddData()
{
await AddData(1000);
}
private async Task AddData(int count = 100)
{
if (_chart.Data.FirstOrDefault() is Plotly.Blazor.Traces.ScatterGl scatter)
{
var (x, y) = Helper.GenerateData(scatter.X.Count + 1, scatter.X.Count + 1 + count);
await _chart.ExtendTrace(x, y, _data.IndexOf(scatter));
}
if (_chart.Data.Skip(1).FirstOrDefault() is Plotly.Blazor.Traces.ScatterGl scatter2)
{
var (x, y) = Helper.GenerateData(scatter2.X.Count + 1, scatter2.X.Count + 1 + count);
await _chart.ExtendTrace(x, y, _data.IndexOf(scatter2));
}
}
On initially rendering the chart everything is laid out perfectly works as expected. Upon leaving the page with the PlotlyChart and reentering, the Plotly component gets broken down and spread across the page. I'm not able to find a difference in the HTML but there are differences in the Computed values.
Below is the Code: