Dynamic SfChart resize

[Juan Gallostra Acín]

I am trying to dinamically resize a chart following the sample code to set its dimensions shown here:

https://blazor.syncfusion.com/documentation/chart/chart-dimensions/

In order to do so, I have created a component with the following structure:

Where both FinalWidth and FinalHeight are parameters of the component.

The behavior I want to achieve is that whenever the values of FinalHeight or FinalWidth change the chart resizes accordingly.

However, the behavior I am seeing is that this approach is only working when the Height value changes. Changing the Width value does not result in a chart resize.

The following gif illustrates this behavior:

https://imgur.com/a/HkSAW9h

As a final note, using this same pattern with other types of charts, such as for example the SfHeatMap, is giving me no problems and working as expected.

I will keep trying to solve the issue, but any pointers or help will be greatly appreciated. Thanks in advance.

[Durga Gopalakrishnan]

Hi Juan,

We have analyzed your query with provided code snippet. We suggest you inherit the parent element height and width for chart to render based on its container. 

<style>

    .e-chart {

        width: inherit !important;

        height: inherit !important;

    }

</style>

Please revert us if you have any concerns.

Regards,

Durga G

[Gerd Fath]

I have the SfChart inside a Splitter, and it's not working:(
How can i update the chart width there?

<style>

    .e-chart {

        width: inherit !important;

        height: inherit !important;

    }

</style>

<SfSplitter Height="@((BrowserHeight).ToString()+"px")" Width="@(BrowserWidth.ToString()+"px")" Orientation="Syncfusion.Blazor.Layouts.Orientation.Vertical">

    <SplitterPanes>

        <SplitterPane>

            <ContentTemplate>

               <SfSplitter @ref="LegChartSplitter" Orientation="Syncfusion.Blazor.Layouts.Orientation.Horizontal">

                   <SplitterPanes>

                       <SplitterPane Size="25%">

                           <ContentTemplate>

                               @foreach (BpLineChartSeriesData series in SeriesCollection)

                               {

                                   <div class="row">

                                       <div @onclick="@(e => MenuSelected(series.SourceColumn))" class="col">@series.YName</div>

                                       <div class="col-2">@LegendValuesAtCrosshairPosition[SeriesCollection.IndexOf(series)]</div>

                                   </div>

                               }

                           </ContentTemplate>

                       </SplitterPane>

                       <SplitterPane>

                           <ContentTemplate>

                               <SplitterEvents Resizing="onChartSplitterResized"></SplitterEvents>

                               <SfChart @ref="batchProtocolChart">

                                   <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" EdgeLabelPlacement="EdgeLabelPlacement.Shift">

                                       <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>

                                       <ChartAxisCrosshairTooltip @ref="chs" Enable="true"></ChartAxisCrosshairTooltip>

                                   </ChartPrimaryXAxis>

                                   <ChartCrosshairSettings Enable="true" LineType="LineType.Vertical"></ChartCrosshairSettings>

                                   <ChartPrimaryYAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Double" LabelFormat="{value}" RangePadding="ChartRangePadding.None">

                                       <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>

                                       <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>

                                   </ChartPrimaryYAxis>

                                   <ChartSeriesCollection>

                                       @foreach (BpLineChartSeriesData series in SeriesCollection)

                                       {

                                           <ChartSeries DataSource="@series.Data" XName="dtValue" YName="dCalcValue" Type="ChartSeriesType.Line" Fill="@series.COLOR">

                                           </ChartSeries>

                                       }

                                   </ChartSeriesCollection>

                               </SfChart>

                           </ContentTemplate>

                       </SplitterPane>

                   </SplitterPanes>

               </SfSplitter>

            </ContentTemplate>

        </SplitterPane>

        <SplitterPane Size="25%">

            <ContentTemplate>

                <div>V2</div><div>V2</div><div>V2</div><div>V2</div><div>V2</div><div>V2</div><div>V2</div><div>V2</div><div>V2</div>

            </ContentTemplate>

        </SplitterPane>

    </SplitterPanes>

</SfSplitter>

[Durga Gopalakrishnan]

Hi Gerd,

We suggest you specify height and width as 100% for chart container inside content template. We have attached the modified sample for your reference. 

<style>

    .e-chart {

        width: inherit !important;

        height: inherit !important;

    }

</style>

<SplitterPane>                           
   <ContentTemplate>
     <div style="height:100%; width:100%">                                        <SfChart @ref="batchProtocolChart">
          </SfChart>

     </div>

   </ContentTemplate>

 </SplitterPane>

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartInSplitter-53732645.zip

If you are still facing the problem, please revert us with issue reproduced sample.

Regards,

Durga G

[Juan Gallostra Acín]

I tried the suggested approach but it didn't solve the issue. If I reload the page the chart renders with the correct size, but changing dinamically the width of the parent container and chart does not result in a chart resize. Note that this works ok when changing the height, as shown in the gif attached to my original post.

What I've done in the end is add a reference to the chart I want to update (@ref="Chart") and trigger a Chart.Refresh() whenever a new Width or Height is set. This solves the resize issue.

[Durga Gopalakrishnan]

Hi Juan, 

  

Thanks for an update. We are glad to know that your reported scenario has been resolved. Please get back to us if you need any further assistance on this. We are always happy in assisting you. 

  

Regards, 

Durga G