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 and offsetY 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 to false.

    @(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.
    )

See Also

• Using the API of the Chart HtmlHelper for ASP.NET MVC (Demo)
• Basic Usage of the Area Chart HtmlHelper for ASP.NET MVC (Demos)
• Basic Usage of the Area Chart TagHelper for ASP.NET MVC (Demo)
• Server-Side API