KendoReact

React Circular Gauge

  • This sleek and customizable React data visualization component comes with built-in color ranges and different scale options.
  • Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
  • Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.

Overview

The React Circular Gauge is a data visualization component that represents a value within a full-circle arc. This eye-catching React component is compact, simple to bind to data sources and provides a broad set of configuration options to ensure a natural fit in any React application. With support for a center label, side labels, ticks and value-based colors, the KendoReact Circular Gauge works well as both a static and dynamic visualization.

See React Circular Gauge demo

React Circular Gauge Component

Center Template

The center of the React Circular Gauge can be customized to either display a static message or represent the current value of the component. Additionally, the center template can have its unique color or borrow the KendoReact Circular Gauge color.

See React Circular Gauge Center Template demo

React Circular Gauge Component Center Template

Color Ranges

The KendoReact Circular Gauge component supports predefined color ranges, which will automatically change the color of the React component based on the value. You can fully customize the values and color of each range, which means there is no limit to the number of different colors the React Circular Gauge can change to.

See React Circular Gauge Color Ranges demo

React Circular Gauge Component Color Ranges

Scale Options

With the available scale options, the React Circular Gauge component can be customized to display labels, tick markers indicating the available steps within the Circular Gauge, as well as the colors associated with both the labels and tick markers.

See React Circular Gauge Scale Options demo

React Circular Gauge Component Scale Options

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.