Documentation

Styling and Appearance

To set the jqxBarGauge's size, you need to use the 'width' and 'height' properties. These properties accept number values and percentage values. jqxBarGauge offers many options to customize the BarGauge appearance. In this section we will go through the styling options available in different BarGauge elements. jQWidgets uses a CSS file - jqx.base.css. The base stylesheet creates the styles related to the widget's layout.

jqxBarGauge

Series Color Scheme

jqxBarGauge ships with eleven built-in color schemes which are used to automatically set colors for different series. You can change the color scheme by setting the colorScheme option of the BarGauge.

  • The available values are from 'scheme01' to 'scheme27'.
  • Another option is combination of "colorScheme" with "customColorScheme" property
    • code example: 
      $('#barGauge').jqxBarGauge({ 
          colorScheme: 'customColors',
          customColorScheme: {
              name: 'customColors',
              colors: ["#FFCF5E", "#E83C64", "#50C7E3", "#50ADFF", "#7478FF"]
          }
      });
    • name - sets the name of color scheme that corresponding with set value of "colorScheme" property.
    • colors - sets the array of colors.

Below is the list of CSS classes used by jqxBarGauge.

  • jqxBarGauge Style

  • jqx-bar-gauge-tooltip - applied to jqxBarGauge's tooltip. To control container of the tooltip.

Title and subtitle

To change position of the title, you need to set 'verticalAlignment' property and/or 'horizontalAlignment' property of the title.

$('#barGauge').jqxBarGauge({
    values: [10, 55, 80],
    title: {
        text: 'jqxBarGauge',
        horizontalAlignment: 'left',
        verticalAlignment: 'bottom',
        subtitle: {
            text: '( default demo )',
        }
    },
});

If need to make fine correction of the position of the title, can set 'margin' property of the title. It can also be set and 'font' (for both - title and subtitle) with standard members - 'color', 'family', 'opacity', 'size' and 'weight'.

  • color - sets the color of the text.
  • family - sets the font family of the text.
  • opacity - sets the font opacity of the text.
  • size - sets the size of the text.
  • weight - sets the font weight of the text.

$('#barGauge').jqxBarGauge({
    title: {
        margin: {
            bottom: 0,
            left: 0,
            right: 0,
            top: 0,
        },
        font: {
            color: '#232323',
            family: "'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana",
            opacity: 0.7,
            size: 16,
            weight: 200
        },
        subtitle: { 
            text: 'demo',
            font: {
                color: '#1C2C3C',
                family: "'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana",
                opacity: 1,
                size: 16,
                weight: 200
            }
        }
    },
});

Relative inner radius

To change inner radius of the BarGauge, you need to set 'relativeInnerRadius' property. It describe the ratio between the two radiuses. From zero to one.

$('#barGauge').jqxBarGauge({ values: [10, 55, 80], relativeInnerRadius: 0.7 });

Geometry

To determine the geometry of the BarGauge, you need to set 'geometry' property. With those options 'startAngle' and 'endAngle'. These properties accept number values that describe angles in degrees. 

$('#barGauge').jqxBarGauge({ 
    values: [90, 35, 50, 14], 
    geometry: {
        startAngle: 130, 
        endAngle: -10
    },
 });

Segments

To make fine settings to represent values with different sizes. To determine the segments of the BarGauge, you need to set 'min' property and/or 'max' property.

$('#barGauge').jqxBarGauge({ 
    values: [119, 135, 140, 114, 111], 
    startValue: 110,
    endValue: 140,
});

To represent value with mixed values positive and negative of the BarGauge, you need to set 'min' property with some negative value.

$('#barGauge').jqxBarGauge({ min: -30 });

To change base value of the BarGauge, you need to set 'baseValue' property.

$('#barGauge').jqxBarGauge({ baseValue: 25 });

To change space between the segments in the BarGauge, you need to set 'barSpacing' property.

Animation

To set the animations of the BarGauge, you need to set 'animationDuration' property. Determine time of the animation. In milliseconds (1000 ms = 1 sec). If you don;t wat the widget to be animated - set 'animationDuration' to 0. 

$('#barGauge').jqxBarGauge({ animationDuration: 500 });