Title and Legend
The Telerik UI Chart supports options for configuring the appearance of its title and legend.
Setting the Title
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 \n /thousands/"))
// Other options.
)
Setting the Legend
The Chart legend displays the name of the configured data series.
-
To control the position of the legend, use any of the following supported
Position
values:"Top"
"Bottom"
"Left"
"Right"
"Custom"
@(Html.Kendo().Chart()
.Name("chart")
.Legend(legend => legend.Position(ChartLegendPosition.Bottom))
// Other options.
)
-
To customize the position of the legend, use the
offsetX
andoffsetY
options.
@(Html.Kendo().Chart()
.Name("chart")
.Legend(legend => legend.Position(ChartLegendPosition.Custom).OffsetX(500).OffsetY(200))
// Other options.
)
- To exclude series from the legend, set their
VisibleInLegend
option tofalse
.
@(Html.Kendo().Chart()
.Name("chart")
.Legend(legend => legend.Position(ChartLegendPosition.Top))
.Series(series =>
{
series.Bar(new double[] { 56000, 63000, 74000, 91000, 117000, 138000 }).Name("Total Visits").VisibleInLegend(false);
series.Bar(new double[] { 52000, 34000, 23000, 48000, 67000, 83000 }).Name("Unique visitors");
})
// Other options.
)