Telerik Extensions for ASP.NET MVC

This topic shows how to use the Chart UI component in an ASP.NET MVC application.


All Telerik UI components need a ScriptRegistrar component in order to output their JavaScript objects and register their JavaScript files. The ScriptRegistrar component should be defined *after* all other UI components in the page. If you create the components on the client-side and do not use the MVC extensions, you need to manually register all requried JavaScript files. For further information check this help topic (Step 4 - Register Scripts)


Before proceeding make sure that:
  • You have all the required components installed.
  • Make sure that your ASP.NET MVC project refers the Telerik.Web.Mvc.dll assembly and you have a ScriptRegistrar and a StyleSheetRegistrar defined in your application (either in the master page or in the view where you are going to use the Upload UI component).
  • All required JavaScript and CSS files are properly copied to your project. This is outlined in here - steps 4 and 5.


The Chart component uses modern browser technologies to deliver high-quality data visualizations.

All graphics are rendered on the client using SVG with a fallback to VML for legacy browsers.


  • Bar Chart
  • Column Chart
  • Line Chart
  • Pie Chart
  • Scatter Chart
  • Scatter Line Chart
  • Nineteen built-in themes
  • Standards based, no plug-ins required

Chart Declaration

The following example shows how to setup a simple Bar Chart with inline data.

Bar Chart

  1. Declare the control in the Index view.

    <%= Html.Telerik().Chart()
            .Title(title => title
                .Text("Representative Sales vs. Total Sales")
            .Series(series => {
                series.Bar(new int[] { 2015, 6003, 6881 }).Name("Representative Sales");
                series.Bar(new int[] { 15458, 26598, 27623 }).Name("Total Sales");
            .CategoryAxis(axis => axis
                .Categories(new string[] { "Aug 2010", "Sept 2010", "Oct 2010" })
    • Name is used to specify the unique name of the Chart component. It is used to set the id HTML attribute. Setting the name is mandatory and exception would be thrown otherwise.
    • Title sets the optional chart title. It can be positioned either at the top or the bottom of the chart.
    • The Series are defined with inline data points. Each series can also be bound to a model property.
    • The CategoryAxis is configured to display labels for each category. Categories can be declared in-line or bound to a model property.
  2. Build and run the application.

Next Steps

See Also