Inline styling for display of circle about react-circular-progressbar

[flamencoflsh]

Hi @iqnivek !

I'm still trying to figure out how I can change the attributes for the trail and text via inline styling. Using the code in the above post, I am able to get the path to display. But what is the syntax for modifying the text and trail to differentiate those properties from the ones for path?

Thanks!

[flamencoflsh]

Btw, @iqnivek , is it possible to differentiate between the stroke color of the circle and the fill of the text? I tried putting them all in the same styling:

const styles = {

circularProgressLg: {
paddingLeft: 40,
paddingRight: 40,
paddingBottom: 10,
width: "50%",
stroke: "#3e98c7",
strokeLinecap: "round",
transition: "stroke-dashoffset 0.5s ease 0s",
fill: "#ff0000",
fontSize: "10px",
dominantBaseline: "middle",
textAnchor: "middle"
}

};

And it looks like the "stroke" color just took over for both.

Thx.

[tylerzika]

@flamencoflsh do you just wrap a div around the component to style the progress bar? I'm trying to figure out how to put multiple in one of my components, but give each on a different color.

[flamencoflsh]

@tylerzika Yes, I did. But I haven't tried multiple circles with different styling yet. Let me know if it works.

I am still trying to figure out how to make the text in the center have a different color from the path. Have you figured that part out?

@iqnivek , please let us know if you have an answer =)

Thanks!

[flamencoflsh]

Update: I noticed that if I set strokeWidth to 0, then the fill color shows through.

[flamencoflsh]

@iqnivek What are the possible values for dominantBaseline?

[kevinsqi]

@flamencoflsh I don't think you'll be able to customize the text/path/trail with inline styles - I'd just use regular CSS to do that. The live demo page customizes all that stuff, and you can read the source for the demo here and here which'll show you how to set it up.

The CSS hooks available are:

.CircularProgressbar
.CircularProgressbar-trail
.CircularProgressbar-path
.CircularProgressbar-text

[kevinsqi]

@tylerzika you can have multiple colors by having wrapper divs, and using CSS to customize the child classes. For instance:

# HTML
<div className="progressbar-red">
  <CircularProgressbar progress={80} />
</div>
<div className="progressbar-blue">
  <CircularProgressbar progress={80} />
</div>

# CSS
.red .CircularProgressbar-path {
  color: red;
}
.blue .CircularProgressbar-path {
  color: blue;
}

I should add an option to specify the className directly on the CircularProgressbar component, which would remove the need to have the wrapper div - I'll open an issue for it.