DevExtreme React - Visual Elements

Topics in this section describe various elements of the BarGauge widget. Each topic gives a detailed overview of the element's purpose and ways of configuring. Below is the element map of the BarGauge widget. Hover over the map and you will discover how different gauge elements are called. Click an element to navigate to the topic with details on this element.

DevExtreme HTML5 JavaScript Gauges dxBarGauge BarGauge

Title Subtitle Label Label Label Label Tooltip Bar Bar Bar Bar
See Also

Bars

Gauge bars display values on a bar gauge. Each bar is located on a separate circular track and indicates one value.

DevExtreme HTML5 JavaScript Gauges dxBarGauge BarGauge GaugeBars

There are several options for customizing the bar's appearance and arrangement. A brief overview of them is explained below.

  • Color
    Although you cannot color each bar explicitly, you can use a palette instead. A number of predefined palettes are available for this purpose. In addition, you can specify your own palette by assigning an array of colors to the palette option. The background color can be specified in addition to the bar color. The bar's background is the remaining segment of the bar's track. It can be colored using the backgroundColor option.

  • Geometry and Arrangement
    You can change the shape of a gauge using the geometry option. The radius of the gauge can also be changed. Use the relativeInnerRadius option to do this. In addition, you can separate the distance between gauge bars using the barSpacing option.

Labels

Each gauge bar can be accompanied by a label that displays the value indicated by this bar. A bar label is colored the same as the corresponding bar. Labels make a gauge more representative and easier to understand.

DevExtreme HTML5 JavaScript Gauges dxBarGauge BarGauge GaugeBarLabels

Bar labels can be tuned using label configuration object options.

JavaScript
var barGaugeOptions = {
    label: {
        // ...
    }
};

These options are briefly described below.

  • Visibility
    Bar labels are displayed by default. To hide them, assign false to the visible option or directly to the label field.

  • Text Customization
    You can specify a format for the value displayed by a label. Moreover, you are not limited to displaying the value of a bar only - you can customize the label's text per your requirements using the customizeText option.

  • Appearance
    The font style used for displaying the label text can be varied using font configuration object options. Also, the width and color of the label's connector can be changed using the connectorColor and connectorWidth options respectively. In addition, bar labels can be indented from the upper bar using the indent option.

View Demo

Tooltips

A tooltip is a small pop-up rectangle that displays information on a hovered bar in BarGauge. By default, the tooltip shows the value indicated by the hovered element. However, it is possible to display other information in the tooltip. You can customize the text of the tooltip and its appearance in the way you require.

DevExtreme HTML5 JavaScript Gauges dxBarGauge BarGauge Tooltip

Tooltips are not enabled by default. To enable them, set the enabled option of the tooltip object to true.

JavaScript
var gaugeOptions = {
    tooltip: {
        enabled: true
    }
};

You can change default tooltip settings by defining the options within the tooltip configuration object. Some of these options are categorized and listed below.

  • Text Customization and Formatting
    By default, a tooltip displays the value of a hovered widget element without formatting. Set the format option to format this value. When text customization is required, assign a function specifying the text to be shown to the customizeTooltip option. Learn more in the Data Formatting topic.

  • Font Settings
    To customize the appearance of the tooltip text, define the font options within the font configuration object.

Title and Subtitle

The BarGauge can be displayed with a title and a subtitle. These elements usually contain general explanations about the data represented by the gauge. You can, however, place any kind of information in the gauge title and subtitle.

DevExtreme HTML5 JavaScript Gauges dxBarGauge BarGauge Title Subtitle

To specify a gauge title and subtitle, use the title and its nested subtitle options. Both these options accept either a string with the title/subtitle text:

JavaScript
var gaugeOptions = {
    title: {
        text: 'Gauge Title',
        subtitle: 'Gauge Subtitle'
    }
};

...or an object that configures more title/subtitle options.

JavaScript
var gaugeOptions = {
    title: {
        text: 'Gauge Title',
        font: {
            size: 30,
            weight: 400
        },
        subtitle: {
            text: 'Gauge Subtitle',
            font: {
                size: 15,
                weight: 100
            }
        }
    }
};

Several title options that can be set within the title and subtitle objects are categorized and listed below.

  • Location
    You can place a title on any side of your gauge. For this purpose, use the horizontalAlignment and verticalAlignment options. Note that if these options are specified, the subtitle will be displayed at the same position as the title.

  • Font Settings
    To customize the appearance of the text, define the font options within the font configuration object.