We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Trouble getting a "half gauge" to fill its parent container

Edit: I actually figured this out by using a negative bottom margin that's half the height of the CircleGauge. I don't love it but it works.

-----

When I manually set a height of 200px on a CircleGauge it properly fills its container.
gauge1.jpg

However, adjusting the Axis to make a "half gauge" (startAngle=270, endAngle=90) leaves an ample amount of whitespace. My goal is to get this half gauge to fill its parent container.

gauge2.jpg

I have tried setting the height of the CircleGauge to 100% and restricting its parent wrapper to 200px, but this causes the height to default to 450px and ignores the wrapper. I've also tried adjusting margins, setting the height to 50%, and as many variations of CircleGauge + wrapper configurations that I could think of, but I can't seem to get it to play nice.

This is the basic structure of my code. These settings default to a height of 450px

<template>
<div class="wrapper">
<CircularGauge>
<Axes>
<Axis :minimum="props.min" :maximum="props.max" startAngle="270" endAngle="90">
<Pointers>
<Pointer :value="props.value">Pointer>
Pointers>
<Ranges>
<Range>Range>
<Range>Range>
<Range >Range>
Ranges>
Axis>
Axes>
CircularGauge>
div>
template>

<script setup lang="ts">
/* ejs-* syntax is invalid with

1 Reply

IR Indumathi Ravi Syncfusion Team April 17, 2023 04:38 PM UTC

Hi Josh,


Based on the provided scenario, you can inherit the height of the parent div element to the Circular Gauge by setting “height” CSS style for the “e-circulargauge” class to render the Circular Gauge with same height as parent element. However, the spacing around the Circular Gauge can be reduced by setting the “allowMargin” property as “false”. The radius of the axis must be set to “100%” to occupy maximum space. Please find the code snippet for the same below.


Code Snippet:

<div class='wrapper' style="width:200px; height:200px">

            <ejs-circulargauge :allowMargin="false">

                   <e-axes>

                   <e-axis radius="100%" startAngle="270" endAngle="90">

                     //..

                    //..

                   </e-axis>

                 </e-axes>          

             </ejs-circulargauge>

</div>

<style>

 .e-circulargauge {

        height: inherit !important;

   }

</style>


We have created a sample to demonstrate the same and it can be found from the below link.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/CG1102400585



Please let us know if the above solution meets your requirement.


Loader.
Live Chat Icon For mobile
Up arrow icon