Telerik Extensions for ASP.NET MVC

The appearance of the Telerik Chart for ASP.NET MVC is controlled with style properties. This is in contrast with the other components in the suite that use CSS for styling.

The Chart comes with 18 pre-defined style sets, called Themes. They match the skins supplied for the rest of the components.

Chart Structure

Chart Structure

The main building blocks of the chart are:

  1. Title
  2. Legend
  3. Chart Area
  4. Plot Area
  5. Axes
  6. Series

Setting a Theme

The chart theme can be set with the Theme method:

CopyView
<%= Html.Telerik().Chart(Model)
    .Name("chart")
    .Theme("Black")
    .Series(series => {
            series.Bar(s => s.RepSales).Name("Representative Sales");
    })
%>
Available themes:
  • black
  • default
  • forest
  • hay
  • metro
  • office2007
  • office2010black
  • office2010blue
  • office2010silver
  • outlook
  • simple
  • sitefinity
  • sunset
  • telerik
  • transparent
  • vista
  • web20
  • webblue
  • windows7
Note
The theme name is case-insensitive.

Configuring the Title

The chart title can be set with the Title method:

CopyView
<%= Html.Telerik().Chart(Model)
    .Name("chart")
    .Title("Chart Title")
    .Series(series => {
            series.Bar(s => s.RepSales).Name("Representative Sales");
    })
%>

Detailed appearence settings can be applied using the Title builder:

CopyView
<%= Html.Telerik().Chart(Model)
    .Name("chart")
    .Title(title => title
        .Text("Chart Title")
        .Position(ChartTitlePosition.Bottom)
    )
    .Series(series => {
            series.Bar(s => s.RepSales).Name("Representative Sales");
    })
%>

Configuring the Legend

The chart legend is shown by default. It can be hidden with the Legend method:

CopyView
<%= Html.Telerik().Chart(Model)
    .Name("chart")
    .Legend(false)
    .Series(series => {
            series.Bar(s => s.RepSales).Name("Representative Sales");
    })
%>

Detailed appearence settings can be applied using the Legend builder:

CopyView
<%= Html.Telerik().Chart(Model)
    .Name("chart")
    .Title(title => title
        .Text("Chart Title")
        .Position(ChartTitlePosition.Bottom)
    )
    .Series(series => {
            series.Bar(s => s.RepSales).Name("Representative Sales");
    })
%>

Configuring the Chart Area

Detailed appearence settings can be applied using the ChartArea builder:

CopyView
<%= Html.Telerik().Chart(Model)
    .Name("chart")
    .ChartArea(area => area
        .Background("#ccff00")
        .Border(1, "red")
    )
    .Series(series => {
            series.Bar(s => s.RepSales).Name("Representative Sales");
    })
%>

Configuring the Plot Area

Detailed appearence settings can be applied using the PlotArea builder:

CopyView
<%= Html.Telerik().Chart(Model)
    .Name("chart")
    .PlotArea(area => area
        .Background("#ccff00")
        .Border(1, "red")
    )
    .Series(series => {
            series.Bar(s => s.RepSales).Name("Representative Sales");
    })
%>

Configuring transitions

The Chart uses animated transitions to display new and updated data. These transitions can be disabled through the Transitions method:

CopyView
<%= Html.Telerik().Chart(Model)
    .Name("chart")
    .Series(series => {
            series.Bar(s => s.RepSales).Name("Representative Sales");
    })
    .Transitions(false)
%>

See Also

Other Resources