Chart dimensions in React Chart component
20 Jan 202315 minutes to read
Size for Container
Chart can render to its container size. You can set the size via inline or CSS as demonstrated below.
<div id="charts" style="width:650px; height:350px"></div>
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,
ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
function App() {
return <ChartComponent id='charts'>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent } from '@syncfusion/ej2-react-charts';
function App() {
return <ChartComponent id='charts'>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Category, ChartComponent, ColumnSeries, DataLabel, Inject, Legend, LineSeries, SeriesCollectionDirective, SeriesDirective, Tooltip } from '@syncfusion/ej2-react-charts';
function App() {
const data = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
const primaryxAxis = { valueType: 'Category' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='month' yName='sales' type='Column' name='Sales'/>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel,Category,ChartComponent, ColumnSeries, DataLabel,
Inject, Legend,LineSeries, SeriesCollectionDirective, SeriesDirective,
Tooltip} from '@syncfusion/ej2-react-charts';
function App() {
const data: any[] = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
const primaryxAxis: AxisModel = { valueType: 'Category' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='month' yName='sales' type='Column' name='Sales' />
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
Size for Chart
You can also set size for chart directly through width
and
height
properties.
In Pixel
You can set the size of chart in pixel as demonstrated below.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Category, ChartComponent, ColumnSeries, DataLabel, Inject, Legend, LineSeries, SeriesCollectionDirective, SeriesDirective, Tooltip } from '@syncfusion/ej2-react-charts';
function App() {
const data = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
const primaryxAxis = { valueType: 'Category' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} width='650' height='350'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='month' yName='sales' type='Column' name='Sales'/>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel,Category,ChartComponent, ColumnSeries, DataLabel,
Inject, Legend,LineSeries, SeriesCollectionDirective, SeriesDirective,
Tooltip} from '@syncfusion/ej2-react-charts';
function App() {
const data: any[] = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
const primaryxAxis: AxisModel = { valueType: 'Category' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} width='650' height='350'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='month' yName='sales' type='Column' name='Sales' />
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
In Percentage
By setting value in percentage, chart gets its dimension with respect to its container. For example, when the height is ‘50%’, chart renders to half of the container height.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Category, ChartComponent, ColumnSeries, DataLabel, Inject, Legend, LineSeries, SeriesCollectionDirective, SeriesDirective, Tooltip } from '@syncfusion/ej2-react-charts';
function App() {
const data = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
const primaryxAxis = { valueType: 'Category' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} width='80%' height='90%'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='month' yName='sales' type='Column' name='Sales'/>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel,Category,ChartComponent, ColumnSeries, DataLabel,
Inject, Legend,LineSeries, SeriesCollectionDirective, SeriesDirective,
Tooltip} from '@syncfusion/ej2-react-charts';
function App() {
const data: any[] = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
const primaryxAxis: AxisModel = { valueType: 'Category' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} width='80%' height='90%'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='month' yName='sales' type='Column' name='Sales' />
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
Note: When you do not specify the size, it takes
450px
as the height and window size as its width.