Legend

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>