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';
export function App() {
return (<LinearGaugeComponent width='650px' height='350px'>
</LinearGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent } from '@syncfusion/ej2-react-lineargauge';
export function App() {
return(
<LinearGaugeComponent width='650px' height='350px'>
</LinearGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
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';
export function App() {
return (<LinearGaugeComponent width='100%' height='50%'>
</LinearGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent } from '@syncfusion/ej2-react-lineargauge';
export function App() {
return(
<LinearGaugeComponent width='100%' height='50%'>
</LinearGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
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.