I am struggling with getting the text to be centered when I create a circular progress bar.
This is the code where the progress bar and text is added.
<div>
<ProgressBar
value={80}
text="80%"
strokeWidth={5}
styles={buildStyles({trailColor:"red"})}
/>
This code is the styled portion for the progress bar. Is it possible to center the text to the progress bar
const ProgressBar = styled(CircularProgressbar)`
width: 100px;
height: 100px;
`;
I believe we can utilize flex here.
On the container that contains the text's tag.
You can add.
display: flex;
justify-content: center;
align-items: center;
Just make sure the text is direct child of the container that applied flex style that I mentioned before
Make sure you're importing the css file.
import "react-circular-progressbar/dist/styles.css";
The only one method that works for me was that I transform x and y.
.CircularProgressbar-text {
transform: translate(-15px, 5px);
}