How we can align the title and subtitle?

[lokendradvs]

Need a margin on top for changing the position.

[lokendradvs]

I want to give some margin from the top in 80% title but am unable to do so. Can you let me know if this would be possible?

[lokendradvs]

Did you check the issue?

[bootsoon]

There's no margin option. Pass an array to title option.

      "title": [
                "working",
                "in",
                "progress"
      ],

[lokendradvs]

Hi, Thanks for the reply but the same issue is appearing after trying the values into an array.

[lokendradvs]

[bootsoon]

 percentTitle = [ "", "80%" ]

[lokendradvs]

Ok but if the data is coming dynamically then how it could be happen?

On Sun, 6 Mar 2022, 2:32 pm Boot Soon, @.***> wrote:

"title": [ "", "80%" ],

— Reply to this email directly, view it on GitHub https://github.com/bootsoon/ng-circle-progress/issues/177#issuecomment-1059922600, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXEF4H7LJSCILCIRKH2E7NLU6RYBDANCNFSM5OXVZ76Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you authored the thread.Message ID: @.***>

[bootsoon]

You can handle it in titleFormat callback.

titleFormat A callback function to format title. It returns a string or an array of string.

[titleFormat] = "formatTitle"

// titleFormat callback example
formatTitle = (percent: number)  => {
  return [ "", percent + "%"]
}

[lokendradvs]

It is showing 0 percent when I add these lines in my code How will percentage work dynamically with a blank array because it is a number type so it is not coming into the array?

[bootsoon]

titleFormat is a property in your HTML.

<circle-progress ...
    [titleFormat]="formatTitle"></circle-progress>

formatTitle is a function in your TypeScript.

formatTitle = (percent: number)  => {
  return [ "", percent + "%"]
}

[lokendradvs]

Sorry it doesn't seem to work, just tried and where do we define the percent value in our code.

[bootsoon]

formatTitle is a callback function. ng-circle-progress calls it when your progress changes.

<circle-progress ...
    [percent]="otherPercentVariable" 
    [titleFormat]="formatTitle"></circle-progress>

formatTitle = (percent: number)  => {
  return [ "", percent + "%"]
}

You change the value of otherPercentVariable or receive a value from a backend service and assign it to otherPercentVariable. The formatTitle function will be called and the title will change.

[lokendradvs]

Great thanks but it is overlapping

[bootsoon]

Hide the unit (showUnits=false) and handle subtitleFormat function as the same as titleFormat.

[lokendradvs]

Great thanks, Now it looks fine to me