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.