Chart with range selector and trendlines/indicators

Hi!

I'm trying to create a chart with a range selector and optional trendlines and indicators. If an indicator is added to the chart after updating the range, the displayed interval of the chart is incorrect. The indicator's range is not updated to match the new (smaller) interval of the chart data.

Sample code:

<SfChart [email protected] [email protected] Height="350" CustomClass=@Visibility>

     ...

    <ChartSeriesCollection>

         <ChartSeries DataSource=@RangedData XName="Date" Open="Open" Close="Close" High="High" Low="Low" YName="Close" Type=@Series>

          <ChartTrendlines>

                  <ChartTrendline [email protected] Width="3" Fill="#C64A75" />

          </ChartTrendlines>

          </ChartSeries>

    </ChartSeriesCollection>

          @if (Indicator.HasValue)

              {

               <ChartIndicators>

                   <ChartIndicator [email protected] Field="FinancialDataFields.Close" XName="Date" Fill="blue" />

                 </ChartIndicators>

                }

</SfChart>

<SfRangeNavigator Value=@Range ValueChanged=@RangeChanged ValueType="Syncfusion.Blazor.Charts.RangeValueType.DateTime" [email protected] Height="100" [email protected] Interval="1" LabelFormat="MMMM">

       <RangeNavigatorEvents Loaded=@OnRangeLoaded></RangeNavigatorEvents>

       <RangeNavigatorSeriesCollection>

             <RangeNavigatorSeries DataSource=@Data [email protected] [email protected] Width="2" XName="Date" YName="Close" />

        </RangeNavigatorSeriesCollection>

</SfRangeNavigator>


    private void RangeChanged(object args)

    {

        Range = (DateTime[])args;

        RangedData = Data.Where(d => d.Date >= Range[0] && d.Date <= Range[1]);

        this.StateHasChanged();

    }


Thanks for the help.


1 Reply

DG Durga Gopalakrishnan Syncfusion Team February 23, 2022 03:19 PM UTC

Hi Kristof, 

As per provided snippet, you are changing the chart series datasource while changing the range navigator using RangeChanged event. When new data is assigned for chart series, then series and indicator will be rendered based on assigned datasource. Please ensure whether you have specified any range for axis in your application.  

Regards, 
Durga G 


Loader.
Up arrow icon