Blurred

[Bao2080]

Angular 18, Standalone. html code:

<foreignObject x="241.73" y="430.1" width="100" height="100" >
  <div class="ngx-ahu-g4pf">
    <ngx-gauge
      style="background-color: white;"
      [value]="numberGauge" 
      [size]="80" 
      [label]="''"
      [append]="'Pa'" 
      [margin]="0"
      [min]="0" 
      [max]="100" 
      [thick]="5" 
      [type]="'arch'"
      [thresholds]="thresholds">
    </ngx-gauge>
  </div>
</foreignObject>

I have tried resizing. But the lines are still blurry whether they are inside the SVG or not. How can I solve this situation?

[clementolive]

Hi, have you tried running it on another browser ? Which one did you use ?

[Bao2080]

Hi, have you tried running it on another browser ? Which one did you use ?

yes, i tried on Google Chrome, Microsoft Edge, Android Phone(Samsung' and Huawei' mobile phone browser). The same problem will occur.

[DrakeAnglin]

@Bao2080 You need to play with the size option. your size is set to 80, but it looks like the gauge is zoomed in. if you increase the size, that basically increases the resolution. you will also have to increase the thick as that is based off size to get the dimension that your looking for.