Title

Title Text

By using the title.text property, you can add the title text for PivotChart.

  • html
  • <body>
        <div ng-controller="PivotChartCtrl">
            <div id="PivotChart1" ej-pivotchart e-title="title"/>
        </div>
        <script>
            angular.module('PivotChartApp', ['ejangular']).controller('PivotChartCtrl', function ($scope) {
                ///..
                //Adding Chart title
                $scope.title = {
                    text: "PivotChart"
                };
            });
        </script>
    </body>

    Title Alignment

    By using the title.textAlignment property, you can align the PivotChart controls title text to center, far or near.

  • html
  • <body>
        <div ng-controller="PivotChartCtrl">
            <div id="PivotChart1" ej-pivotchart e-title="title"/>
        </div>
        <script>
            angular.module('PivotChartApp', ['ejangular']).controller('PivotChartCtrl', function ($scope) {
                ///..
                //Adding Chart title
                $scope.title = {
                    text: "PivotChart", 
                    //Change title text alignment
                    textAlignment: "near"
                };
            });
        </script>
    </body>

    Title Customization

    By using the title property, you can add the title text for X-axis and Y-axis. Also title text can be customized by using the text and font properties. On setting enableTrim to true, title text could be trimmed based on its length.

  • html
  • <body>
        <div ng-controller="PivotChartCtrl">
            <div id="PivotChart1" ej-pivotchart e-primaryXAxis="primaryXAxis"/>
        </div>
        <script>
            angular.module('PivotChartApp', ['ejangular']).controller('PivotChartCtrl', function ($scope) {
                ///..
                //Adding Chart title
                $scope.primaryXAxis = {
                    //Customizing X-axis title
                    title: {
                        text: "Country",
                        font: {
                            fontFamily: 'Segoe UI',
                            size: '16px',
                            fontWeight: 'bold',
                            color: 'grey',
                        },
                        enableTrim: true
                    }
                };
            });
        </script>
    </body>