Category / Section
How to customize the font size, font style and text alignment of PivotChart title?
This KB illustrates that how to customize PivotChart title.
Solution:
You can customize the font size, font style and text alignment of PivotChart title by using the following code examples.
JS
$(function () {
$("#PivotChart1").ejPivotChart({
url: "../wcf/OlapChartService.svc", title: {
text: "PivotChart in Essential Studio"
}, load: "load"
});
});
function load(args) {
this.model.title.font.size = "30px",
this.model.title.font.fontStyle = "italic",
this.model.title.font.fontWeight = "bold",
this.model.title.textAlignment = "center"
}
MVC
@Html.EJ().Pivot().PivotChart("PivotChart1").Url("../wcf/OlapChartService.svc").Title(title => title.Text("PivotChart in Essential Studio")).ClientSideEvents(oEve => { oEve.Load("load"); })
<script type="text/javascript">
function load(args) {
this.model.title.font.size = "30px",
this.model.title.font.fontStyle = "italic",
this.model.title.font.fontWeight = "bold",
this.model.title.textAlignment = "center"
}
</script>
ASP.NET
<ej:PivotChart ID="PivotChart1" runat="server" Url="../wcf/OlapChartService.svc" title-text="PivotChart in Essential Studio">
<ClientSideEvents Load="load" />
</ej:PivotChart>
<script type="text/javascript">
function load(args) {
this.model.title.font.size = "30px",
this.model.title.font.fontStyle = "italic",
this.model.title.font.fontWeight = "bold",
this.model.title.textAlignment = "center"
}
</script>
