Linear Gauge Bar - smaller gauge values bar not showing

Linear Gauge Bar - smaller gauge values bar not showing

Posted by: ksm.ac.in on 7 September 2020, 1:43 am EST

• 

  ksm.ac.in

  • Post Options:
  • Link
    Copy

  Posted 7 September 2020, 1:43 am EST - Updated 3 October 2022, 3:36 pm EST

  Hello Team GrapeCity,

  Please provide suggestion
  
  #1how we can show linear bar in case gauge value is 10 or 20 or lesser. Specially when max value becomes is more 2000 + or more.

  

  807×269 11.4 KB

  

  1311×487 57.9 KB

  
  
  

  

  1147×617 99.8 KB

  

  

  1089×679 67.9 KB

  #2 how control is height to be max
  
  

  

  771×809 21.4 KB

  Hope this attached images provide you more clearence.

  Thanks in advance.

• 

  ksm.ac.in

  • Post Options:
  • Link
    Copy

  Posted 7 September 2020, 7:19 am EST - Updated 3 October 2022, 3:37 pm EST

  Hello Ashwin, this example is given by you in previous query.

  https://stackblitz.com/edit/angular-vhcbmj?file=src%2Fapp%2Fapp.component.ts

  In this if we assigned

  readonly maxValue = 2000;
  

  and gauge values
  
  gaugeValues = [5000, 80, 100, 50, 15];

  then linear bar is not showing.

  how we fix this in this example
  
  https://stackblitz.com/edit/angular-vhcbmj?file=src%2Fapp%2Fapp.component.ts

  Our requirement is

  #1 bar should show for lowest value also.
  
  all other bar height size vary is as per value from each other.
  
  Atleast a bar if it has lowest value.
  
  as this in image.

  

  #2 if gauge value increase or more than max value.
  
  it should not change it color to blue. and not take full length height .

  your suggestion always welcome.

  and
  
  please also provide solution of issue in first query, image related code is attached.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 8 September 2020, 2:05 am EST

  Hi,

  Regarding displaying small values, we cannot change this behavior because it is correct. In comparison to 5000, 70 is a very small value therefore the bar of this value will also be very small.

  Regarding the maximum height, the same as you have set the height of each gauge, you can also set the maxHeight of the gauges.

  Regarding the blue color, this is expected behavior because 5000 value is not provided inside any range. If a value set in the LinearGauge which is not provided in any of the ranges, then the default blue color will be displayed. You just need to increase the range of the gauges according to your max values.

  Please refer to the sample link below for reference:

  https://stackblitz.com/edit/angular-ubfypc

  Regards,
  
  Ashwin