React BarGauge - Visual Elements

Topics in this section describe various elements of the BarGauge UI component. Each topic gives a detailed overview of the element's purpose and ways of configuring. Below is the element map of the BarGauge UI component. 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 properties 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 property. 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 property.

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

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 properties.

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

These properties are briefly described below.

• Visibility
  Bar labels are displayed by default. To hide them, assign false to the visible property 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 property.

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

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 property of the tooltip object to true.

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

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

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

• Font Settings
  To customize the appearance of the tooltip text, define the font properties 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 properties. Both these properties 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 properties.

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

Several title properties 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 properties. Note that if these properties 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 properties within the font configuration object.