Chart Title & Subtitle
28 Jun 20178 minutes to read
Title
By using the title option, you can add the e-title-text as well as customize its e-title-border, e-title-background and e-title-font.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="ChartApp">
<head>
<title>Essential Studio for AngularJS: Chart</title>
<!--CSS and Script file References -->
</head>
<body ng-controller="ChartCtrl">
<div id="container" ej-chart e-title-text= "Efficiency of oil-fired power production"
e-title-background="lightblue" e-title-border-color="blue" e-title-border-width="2"
e-title-border-opacity="0.5" e-title-border-cornerradius="4" e-title-font-fontfamily="Arial"
e-title-font-fontstyle="italic" e-title-font-fontweight="normal" e-title-font-size="23px" >
</div>
<script>
angular.module('ChartApp', ['ejangular'])
.controller('ChartCtrl', function ($scope) {
});
</script>
</body>
</html>
We can trim, wrap and wrapAndTrim to the chart title using textOverflow property. The original text will be displayed as tooltip on mouse hover.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="ChartApp">
<head>
<title>Essential Studio for AngularJS: Chart</title>
<!--CSS and Script file References -->
</head>
<body ng-controller="ChartCtrl">
<div id="container" ej-chart e-title-text= "Efficiency of oil-fired power production"
e-title-enabletrim="true" e-title-maximumwidth="15" e-title-textoverflow="trim" >
</div>
<script>
angular.module('ChartApp', ['ejangular'])
.controller('ChartCtrl', function ($scope) {
});
</script>
</body>
</html>
Title Alignment
You can change the title alignment to center, far and near by using the e-title-textAlignment property of the chart title.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="ChartApp">
<head>
<title>Essential Studio for AngularJS: Chart</title>
<!--CSS and Script file References -->
</head>
<body ng-controller="ChartCtrl">
<div id="container" ej-chart e-title-text= "Efficiency of oil-fired power production"
e-title-textalignment="near">
</div>
<script>
angular.module('ChartApp', ['ejangular'])
.controller('ChartCtrl', function ($scope) {
});
</script>
</body>
</html>
Add Subtitle to the chart
By using the subTitle option, you can add the e-title-subTitle to the chart title and customize its e-title-subtitle-border, e-title-subtitle-background color and e-title-subtitle-font.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="ChartApp">
<head>
<title>Essential Studio for AngularJS: Chart</title>
<!--CSS and Script file References -->
</head>
<body ng-controller="ChartCtrl">
<div id="container" ej-chart e-title-subtitle-text= "( in a week )"
e-title-subtitle-background="lightblue"
e-title-subtitle-border-color="blue" e-title-subtitle-border-width="2"
e-title-subtitle-border-opacity="0.5" e-title-subtitle-border-cornerradius="4"
e-title-subtitle-font-fontfamily="Arial" e-title-subtitle-font-fontstyle="italic"
e-title-subtitle-font-fontweight="normal" e-subtitle-title-font-size="23px" >
</div>
<script>
angular.module('ChartApp', ['ejangular'])
.controller('ChartCtrl', function ($scope) {
});
</script>
</body>
</html>
We can trim, wrap and wrapAndTrim to the chart subtitle using textOverflow property. The original text will be displayed as tooltip on mouse hover.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="ChartApp">
<head>
<title>Essential Studio for AngularJS: Chart</title>
<!--CSS and Script file References -->
</head>
<body ng-controller="ChartCtrl">
<div id="container" ej-chart e-title-subtitle-text= "( in a week )"
e-title-subtitle-enabletrim="true" e-title-subtitle-maximumwidth="50"
e-title-subtitle-textoverflow="wrap" >
</div>
<script>
angular.module('ChartApp', ['ejangular'])
.controller('ChartCtrl', function ($scope) {
});
</script>
</body>
</html>
Subtitle Alignment
You can change the subtitle alignment to center, far and near by using the e-title-subtitle-textAlignment property of the subTitle.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="ChartApp">
<head>
<title>Essential Studio for AngularJS: Chart</title>
<!--CSS and Script file References -->
</head>
<body ng-controller="ChartCtrl">
<div id="container" ej-chart e-title-subtitle-text= "( in a week )"
e-title-subtitle-textalignment="center" >
</div>
<script>
angular.module('ChartApp', ['ejangular'])
.controller('ChartCtrl', function ($scope) {
});
</script>
</body>
</html>