search

bootsoon / ng-circle-progress

A simple circle progress component created for Angular based on SVG Graphics.
https://bootsoon.github.io/ng-circle-progress/
MIT License
250 stars 86 forks source link

SubTitle not showing percentage #184

Open aaron170 opened 2 years ago

aaron170 commented 2 years ago

Hello Team

Can anyone help me out with this. I need the percentage symbol on top separate from the number. I tried to keep '%' sign in [title] and tried to show the number in [subTitle]. But in subtitle it only shows 'progress' text. As in the settings it is mentioned that default text of subtitle is 'percent'. But I am not getting that. Here a design shot attached for the requirement that I have. Any help would be great. Thanks

image

Here is my code: `<circle-progress [percent]="47" [radius]="80" [backgroundPadding]="0" [space]="-16" [innerStrokeColor]="'#ffffff'" [innerStrokeWidth]="12" [showBackground]="false" [showInnerStroke]="true" [outerStrokeWidth]="20" [outerStrokeColor]="'#009EB7'" [animation]="true" [animationDuration]="300" [titleFontSize]="60" [titleFontWeight]="900" [titleColor]="'#009EB7'" [unitsFontSize]="60" [unitsFontWeight]="600" [unitsColor]="'#009EB7'" [showSubtitle]="true" [responsive]="true"

`

bootsoon commented 2 years ago

Duplicate of #177

aaron170 commented 2 years ago

Thanks a lot. Got the percent working in subtitle. But small issue as now the percent value is showing with decimal value. Is there any way to hide that?

Something like this: image

Much appreciated.

bootsoon commented 2 years ago 
formatTitle = (percent: number)  => {
  return [ "%", percent.toFixed(0) ]
}