index.md

title	page_title	description	slug	canonicalLink	position
Overview	Gauges Overview - Components - Kendo UI for Vue	Learn about the Kendo UI wrappers for Vue, which are delivered by the Gauges package.	overview_gauges_wrapper	https://www.telerik.com/kendo-vue-ui/components/gauges/	0

Gauges Overview

The Gauges are wrapper components for building common gauge types.

LinearGauge A component for representing values on a linear scale. RadialGauge A component for representing values on a radial scale. ArcGauge A component for representing values on an arc scale.

Basic Usage

The following example demonstrates how to initialize the LinearGauge and RadialGauge.

{% meta height:750 %} {% embed_file overview/basic-usage/main.vue preview %} {% embed_file overview/basic-usage/main.js %} {% endmeta %}

Installation

To initialize the Gauges, either:

• [Use the CDN service]({% slug using_cdn %}), or
• Use Webpack.

Initializing with Webpack

1. Install Kendo UI and add a theme.

npm install --save @progress/kendo-ui
npm install --save @progress/kendo-theme-default

1. Install the Kendo UI Gauges package fro Vue.

npm install --save @progress/kendo-gauges-vue-wrapper

The package also exports the following wrappers for individual components:

* ArcGauge
* LinearGauge
* RadialGauge

1. Import the Kendo UI packages to the App component. If you use the Kendo UI components more than once in your application, add all Kendo UI-related files to the main.js file. If you use the Kendo UI components once in your application, add the Kendo UI-related files the component where they will be referred.

import '@progress/kendo-ui' // This will import the entire Kendo UI library
// As an alternative, you could import only the scripts that are used by a specific widget:
// import '@progress/kendo-ui/js/kendo.dataviz.gauge' // Imports only the Gauges script and its dependencies

import '@progress/kendo-theme-default/dist/all.css'

import { LinearGauge,
          LinearGaugePointer,
          RadialGauge,
          RadialGaugePointer,
          ArcGauge,
          ArcGaugeColor,
          GaugesInstaller} from '@progress/kendo-gauges-vue-wrapper'

Vue.use(GaugesInstaller)

new Vue({
    el: '#app',
    components: {
          LinearGauge,
          LinearGaugePointer,
          RadialGauge,
          RadialGaugePointer,
          ArcGauge,
          ArcGaugeColor
    }
})

Suggested Links

• [Get Started with the ArcGauge]({% slug overview_arcgauge_wrapper %})
• [Get Started with the LinearGauge]({% slug overview_lineargauge_wrapper %})
• [Get Started with the RadialGauge]({% slug overview_radialgauge_wrapper %})