Chart loses HtmlAttribute when datasource changes

[Randy Wessels]

I am using several different charts inside of the Dashboard Layout control.  It seems that in order for the chart to automatically resize when the browser is resized, I need to set three things:

#1 - There should be a div in the ContentTemplate of the DashboardLayoutPanel with a height and width of 100%.

#2 - The chart control itself needs to have a height and width of 100%.

#3 - An HtmlAttributes needs to be defined that points to a dictionary that points to a style with height and width of 100% like this:

 Dictionary<string, object> ChartAttribute = new Dictionary<string, object>()

    {

        { "class", "custom-chart" }

    };

    .custom-chart {

        width: 100%;

        height: 100%;

    }

I can inspect the HTML/CSS in the browser and see this class applied. The chart will resize automatically as you resize the browser.  

But if you want to change the data that is displayed in the chart by nulling out the datasource and recreating it, when the chart is rendered again it loses this class definition and the height changes to 450 pixels.  If I manually add the class back by inspecting the HTML/CSS elements and adding back custom-chart, once I resize the browser, the chart automatically resizes to the correct container size.

This seems to happen on at least line and area charts.  Here is one of my examples:

                                                <SfChart Title="Disposition Count by Call Date"

                                                         HtmlAttributes="ChartAttribute"

                                                         @ref="DispositionByDateChart"

                                                         UseGroupingSeparator="true"

                                                         EnableAnimation="true"

                                                         Height="100%"

                                                         Width="100%">

                                                    <ChartEvents Loaded="ChartLoad" Resized="ChartResized" />

                                                    <ChartArea>

                                                        <ChartAreaBorder Width="0" />

                                                    </ChartArea>

                                                    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime"

                                                                       Skeleton="Ed">

                                                        <ChartAxisMajorGridLines Width="0" />

                                                    </ChartPrimaryXAxis>

                                                    <ChartPrimaryYAxis LabelFormat="{value} Calls">

                                                        <ChartAxisLineStyle Width="0" />

                                                        <ChartAxisMajorTickLines Width="0" />

                                                    </ChartPrimaryYAxis>

                                                    <ChartTooltipSettings Enable="true"

                                                                          Format="${point.x} : ${point.y}" />

                                                    <ChartSeriesCollection>

                                                        <ChartSeries DataSource="@VM.DispositionByDaysChartDataSource"

                                                                     Name="Calls"

                                                                     XName="x"

                                                                     Width="2"

                                                                     Opacity="1"

                                                                     YName="y"

                                                                     Type="ChartSeriesType.MultiColoredLine">

                                                            <ChartMarker Visible="true"

                                                                         Width="10"

                                                                         Height="10">

                                                            </ChartMarker>

                                                        </ChartSeries>

                                                    </ChartSeriesCollection>

                                                    <ChartLegendSettings Visible="false" />

                                                </SfChart>

[Durga Gopalakrishnan]

Hi Randy, 

 

We have prepared sample with provided code snippet and we have assigned empty list for chart data, but the html attribute class doesn’t change and it remains same. Could you please specify in which scenario you are facing reported scenario or try to reproduce an issue in below sample if possible. We have attached sample for your reference and screenshot. 

 

 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/HtmlAttribute1614139179.zip 

 

Please revert us, if you have any concerns. 

 

Regards, 

Durga G 

[Randy Wessels]

Thank you for the reply and sample.  My example is a dashboard layout control with 4 different charts each in a panel.  I have if statements around each chart to check if the datasource is null and if so display a SFProgress Bar to show it is loading.  On the left is a SFSidebar control with filters on it.  As the user changes a filter, the datasources in each of the charts are nulled out and a call to the database is made to repopulate those datasources.  It is when the datasource is changed from null back to some data is when the htmlattrbitues are lost.

I made a few changes to your sample application: Adding an SFLayout and an if statement around the chart checking null a null datasource, actually nulling out the datasource and then creating a new button to populate it again.  No luck - it works fine in the sample.

I have styles for both the sidebar as well as the layout control.  Perhaps there are some problems with that css that is affecting things.  Maybe it will also explain why SplineArea looks the same at Area in my application, but works fine in the demo.  I will keep looking.

[Randy Wessels]

Actually I was able to recreate the issue with the sample project. Attached is the Index.razor file that I used. 

To recreate just launch the app, close the license warning to see the buttons.  Click the EmptyData button and then the LoadData button.  The HtmlAttributes property is lost and then the chart reverts to 450px vertically.

Attachment: Index_c4670658.zip

[Srihari Muthukaruppan]

Hi Randy, 

 

We have analyzed your query. From that, As stated earlier the chart is responsive with respect to the width and height of its parent element, if its zero, then it will render with its default size(600 * 450). we suggest you to use the below workaround solution to achieve your requirement. In that we have modified the style of chart using class name to achieve your requirement. Based on your requirement we have also prepared a sample for reference. Please find below code snippet and sample.  

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DashboardLayout18.3.351693849450.zip 

 

Code Snippet: 

   .e-chart { 

        width: inherit !important; 

        height: inherit !important; 

    } 

 

Screenshot: 

 

 

Let us know if you have any concerns. 

 

Regards, 

Srihari M 

[Randy Wessels]

That works.  Thank you.

[Srihari Muthukaruppan]

Hi Randy, 

 

Most welcome. Kindly get in touch with us, if you would require further assistance. We are always happy in assisting you.    

    

Thanks,    

Srihari