Title
28 Jun 20174 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.
<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.
<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>