Legend

28 Jun 201712 minutes to read

Legend Visibility

You can enable or disable legend using the visible property inside the e-legend object. By default, legend is enabled in PivotChart.

NOTE

By default, the legend is visible in PivotChart.

HTML

<body>
    <div ng-controller="PivotChartCtrl">
        <div id="PivotChart1" ej-pivotchart e-legend="legend"/>
    </div>
    <script>
        angular.module('PivotChartApp', ['ejangular']).controller('PivotChartCtrl', function ($scope) {
            ///..
            $scope.legend = {
                //Legend Visibility 
                visible: true
            };
        });
    </script>
</body>

Legend Shape

You can customize the legend shape in PivotChart widget. Default value of legend shape is “Rectangle”. Following legend shapes that are supported:

Rectangle
Circle
Cross
Diamond
Pentagon
Hexagon
Star
Ellipse
Triangle etc.

HTML

<body>
    <div ng-controller="PivotChartCtrl">
        <div id="PivotChart1" ej-pivotchart e-legend="legend"/>
    </div>
    <script>
        angular.module('PivotChartApp', ['ejangular']).controller('PivotChartCtrl', function ($scope) {
            ///..
            $scope.legend = {
                //Legend Visibility 
                visible: true,
                //Applying Legend Shape
                shape: "Star"
            };
        });
    </script>
</body>

Legend Position

By using the position property, you can place the legend at top, bottom, left or right of the PivotChart.

NOTE

Default value of legend position is “bottom” in PivotChart.

JAVASCRIPT

<body>
    <div ng-controller="PivotChartCtrl">
        <div id="PivotChart1" ej-pivotchart e-legend="legend"/>
    </div>
    <script>
        angular.module('PivotChartApp', ['ejangular']).controller('PivotChartCtrl', function ($scope) {
            ///..
            $scope.legend = {
                //Legend Visibility 
                visible: true,
                //To place the legend at top of the Chart
                position: "top"
            };
        });
    </script>
</body>

Legend Title

To add the legend title, you have to specify the title text in title.text property.

HTML

<body>
    <div ng-controller="PivotChartCtrl">
        <div id="PivotChart1" ej-pivotchart e-legend="legend"/>
    </div>
    <script>
        angular.module('PivotChartApp', ['ejangular']).controller('PivotChartCtrl', function ($scope) {
            ///..
            $scope.legend = {
                //Legend Visibility 
                visible: true,
                //Add title to the Chart legend
                title: {
                    text: "Countries"
                }   
            };
        });
    </script>
</body>

Legend Alignment

You can align the legend to center, far and near based on its position in the Chart area using the alignment option.

HTML

<body>
    <div ng-controller="PivotChartCtrl">
        <div id="PivotChart1" ej-pivotchart e-legend="legend"/>
    </div>
    <script>
        angular.module('PivotChartApp', ['ejangular']).controller('PivotChartCtrl', function ($scope) {
            ///..
            $scope.legend = {
                //Legend Visibility 
                visible: true,
                //Aligning the legend near to the Chart
                alignment: "Near"
            };
        });
    </script>
</body>

Legend Items - Size and Border

By using the legend itemStyle.width, itemStyle.height and itemStyle.border properties, you can change the legend items - size and border.

HTML

<body>
    <div ng-controller="PivotChartCtrl">
        <div id="PivotChart1" ej-pivotchart e-legend="legend"/>
    </div>
    <script>
        angular.module('PivotChartApp', ['ejangular']).controller('PivotChartCtrl', function ($scope) {
            ///..
            $scope.legend = {
                //Legend Visibility 
                visible: true,
                //Changing legend items border, height and width
                itemStyle: {
                    height: 12,
                    width: 12,
                    border:
                    {
                        color: 'magenta',
                        width: 1.5
                    }
                }
            };
        });
    </script>
</body>

Legend Border

By using the border option in legend, you can customize border color and width.

HTML

<body>
    <div ng-controller="PivotChartCtrl">
        <div id="PivotChart1" ej-pivotchart e-legend="legend"/>
    </div>
    <script>
        angular.module('PivotChartApp', ['ejangular']).controller('PivotChartCtrl', function ($scope) {
            ///..
            $scope.legend = {
                //Legend Visibility 
                visible: true,
                //Setting border color and width to legend
                border: {
                    color: "#FFC342",
                    width: 2
                }
            };
        });
    </script>
</body>

Legend Text

By using the font option, you can customize the font family, font style, font weight and size of the legend text.

HTML

<body>
    <div ng-controller="PivotChartCtrl">
        <div id="PivotChart1" ej-pivotchart e-legend="legend"/>
    </div>
    <script>
        angular.module('PivotChartApp', ['ejangular']).controller('PivotChartCtrl', function ($scope) {
            ///..
            $scope.legend = {
                //Legend Visibility 
                visible: true,
                //Customizing the legend text
                font:
                {
                    fontFamily: 'Segoe UI',
                    fontStyle: 'italic',
                    fontWeight: 'bold',
                    size: '13px'
                }
            };
        });
    </script>
</body>