Circular gauge can render to its container size. You can set the size via inline or CSS as demonstrated below.
<div id='container'>
<div id='circular-container' style="width:650px; height:350px;"></div>
</div>
import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(
<CircularGaugeComponent id='circulargauge'>
</CircularGaugeComponent>,document.getElementById('circulargauge'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(<CircularGaugeComponent id='circulargauge'>
</CircularGaugeComponent>, document.getElementById('circulargauge'));
You can also set size for the gauge directly through width
and height
properties.
In Pixel
You can set the size of the gauge in pixel as demonstrated below.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(
<CircularGaugeComponent id='circulargauge' width='650' height='350'>
</CircularGaugeComponent>,document.getElementById('circulargauge'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(<CircularGaugeComponent id='circulargauge' width='650' height='350'>
</CircularGaugeComponent>, document.getElementById('circulargauge'));
In Percentage
By setting value in percentage, gauge gets its dimension with respect to its container. For example, when the height is ‘50%’, gauge renders to half of the container height.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(
<CircularGaugeComponent id='circulargauge' width='80%' height='50%'>
</CircularGaugeComponent>,document.getElementById('circulargauge'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(<CircularGaugeComponent id='circulargauge' width='80%' height='50%'>
</CircularGaugeComponent>, document.getElementById('circulargauge'));
Note: When you do not specify the size, it takes 450px
as the height and window size as its width.