Gauges Overview
The Gauges are wrapper components for building common gauge types.
Basic Usage
The following example demonstrates how to initialize the LinearGauge and RadialGauge.
Installation
To initialize the Gauges, either:
Initializing with Webpack
Install Kendo UI and add a theme.
npm install --save @progress/kendo-ui npm install --save @progress/kendo-theme-default
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
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 } })