Switch to infinite scroll (Full book)

RingProgress

RingProgress displays a circular ring, divided in several parts:

  • We can use it as a circular progress bar, with a single bar showing the progress over the background track.
  • We may also use it as a segmented, Donut Chart, where one section represents a quantity with its own bar.

Example of a circular progress bar:

<RingProgress
    sections={[{ value: 35, color: progressColor, tooltip: "35%" }]}
    rootColor={trackColor}
    size={30}
    thickness={4}
    roundCaps
/>

Example of a donut chart with multiple sections:

 sections={[
        { value: 40, color: 'cyan' },
        { value: 15, color: 'orange' },
        { value: 15, color: 'grape' },
      ]}
earlymorning logo

RingProgress

RingProgress displays a circular ring, divided in several parts:

  • We can use it as a circular progress bar, with a single bar showing the progress over the background track.
  • We may also use it as a segmented, Donut Chart, where one section represents a quantity with its own bar.

Example of a circular progress bar:

<RingProgress
    sections={[{ value: 35, color: progressColor, tooltip: "35%" }]}
    rootColor={trackColor}
    size={30}
    thickness={4}
    roundCaps
/>

Example of a donut chart with multiple sections:

 sections={[
        { value: 40, color: 'cyan' },
        { value: 15, color: 'orange' },
        { value: 15, color: 'grape' },
      ]}