We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Override default SVG size in chart

Thread ID:

Created:

Updated:

Platform:

Replies:

150017 Dec 18,2019 05:08 AM UTC Dec 20,2019 04:05 AM UTC Blazor 1
loading
Tags: Charts
Feifan
Asked On December 18, 2019 05:08 AM UTC

Hi team,

the default size of chart svg is 600*450, I'm trying to reset it by setting its parent container style:{ display:block} as mentioned in this post https://www.syncfusion.com/forums/142081/disable-default-width-and-size-of-svg-container

However, this approach might work at first, but it doesn't work for a chart inside tabitem. Also, if you went to some other sibling pages and went back, the svg size will be set to default value again.

Is there anyway to reset svg size to its parent size?

Thanks for your help.

Srihari Muthukaruppan [Syncfusion]
Replied On December 20, 2019 04:05 AM UTC

Hi Feifan, 

We have analyzed your query. From that, we would like to let you know that 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 which we have provided the required height for parent div and the style of chart and accumulation chart has been set to inherit to achieve your requirement.  Please find below sample, code snippet and screenshot.  

 
Code Snippet: 
<style> 
    .e-content.e-lib.e-touch { 
        height: inherit; 
    } 
    .e-accumulationchart { 
        height: inherit; 
    } 
    .e-chart { 
        height: inherit; 
    } 
    .e-item.e-active { 
        height: inherit; 
    } 
</style> 
<div class="e-tab-section"> 
    <div class="col-lg-8 Content-wrapper control-section"> 
        <EjsTab Height="250px" OverflowMode="@Mode" HeaderPlacement="@Header"> 
            <TabItems> 
                <TabItem> 
                    <ChildContent> 
                        <TabHeader Text="VLT"></TabHeader> 
                    </ChildContent> 
                    <ContentTemplate> 
                        <div style="height: 100%; width: 100%;"> 
                            <EjsChart Width="100%" Height="100%"> 
                                <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis> 
                                <ChartSeriesCollection> 
                                    <ChartSeries DataSource="@DataSource" Name="Sales Ready Articles" XName="KW" YName="SalesReady" Type="ChartSeriesType.StackingColumn"> 
                                    </ChartSeries> 
                                    <ChartSeries DataSource="@DataSource" Name="Not Sales Ready Articles" XName="KW" YName="NotSalesReady" Type="ChartSeriesType.StackingColumn"> 
                                    </ChartSeries> 
                                </ChartSeriesCollection> 
                            </EjsChart> 
                        </div> 
                    </ContentTemplate> 
                </TabItem> 
                <TabItem> 
                    <ChildContent> 
                        <TabHeader Text="TC"></TabHeader> 
                    </ChildContent> 
                    <ContentTemplate> 
                        <div style="height: 100%; width: 100%;"> 
                            <EjsAccumulationChart Width="100%" Height="100%" @ref="@accumulationChart" LegendSettings="(new AccumulationChartLegendSettings() { Position = LegendPosition.Bottom})"> 
                                <AccumulationChartSeriesCollection> 
                                    <AccumulationChartSeries DataSource="@tecDocPieData" XName="Label" YName="Percentage"></AccumulationChartSeries> 
                                </AccumulationChartSeriesCollection> 
                            </EjsAccumulationChart> 
                        </div> 
                    </ContentTemplate> 
                </TabItem> 
                <TabItem> 
                    <ChildContent> 
                        <TabHeader Text="RT"></TabHeader> 
                    </ChildContent> 
                    <ContentTemplate> 
                        <div style="height: 100%; width: 100%;"> 
                            <EjsAccumulationChart Width="100%" Height="100%" @ref="@accumulationChart" LegendSettings="(new AccumulationChartLegendSettings() { Position = LegendPosition.Bottom})"> 
                                <AccumulationChartSeriesCollection> 
                                    <AccumulationChartSeries DataSource="@tecDocPieData" XName="Label" YName="Percentage"></AccumulationChartSeries> 
                                </AccumulationChartSeriesCollection> 
                            </EjsAccumulationChart> 
                        </div> 
                    </ContentTemplate> 
                </TabItem> 
                <TabItem > 
                    <ChildContent> 
                        <TabHeader Text="MCD"></TabHeader> 
                    </ChildContent> 
                    <ContentTemplate> 
                        <div style="height: 100%; width: 100%;"> 
                            <EjsChart Width="100%" Height="100%"> 
                                <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.DateTime" LabelFormat="dd.MM.yyyy" IntervalType="IntervalType.Months"></ChartPrimaryXAxis> 
                                <ChartSeriesCollection> 
                                    <ChartSeries DataSource="@coverageData" XName="Date" YName="Percentage" Type="ChartSeriesType.Area"> 
                                    </ChartSeries> 
                                </ChartSeriesCollection> 
                            </EjsChart> 
                        </div> 
                    </ContentTemplate> 
                </TabItem> 
            </TabItems> 
        </EjsTab> 
    </div> 
</div> 

Screenshot: 
 

Let us know if you have any concerns. 

Thanks,  
Srihari 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon