Data Visualization Widgets LinearGauge

A widget that represents a gauge with a linear scale.

Included in: dx.chartjs.js, dx.all.js

The dxLinearGauge widget allows you to present meaningful values on a numeric circular scale. The values can be displayed using different indicators such as needles, markers and range bars. In addition, different meaningful ranges can be highlighted on the scale.

The dxLinearGauge widget, like any other DevExtreme data visualization widget, can be created using one of the three possible approaches: jQuery, Knockout or AngularJS. The following code demonstrates how to create the dxLinearGauge widget within the "linearGaugeContainer" container using the jQuery approach.

<script>
  $(function () {
    $("#linearGaugeContainer").dxLinearGauge({
      //Options of the configuration object are specified here
    });
  });
</script>

To configure the dxLinearGauge widget, pass a configuration object as the constructor's parameter. The properties of this object represent the widget's configuration options. To specify the options, set the configuration object properties to the required values. Refer to the Configuration section to find the options that are required to configure your linear gauge.

Start Tutorial View Demo Watch Video

See Also

To learn the widget's concepts and overview features, refer to the Gauges section within the Data Visualization Guides.

Configuration

An object that defines configuration options for the dxLinearGauge widget.

Methods

This section describes the methods that can be used in code to manipulate objects related to the dxLinearGauge widget.

Events

This section describes events fired by the widget.