Linear Gauge Overlapping Bars Broken

[Brent]

I was using the linear gauge in version 18.2.0.59.  I just upgraded to 18.3.0.40 and the rendering is broken.  I am using multiple pointers to render overlapping bars within one gauge.  For example, I have a single gauge with about 20 LinearGaugePointer elements like this:

<LinearGaugePointer Type="Point.Bar" Height="@BarHeight" Value="@BarLength" Color="@BarColor" />

I change the values of the Height, Value, and Color to achieve the data visualization I want.  All was working beautifully until I upgraded.  Now I have extraneous lines that seem to be caused by the update.  There are sets of bars that have the exact same height but different color and width.  This allows me to create colored bar segments that start and end wherever I want within the gauge.  It seems like they aren't rendering at the same height anymore even though no code was changed, so the one that is supposed to be on bottom is somehow slightly taller than the one on top, and I see thin horizontal lines of the bottom color.

Please see the attached picture - the first gauge is with the old version and the second is with the latest upgraded package.  There are three visible bars, one orange, full height and full width, one gray - about half height and full width, and then another orange - half height and 3/7 of the width.  The gray shouldn't be showing those thin horizontal lines from 0 to 3... it should be all orange like in the first image.

I have cleared my nuget cache and no help...  is there something that changed between the above versions that could cause it to not draw multiple bars with the same height EXACTLY the same height?

[Sharmi Murugan]

 Hi Brent,

Thank you for contacting Syncfusion support.

We tried to reproduce the reported issue by analyzing the provided screenshots. We used the below code snippet for analyzing the reported issue. 

Code snippet: 

<SfLinearGauge Orientation="Orientation.Horizontal">
<LinearGaugeAxes>
     <LinearGaugeAxis Minimum="0" Maximum="7">
     <LinearGaugeMajorTicks Color="#9E9E9E" Interval="1" Height="7" Width="2" />
     <LinearGaugeMinorTicks Color="#9E9E9E" Interval="0.5" Height="0" />
<LinearGaugePointers>
     <LinearGaugePointer Value="7" Height="60" Width="60" Color="orange" Offset="-7" Type="Point.Bar" />
     <LinearGaugePointer Value="7" Height="30" Width="60" Color="gray" Offset="10" Type="Point.Bar" />
     <LinearGaugePointer Value="3" Height="30" Width="60" Color="orange" Offset="10" Type="Point.Bar" />
</LinearGaugePointers>
</LinearGaugeAxis>

<LinearGaugeAxis Minimum="0" Maximum="100" OpposedPosition="true">
<LinearGaugeLine Offset="68"></LinearGaugeLine>
<LinearGaugeMajorTicks Color="#9E9E9E" Interval="10" Height="7" Width="2" />
<LinearGaugeMinorTicks Color="#9E9E9E" Interval="1" Height="5" />
<LinearGaugePointers>
     <LinearGaugePointer Value="0" Height="0" Width="0" Color="orange" Type="Point.Bar" />
</LinearGaugePointers>
</LinearGaugeAxis>
</LinearGaugeAxes>
</SfLinearGauge>

  

When the above code snippet is used, we are able to reproduce the reported issue in the previous versions of the Linear gauge also. Please try zooming in the browser with the older version component. The issue will be reproduced. Please find the screenshots of the current and previous versions of the Linear gauge for your reference below. 

  

18.2.0.59
18.3.0.40

  

However, please provide us the code snippet or the sample application that you have used to reproduced the reported issue. It will be helpful for us to analyze the exact issue and provide you the solution for the same.

Regards,
Sharmi. 

[Brent]

So, were you able to repro in the older version only when you zoom the browser?  I'd see that zooming repros as well but I'm not that worried about that case.  When NOT zooming the browser, I never saw this issue with the old component...  is this the same for you?

[Sabari Anand Senthamarai Kannan]

Hi Brent, 

 

Thank you for the update. 

 

We are able to reproduce the reported issue in some Windows machine and in some other machines, it is not reproduced with the default browser zoom. However, can you please provide your code snippet or the sample application to reproduce the exact issue? It will be helpful for us to analyze the exact issue and provide you the solution. 

 

Regards, 

Sabari Anand