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

Pie chart & Bar Chart issue for Responsive property in ej2

When we are using EJS in Pie Chart and to make it Reponsive like when cointainer is resized so along with that Pie chart and bar chart should also resized.

Code for that :

<ejs-accumulationchart [title]='chartTitle' [legendSettings]='legend'

[isResponsive]="true"

  [tooltip]='tooltipSettings'>

    <e-accumulation-series-collection>

        <e-accumulation-series 

        type='Pie' [dataSource]='data' xName='name' yName='value' 

        [dataLabel]='chartLabel'>

        </e-accumulation-series>

    </e-accumulation-series-collection>

</ejs-accumulationchart>





it is not working . So if there is any another property or aby other method to resolve this one problem.


1 Reply

BP Baby Palanidurai Syncfusion Team July 5, 2021 10:31 AM UTC

Hi Sourabh, 

Greetings from Syncfusion. 

We have analyzed your query. By default, chart gets size (height and width) from its parent element. If size to the parent element is not specified, then chart will render with default size (Height as 450px and width as 600px). Also, we would like to let you know that we have bind window resize event to chart, so while resizing the window with respect to container’s width, chart will be resized with respect to width. If you want the chart’s height to be resized with the respect to container then you can specify the height of chart in percentage and need to specify the height to its parent element as depicted below.   
<style> 
    html, 
    body { 
      display: block; 
      height: 100% !important; 
    } 
  </style> 


<div style="display: block; height: 100%"> 
    <ejs-accumulationchart id="container" #pie style='display:block;  width: 100%; height: 100%'
    </ejs-accumulationchart> 
</div> 

Since with respect to container’s height the chart has to be rendered, we have specified height to all the parent element in percentage, so while resizing charts get the parent elements height instead of default height. Sample for your reference, can be find from below link,  
 
Kindly revert us, if you have any concerns. 
 
Regards, 
Baby. 


Loader.
Up arrow icon