background

KendoReact

React Circular Gauge

  • Easily represent a value within a full-circle arc with the React Circular Gauge data visualization component.
  • Part of the KendoReact library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
Circular Gauge Header
  • Easily Show Progress on a Circular Gauge

    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 the 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 the 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 the 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 the React Circular Gauge Scale Options demo

    React Circular Gauge Component Scale Options

All KendoReact Components

Next Steps