@progress/kendo-gauges-vue-wrapper/docs/arcgauge/index.md

Kendo UI Gauges wrapper for Vue.js

---
title: Overview
page_title: Overview - ArcGauge - Kendo UI for Vue
description: "Get an overview of the features the Kendo UI ArcGauge wrapper for Vue delivers and use the component in Vue projects."
slug: overview_arcgauge_wrapper
canonicalLink: "https://www.telerik.com/kendo-vue-ui/components/gauges/arcgauge/"
position: 1
---

<div><WrapperBanner link="/kendo-vue-ui/components/gauges/arcgauge/"></WrapperBanner></div>    

# ArcGauge Overview

The ArcGauge displays a value range which is represented by an arc.

All graphics render on the client in the [Scalable Vector Graphics (SVG)](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics) format.

The ArcGauge wrapper for Vue is a client-side wrapper for the [Kendo UI ArcGauge](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/arcgauge) widget.

<div data-component="StartFreeTrialSection"></div>

## Basic Usage

The following example demonstrates the ArcGauge in action.

{% meta height:380 %}
{% embed_file arcgauge/basic/main.vue preview %}
{% embed_file arcgauge/basic/main.js %}
{% endmeta %}


## Functionality and Features

* [Center template]({% slug centertemplate_arcgauge_wrapper %})
* [Color ranges]({% slug colorranges_arcgauge_wrapper %})
* [Scale options]({% slug scaleoptions_arcgauge_wrapper %})

## Suggested Links

* [Kendo UI ArcGauge](https://docs.telerik.com/kendo-ui/controls/gauges/arcgauge/overview)
* [API Reference of the ArcGauge Widget](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/arcgauge)