Labels

Adding label collection

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

  • javascript
  • <template>
      <div>
        <ej-pivot-gauge id="pivotGauge"  e-scales.bind= "scales">
        </ej-pivot-gauge>
      </div>
    </template>
  • javascript
  • export class BasicUse {
           constructor() {
              this.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
  • <template>
      <div>
        <ej-pivot-gauge id="pivotGauge"  e-scales.bind= "scales">
        </ej-pivot-gauge>
      </div>
    </template>
  • javascript
  • export class BasicUse {
           constructor() {
              this.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"
                    }
                }]
            }]
        }
     }

    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
  • <template>
      <div>
        <ej-pivot-gauge id="pivotGauge"  e-scales.bind= "scales">
        </ej-pivot-gauge>
      </div>
    </template>
  • javascript
  • export class BasicUse {
           constructor() {
              this.scales: [{
                        //...
                labels: [{
                    //for Major labels
                    type: "major",
                    unitText: "$",
                    unitTextPosition: "front"
                },
                {
                    //for Minor labels
                    type: "minor",
                    unitText: "$",
                    unitTextPosition: "front"
                }]
            }]
        }
     }