• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
New to Kendo UI for Angular? Start a free 30-day trial

Appearance

The Gauges enable you to set their width and height and customize their color.

Dimensions and Resizing

By default, the Gauges are rendered with a size of 200x200 px. To set a different size to the ArcGauge, use the style attribute—for example, style="width: 100%; height: 100%;" accommodates the component in the container element.

The LinearGauge and RadialGauge are inline elements by default. In addition to specifying their width and height inline with the style attribute, configure their display as block elements by applying the display: block; CSS rule to the .k-gauge class.

Example
View Source
Change Theme:

The components automatically resize and redraw their content when the size of their elements changes—for example, as a result of a browser window resizing. To limit the automatic resizing, use the resizeRateLimit option of the Gauges. To disable the automatic resizing, set resizeRateLimit to 0.

Color

The colors of the Gauges are derived from the active Kendo UI theme. It is possible to customize them through the theme variables and the configuration.

In this article

Not finding the help you need?