The height and width of the Linear Gauge can be set using the width and height properties in LinearGaugeComponent.
The size of the Linear Gauge can be set 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'));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'));By setting value in percentage, Linear Gauge receives its dimension matching to its parent. For example, when the height is set as ”50%”, Linear Gauge renders to half of the parent height. The Linear Gauge will be responsive when the width is set as ”100%“.
<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'));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 the component’s size is not specified, the height will be ”450px” and the width will be the same as the parent element’s width.