Title and Subtitle
The Telerik UI for ASP.NET Core Chart supports options for configuring the appearance of its title and subtitle.
Setting the Title
The Title property of the Chart accepts a string or a Lambda expression as its parameter. To control the position of the title, use the following available Position options of the Title property:
"Top""Bottom"
@(Html.Kendo().Chart()
.Name("chart")
.Title(title => title.Position(ChartTitlePosition.Top).Text("Site Visitors Stats"))
// Other options.
)
<kendo-chart name="chart">
<chart-title position="ChartTitlePosition.Top" text="Site Visitors Stats"></chart-title>
<!-- Other options.-->
</kendo-chart>
Setting the Subtitle
The Telerik UI for ASP.NET Core Chart supports configuring an additional subtitle by setting the subtitle option.
The following example demonstrates how to configure a subtitle:
@(Html.Kendo().Chart()
.Name("chart")
.Title(title => title.Position(ChartTitlePosition.Top).Text("Site Visitors Stats"))
.Subtitle(subtitle => subtitle.Text("/thousands/"))
// Other options.
)
<kendo-chart name="chart">
<chart-title position="ChartTitlePosition.Top" text="Site Visitors Stats"></chart-title>
<subtitle text="/thousands/"></subtitle>
<!-- Other options.-->
</kendo-chart>
Customizing the Appearance
The Chart supports the following properties which enable you to customize the appearance of its Title:
AlignColorBackgroundBorderFontPadding
@(Html.Kendo().Chart()
.Name("chart")
.Title(t=>t.Text("Site Visitors Stats").Align(ChartTextAlignment.Left).Color("green").Background("grey").Border(1,"green",ChartDashType.Solid).Font("Comic Sans").Padding(30))
// Other options.
)
<kendo-chart name="chart">
<chart-title position="ChartTitlePosition.Top" align="ChartTextAlignment.Left" color="green" background="grey" font="Comic Sans" text="Site Visitors Stats"></chart-title>
<!-- Other options.-->
</kendo-chart>