Custom labels

28 Jun 20176 minutes to read

Adding Custom Label Collection

customLabels collection can be directly added to the scales option within the PivotGauge widget as an array.

JAVASCRIPT

<div ng-controller="PivotGaugeCtrl">
    <div id="PivotGauge1" ej-pivotgauge e-scales="scales" />
</div>
<script>
    var scale= [{
        //..
        customLabels: [{
            position: {
                x: 180,
                y: 290
            }
        }]
    }];
    angular.module('PivotGaugeApp', ['ejangular']).controller('PivotGaugeCtrl', function ($scope) {
        //..
        $scope.scales = scale;
    });
</script>

Appearance Customization

The appearance of the custom labels can be changed through the following properties.

• position – used to set the position of the labels.
• font – sets the font size, font style and font family of the label text.
• color – sets the color of the label text.
• textAngle – rotates the label to a specified angle. By default, the value is 0.

JAVASCRIPT

<script>
    var scale= [{
        //..
        customLabels: [{
            position: {
                x: 180,
                y: 320
            },
            font: {
                size: "12px",
                fontFamily: "Segoe UI",
                fontStyle: "Normal"
            },
            color: "blue",
            textAngle: 20
        }]
    }];
    angular.module('PivotGaugeApp', ['ejangular']).controller('PivotGaugeCtrl', function ($scope) {
        //..
        $scope.scales = scale;
    });
</script>

Multiple Custom Labels

Multiple custom labels can be set to a PivotGauge widget by adding an array of objects within the customLabels option.

JAVASCRIPT

<script>
    var scale= [{
        //..
        customLabels: [{
            color: "Red",
            font: {
            size: "12px",
            fontFamily: "Segoe UI",
            fontStyle: "Normal"
            },
            position: {
                x: 180,
                y: 150
            }
        },{
            color: "Green",
            font: {
            size: "10px",
            fontFamily: "Segoe UI",
            fontStyle: "Normal"
            },
            position: {
                x: 180,
                y: 320
            }
        },{
            color: "Blue",
            font: {
            size: "10px",
            fontFamily: "Segoe UI",
            fontStyle: "Normal"
            },
            position: {
                x: 180,
                y: 290
            }
        }]
    }];
    angular.module('PivotGaugeApp', ['ejangular']).controller('PivotGaugeCtrl', function ($scope) {
        //..
        $scope.scales = scale;
    });
</script>