The Chart Component does not take up the full height of the container

[Hung Luong]

Hi Syncfusion Team,

I'm working with ChartComponent, but It seems that the Chart doesn't occupy the full height of the container. Is there a way for me to achieve this?

This is the example: https://stackblitz.com/edit/react-psffao-ovxfrj?file=index.js

Thanks.

[Nishanthi Panner Selvam]

Hung,

Greetings from Syncfusion.

We have reviewed your query. Generally, the height of the child container depends on the height of its parent container. If the height of the parent container for the chart is not set, the chart will be rendered with a default height of 450px. Therefore, we recommend that you set the height in the parent container. This adjustment will ensure that the child container (chart) automatically inherits its height from the parent. We have attached a code snippet, sample, and screenshot for your reference.

Code-snippet:

<div className="panel-content" style={{ border: '1px solid black', height: '100vh', width: '100%' }}>

            <ChartComponent style={{ height: 100%, width: 100% }}>

            </ChartComponent>

</div>

Screenshot:

Sample: https://stackblitz.com/edit/react-psffao-h2ii6d?file=index.js

Please let us know if the above sample does not meet your requirements.

Regards,

Nishanthi