How to create semi circular React Progressbar with custom tooltip?

Description

This article shows how to create a semi-circular React Progressbar with a custom tooltip.

Solution

A Progressbar can be used to visualize the progression of a task or process. A semi-circular progressbar can be rendered by setting the type property as Circular, startAngle as 260, and endAngle as 100 in the progressbar.

To show a tooltip, the TooltipComponent can be used. You can decide where the tooltip should be placed by using the position property, what content to show in the tooltip by using the content property, and which target element id to use with the target property to display the tooltip. It’s also important to note that the progressbar component should be rendered inside the TooltipComponent.

Code Snippet

let content1 = '<div id="point1" style="font-size: 26px;font-weight:bold;width: 200px;height: 60px;padding-top: -10px;"><span>Excellent</span><i id="target" class="material-icons"></i></div>';

<TooltipComponent position="TopCenter" content="Excellent: 95" target="#target">
  <ProgressBarComponent id="circular1" type='Circular' startAngle={260} endAngle={100}>
  </ProgressBarComponent>
</TooltipComponent>

The following image illustrates the output of the above code.

View Sample in Stackblitz

Conclusion

I hope you enjoyed learning how to create semi circular React Progressbar with custom tooltip.

You can refer to our React Progressbar feature tour page to learn about its other features and documentation, and how to quickly get started for configuration specifications. You can also explore our React Progressbar example to understand how to create and visualize data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free-trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comment section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!