• What is KendoReact
  • Getting Started
  • Unstyled Mode
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chart Wizardnew
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Toolsupdated
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChart
    • PDF Processing
    • PDF Viewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheet
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

KendoReact ArcGauge Overview

The KendoReact ArcGauge represents value ranges on its arc.

Compared to the Radial Gauge, this gauge uses a colored arc instead of an arrow pointer. This leaves the center free for a user-defined Center Template.


The following example demonstrates the ArcGauge in action.

Example
View Source
Change Theme:

The ArcGauge is part of the KendoReact Gauges component library. The procedures for installing, importing, and using the Gauges are identical for all components in the package. To learn how to use the ArcGauge and the rest of the Gauges, see the Getting Started with the KendoReact Gauges guide.

Key Features

  • Center template—You can customize the look of the center of the KendoReact ArcGauge.
  • Color ranges—Depending on the current value, you can set different colors for the ArcGauge component.
  • Scale options—You can customize the options of the scale in the React ArcGauge component.
  • Appearance—You can quickly style the ArcGauge by choosing from the predefined styling options.
  • Globalization—The built-in globalization support allows you to create apps that are ready to be implemented worldwide.

In this article

Not finding the help you need?