Centering bigger text

[thebarty]

Just ran into an issue with enlarging the font-size and centering the percentage-text.

My standard css-tricks don't work here…

      <Circle
        progress={currentStateInPercent}
        progressColor={strokeColor(currentStateInPercent)}
        bgColor='#cccccc'
        lineWidth='40'
        roundedStroke={true}
        showPercentageSymbol={false}
        textColor='#bfbfbf'
        textStyle={{ 'font-size': '120px' }}
      />

If you want to make this project perfect, then it would be cool to have some easy way to adjust this…

Thanks again for your hard work!

[satiewaltz]

@thebarty You need to use font instead of font-size. If you want to use just font-size you also need to provide a font-family as well.

Option A: { 'font': '120px Helvetica, Arial, sans-serif' } Option B: { 'font-size': '120px', 'font-family': 'sans-serif' }

---

If your issue is more about large text not being centered, you need to increase the size property when increasing font-size:

<Circle size='200' textStyle={{ 'font-size': '120px' }}/>

[ramosmario]

I run into the same problem. Is there any update on this issue?

<Circle animate={false} responsive={false} size="170" lineWidth="15" progress={50} textStyle= {{ font: "bold 13rem Lato" }} roundedStroke={true} showPercentage={true} showPercentageSymbol={false} percentSpacing={0} />