Using the Linear Gauge widget

The Linear Gauge widget is also used to indicate where a value lies in the given range. It is similar to the Radial Gauge widget and takes the same set of options as well. It is used to display the value on a linear scale.

How to do it…

Linear Gauge is created by invoking the kendoLinearGauge function on the DOM element. It uses the same options as the Radial Gauge widget:

$("#chart").kendoLinearGauge({

  pointer: {
    value: 20,
  },

  scale: {
    min: 0,
    max: 200,
    majorUnit: 20,
    minorUnit: 10
  }
  
});

This will display the Linear Gauge widget with its pointer at 20. By default, the widget is displayed vertically, that is, the value is projected on the y axis. To display the widget horizontally, specify vertical as false under the scale option. This will display the widget horizontally.

How it works…

When you render the page, the Linear Gauge is displayed vertically, as shown in the following screenshot:

After setting vertical as false, the widget...