Skip to content

Chart-Dimensions.md

Latest commit

 

History

History
89 lines (55 loc) · 2.41 KB

Chart-Dimensions.md

File metadata and controls

89 lines (55 loc) · 2.41 KB
layout post
title Dimensions in ReactJS Chart Control | Syncfusion
description Learn here all about dimensions support in Syncfusion Essential ReactJS Chart control, its elements, and more.
platform ReactJS
control Chart
documentation ug
api /api/js/ejchart

Chart Dimensions in ReactJS Chart

You can set the size of the chart directly on the chart or to the container of the chart. When you do not specify the size, it takes 450px as the height and window size as its width, by default.

Set size for the container

You can customize the chart dimension by setting the width and height for the container element.

{% highlight javascript %}

<body>
   <div id=”container” style=”width:820px; height:500px;”></div>         
</body>

"use strict";
<EJ.Chart id="default_chart_sample_0">
</EJ.Chart>,

{% endhighlight %}

Set size in pixels

You can also set the chart dimension by using the size property of the chart.

{% highlight javascript %}

"use strict";
var size = { width: '600', height: '450' };
ReactDOM.render(
    <EJ.Chart id="chart1"  size = {size}></EJ.Chart>,
        document.getElementById('chart')
);

{% endhighlight %}

ReactJS Chart dimentions

Setting size relative to the container size

You can specify the chart size in percentage by using the size property. The chart gets its dimension with respect to its container.

{% highlight html %}

<body>
    <div id="container" style="width:700px; height:500px"></div>
</body>

"use strict";
var size = { width: '80%', height: '90%' };
ReactDOM.render(
    <EJ.Chart id="chart1"  size = {size}></EJ.Chart>,
        document.getElementById('chart')
);

{% endhighlight %}

ReactJS Chart setting size relative to the container size

Responsive chart

To resize the Chart when the browser or the chart container is resized, set the isResponsive property to true, where the chart adapts to the changes in size of the container.

{% highlight javascript %}

  "use strict";

ReactDOM.render( <EJ.Chart id="chart1" isResponsive = 'true' ></EJ.Chart>, document.getElementById('chart') );

{% endhighlight %}