Dashboard style progress bar

[nbruno]

Is there any way to customize the display of the progress bar to display like a "dashboard" progress indicator, similar to the dashboard progress bar from ant design https://ant.design/components/progress/

[kevinsqi]

There isn't right now. It seems reasonable to add a prop to configure the proportion of the diameter the path/trail takes up, and combine that with path/trail rotation to achieve this.

I'll take a look at doing that at some point, but not sure exactly when. Thanks for the suggestion!

[jeremywho]

I added support for this here:
https://github.com/jeremywho/react-circular-progressbar/pull/1

I'm not submitting a PR at the moment as counterClockwise is broken.

If you have a suggestion for getting that to work, let me know, I'll update and add unit tests and PR.

[kevinsqi]

@jeremywho that looks neat - sorry I haven't had time to dig in yet.

[lchandramohan]

any update on this?

[kevinsqi]

Not yet. I'd like to take a pass at it soon, though.

[kevinsqi]

This is now possible in v1.2.0 with the circleRatio prop and CSS rotation, based on @jeremywho's helpful initial PR which I fleshed out in #80 (thanks jeremy!)

To do this:

You'd write:

          <CircularProgressbar
            percentage={66}
            text={`${66}%`}
            circleRatio={0.75}  /* Make the circle only 0.75 of the full diameter */
            styles={{
              trail: {
                strokeLinecap: 'butt',
                transform: 'rotate(-135deg)',
                transformOrigin: 'center center',
              },
              path: {
                strokeLinecap: 'butt',
                transform: 'rotate(-135deg)',
                transformOrigin: 'center center',
              },
            }}
          />

Right now it's slightly cumbersome because you have to adjust transform: rotate whenever you change circleRatio. I'm planning to add some abstractions to make this easier in the future.

cc @nbruno @jeremywho @lchandramohan

[kevinsqi]

The syntax is now somewhat nicer in v2.0.0 with buildStyles, e.g.:

const value = 66;

<CircularProgressbar
  value={value}
  text={`${value}%`}
  circleRatio={0.75}
  styles={buildStyles({
    rotation: 1 / 2 + 1 / 8,
    strokeLinecap: "butt",
    trailColor: "#eee"
  })}
/>

[garrettg123]

Follow-up question: how would one adjust the height of the SVG based on this circleRatio so there's no empty space at the bottom?

      <CircularProgressbar
        value={fill}
        circleRatio={0.5}
        styles={buildStyles({
          rotation: 3 / 4,
          strokeLinecap: 'butt',
          trailColor: COLOR.PURPLE,
          textColor: COLOR.WHITE,
        })}
      />

I've tried margin-bottom: -50% but that's not working.

[HoussemDjeghri]

@garrett-gottlieb you can add a parent div on top of the CircularProgressbar that has the height you want and with the property overflow:clip to cut the unwanted space.
progressContainer:{ width: 200, height:150, overflow: "clip" }

[ViniTeider]

@HoussemDjeghri this doesnt work since the progress bar resizes to fit the div, did any one find another solution?