New to Telerik UI for ASP.NET Core? Download free 30-day trial

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

    <kendo-chart name="chart">
        <chart-title position="ChartTitlePosition.Top" text="Site Visitors Stats \n /thousands/"></chart-title>
        <!-- Other options.-->
    </kendo-chart>

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

    <kendo-chart name="chart">
        <chart-legend position="ChartLegendPosition.Bottom"></chart-legend>
        <!-- Other options.-->
    </kendo-chart>

  • To customize the position of the legend, use the offsetX and offsetY options.

    UI for ASP.NET Core Custom legend position

    @(Html.Kendo().Chart()
        .Name("chart")
        .Legend(legend => legend.Position(ChartLegendPosition.Custom).OffsetX(500).OffsetY(200))
        // Other options.
    )

    <kendo-chart name="chart">
        <chart-legend position="ChartLegendPosition.Custom" offset-x="500" offset-y="200"></chart-legend>
        <!-- Other options.-->
    </kendo-chart>

  • 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.
    )

    @{
        var total_visits = new double[] { 56000, 63000, 74000, 91000, 117000, 138000 };
        var unique_visitors = new double[] { 52000, 34000, 23000, 48000, 67000, 83000 };
    }

    <kendo-chart name="chart">
        <chart-legend position="ChartLegendPosition.Top"></chart-legend>
        <series>
            <series-item type="ChartSeriesType.Bar" name="Total Visits" data="total_visits" visible-in-legend="false">
            </series-item>
            <series-item type="ChartSeriesType.Bar" name="Unique visitors" data="unique_visitors">
            </series-item>
        </series>
        <!-- Other options.-->
    </kendo-chart>

See Also

In this article