Razor page jumps to top on Chart mouseover

30 views Asked by At

I have a Blazor Web app that displays weather data using Syncfusion Blazor Charts. This is how I reference it in my index.razor.

<div class="linechart">
    <h3>Mean Temperatures and Precipitation for @DateTime.Now.ToString("MMMM")</h3>
    <WeatherChart Temperatures="@Temperatures" Width="@Width" />
</div>

Everytime I hover over the chart the page "jumps" back to the top. That does not happen when hovering over the <h3> or indeed any other section of my page. So the culprit must be the behaviour of the chart itself.

Here is the code for the chart just for the sake of completeness but there is nothing in here that would explain what's going on:

<SfChart Width="@Width" >
<ChartPrimaryXAxis Title="Day" ValueType="Syncfusion.Blazor.Charts.ValueType.Category" LabelIntersectAction="LabelIntersectAction.Hide">
    <ChartAxisMajorGridLines Width="0" Color="blue" />
</ChartPrimaryXAxis>
<ChartPrimaryYAxis Title="Temperatures"></ChartPrimaryYAxis>
<ChartAxes>
    <ChartAxis Name="YAxis" OpposedPosition="true" Title="Precipitation in mm"/>
</ChartAxes>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Temperatures" XName="X" High="High" Low="Low" Type="ChartSeriesType.RangeArea" Width="2" Fill="red" Opacity="0.1">
            <ChartMarker Visible="true" Height="5" Width="5" Shape="ChartShape.Circle" IsFilled="true" />
        </ChartSeries>
        <ChartSeries DataSource="@Temperatures" XName="X" YName="Precipitation" Type="ChartSeriesType.Column" YAxisName="YAxis" Fill="#FEC007" ColumnWidth="1.5">
        </ChartSeries>        
    </ChartSeriesCollection>

    <ChartLegendSettings Visible="true" Position="LegendPosition.Top" />
</SfChart>

I do have a JavaScript browser resize event but that has nothing to with it either I don't think as the bug occurs regardless of screen size.

0

There are 0 answers