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.
<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>
Was this page helpful?
Yes
No
Thank you for your feedback!
Thank you for your feedback and comments. We will rectify this as soon as possible!
An unknown error has occurred. Please try again.
Help us improve this page