Title

28 Jun 2017 / 4 minutes to read

Title Text

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

<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>