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.

See Also

• BarGauge API Reference

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

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.

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.

Bar labels can be tuned using label configuration object options.

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

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.

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

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.

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.

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:

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

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

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.