Labels in JQuery PivotGauge widget

12 Feb 20185 minutes to read

Adding label collection

The label collection can be added directly to the scales option within the pivot gauge widget as an array.

  • javascript
  • $("#PivotGauge1").ejPivotGauge({
            //...
            scales: [{
                //...
                labels: [{
                    angle: 20
                }]
            }]
        });

    Appearance customization

    The appearance of the label can be customized through the following properties:

    • angle – displays labels in a rotated manner. By default, the value is 0.
    • color – displays the label in a specified color.
    • opacity – sets the opacity of the label. By default, the value is 1.
    • type – indicates the label for major intervals or minor intervals. By default, it takes major intervals.
    • includeFirstValue – includes the initial value based on user’s requirement. By default, the value is true.
    • font – sets the font size, font style, and font family of the label.
  • javascript
  • $("#PivotGauge1").ejPivotGauge({
            //...
            scales: [{
                //...
                labels: [{
                    //customizing major labels
                    type: "major",
                    color: "#1AFF01",
                    opacity: 0.8,
                    includeFirstValue: false,
                    font: {
                        size: "15px",
                        fontFamily: "Arial",
                        fontStyle: "bold"
                    }
                }, 
                {
                    //customizing minor labels
                    type: "minor",
                    color: "#FF103F",
                    opacity: 0.8,
                    includeFirstValue: true,
                    font: {
                        size: "10px",
                        fontFamily: "Arial",
                        fontStyle: "normal"
                    }
                }]
            }]
        });

    AppearanceCustomization

    Unit text

    The unitText property is used to add some text along with labels. Normally, the unit/measurement of the numeric value is indicated through a unit text. By using the unitTextPosition property, the text can be positioned in front or back.

    NOTE

    By default, the text appears at the back.

  • javascript
  • $("#PivotGauge1").ejPivotGauge({
            //...
            scales: [{
                //...
                labels: [{
                    //for Major labels
                    type: "major",
                    unitText: "$",
                    unitTextPosition: "front"
                }, 
                {
                    //for Minor labels
                    type: "minor",
                    unitText: "$",
                    unitTextPosition: "front"
                }]
            }]
        });

    UnitText