Kendo UI for Angular

Angular CircularGauge

  • A simple and modern way to represent a value on a circular scale. Very useful for Angular dashboards.
  • Part of the Kendo UI for Angular library along with 100+ professionally designed components developers trust for all their Angular UI needs.
  • Get up and running quickly with award-winning support, detailed documentation, demos, virtual classrooms, and a 3-million-strong developer community.
CircularGauge
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • Display a Value in a Dynamic Circular Scale

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

    See the Angular CircularGauge demo

    circulargauge-component-overview
  • Center Template

    The Angular CircularGauge provides a template that allows you to include static or dynamic content inside the component. This is normally used to display the indicated value but can be a message. 

    See the Angular CircularGauge Center Template demo

    center-circular-gauge-component
  • Color Ranges

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

    See the Angular Circular Gauge Color Ranges demo

    Colors-circular-gauge-component
  • Scale Options

    The Angular Circular Gauge component provides various options to customize its scale. Display and customize the color and styling of tick marks that represent available numerical steps and their associated labels.

    See the Angular Circular Gauge Scale Options demo

    scale-circular-gauge-component
Kendo Angular UI Getting Started Background

Get Started with Kendo UI for Angular

Kendo UI