Linear gauge 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 { LinearGaugeComponent } from '@syncfusion/ej2-react-lineargauge';
ReactDOM.render(
<LinearGaugeComponent id='gauge'>
</LinearGaugeComponent>,document.getElementById('gauge'));You can also set size for linear gauge directly through width and height properties.
In Pixel
You can set the size of lineargauge in pixel as demonstrated below.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent } from '@syncfusion/ej2-react-lineargauge';
ReactDOM.render(
<LinearGaugeComponent id='gauge' width='650px' height='350px'>
</LinearGaugeComponent>,document.getElementById('gauge'));In Percentage
By setting value in percentage, linear gauge gets its dimension with respect to its container. For example, when the height is ‘50%’, linear gauge renders to half of the container height.
<div id='container'>
<div id='element' style="width:1000px; height:600px;"></div>
</div>import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent } from '@syncfusion/ej2-react-lineargauge';
ReactDOM.render(
<LinearGaugeComponent id='gauge' width='100%' height='50%'>
</LinearGaugeComponent>,document.getElementById('gauge'));Note: When you do not specify the size, it takes
450pxas the height and window size as its width.