Gaurge taking full 360 degree width and height

[ND]

1) I was trying to implement semi gauge, but it was taking 360 degree height. how to avoid it?

<ChartContainer>

<CircularGaugeComponent

centerX="50%"

centerY="80%"

id="circulargauge"

style={{

// width: "20rem",

// height: "calc(32vh - 5vh)",

// marginTop: "1rem",

height: "inherit",

}}

>

<Inject services={[GaugeTooltip]} />

<AxesDirective>

<AxisDirective

startAngle={270}

endAngle={90}

// radius="90%"

minimum={0}

maximum={100}

majorTicks={{

width: 0,

height: 0,

}}

lineStyle={{ width: 0 }}

hideIntersectingLabel={true}

minorTicks={{

width: 0,

height: 0,

position: "Outside",

interval: 10,

}}

labelStyle={{

useRangeColor: true,

position: "Outside",

format: "{value}%",

font: { color: "#666666", size: "13px", fontFamily: "Roboto" },

}}

>

<AnnotationsDirective>

<AnnotationDirective

content="Circular Gauge"

angle={180}

radius="40%"

/>

</AnnotationsDirective>

<PointersDirective>

<PointerDirective

value={60}

radius="60%"

cap={{

radius: 10,

color: "white",

border: {

color: "#A9A9A9",

width: 5,

},

}}

animation={{

enable: true,

duration: 1500,

}}

color="#A9A9A9"

/>

</PointersDirective>

<RangesDirective>

<RangeDirective

start={0}

end={60}

radius="102%"

color="#1475b9"

startWidth={30}

endWidth={30}

/>

<RangeDirective

start={60}

end={270}

radius="102%"

color="#D1D2D4"

startWidth={30}

endWidth={30}

/>

</RangesDirective>

</AxisDirective>

</AxesDirective>

</CircularGaugeComponent>

</ChartContainer>

[Indumathi Ravi]

Hi, 

  

Thank you for contacting Syncfusion Support. 

  

We have analyzed your query and created the sample using the provided code snippet, 

  

https://stackblitz.com/edit/react-x5t3ss-bmdt3b?file=index.js 

  

In this sample, we have set "allowMargin" to "false", now the semi-circular gauge is rendered based on width and height.  

  

Please let us know if the sample above meets your requirements. If not, please provide more information so that we can assist you better as soon as possible. 

  

Regards, 

Indumathi R