Telerik Extensions for ASP.NET MVC

This help topic shows how to configure the axes rendered by Telerik Chart for ASP.NET MVC.

Categorical charts

Categorical charts such as Bar, Column and Line use one category axis and one or more value axes. The orientation of each axis is inferred from the series type.

Category Axis

To configure the category axis you should use the

  • CategoryAxis(Action<(Of <<'(ChartCategoryAxisBuilder<(Of <<'(T>)>>)>)>>)) method:

    CopyView
    <%= Html.Telerik().Chart(Model)
            .Name("chart")
            .CategoryAxis(axis => axis
                .Categories(s => s.DateString)
            )
            .Series(series => {
                series.Bar(s => s.TotalSales).Name("Total Sales");
            })
    %>

    In this example we have bound the categories to the DateString property of the Model. Categories can also be bound to an IEnumerable.

Value Axis

The Chart currently supports only one value axis type - Numeric.

ValueAxis(Action<(Of <<'(ChartValueAxisFactory<(Of <<'(T>)>>)>)>>)) method:

CopyView
<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .ValueAxis(a => a.Numeric().Min(0).Max(100))
        .Series(series => {
            series.Bar(s => s.Sales).Name("Sales");
    })
%>

Here, we have configured a Numeric axis with a minimum value of 0 and a maximum value of 100.

Multiple value axes

A chart might have more than one value axis. These additional axes must have unique names. Series are associated to a value axis by specifying its name.

CopyView
<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .ValueAxis(a => a.Numeric().Min(0).Max(100))
        .ValueAxis(a => a.Numeric("secondary").Min(0).Max(1000))
        .Series(series => {
            series.Bar(s => s.Sales).Name("Sales");
            series.Bar(s => s.TotalSales).Axis("secondary").Name("Total Sales");
    })
%>

Here we have defined a "secondary" axis and associated the second series to it.

Axis Crossing Value(s)

You can control the arrangement of the value axes by specifying the values (category indicies) at which they cross the category axis.

CopyView
<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .CategoryAxis(axis => axis
            .AxisCrossingValue(0, 100)
        )
        .ValueAxis(axis => axis
            .Numeric().Title("miles")
        )
        .ValueAxis(axis => axis
            .Numeric("mpg").Title("miles per gallon")
        )
    })
%>

The first value axis will cross the category axis at the first category (leftmost). The second value axis will cross it at the last category provided that the total number of categories is less than 100.

Chart Axis Crossing Value

XY Charts

XY charts such as Scatter and Scatter Line use one or more X and Y axes. The axes are configured using:

  • XAxis(Action<(Of <<'(ChartNumericAxisBuilder>)>>)) and the YAxis(Action<(Of <<'(ChartNumericAxisBuilder>)>>)) methods:

    CopyView
    <%= Html.Telerik().Chart(Model)
            .Name("chart")
            .XAxis(x => x.Min(0).Max(100))
            .YAxis(y => y.Min(1000).Max(5000))
            .Series(series => {
                    series.Scatter("X", "Y");
            })
    %>

    Here, we have configured a Numeric axis with a minimum value of 0 and a maximum value of 100.

Multiple X/Y axes

You can define more X and Y axes in addition to the primary ones. These additional axes must have unique names. Series are associated to a X and Y axes by specifying their name.

CopyView
<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .YAxis(y => y.Numeric().Title("Power (bhp)"))
        .YAxis(y => y.Numeric("torque").Title("Torque (lb-ft)"))
        .Series(series =>
        {
            series
                .ScatterLine(d => d.RPM, d => d.Power)
                .Name("Power");

            series
                .ScatterLine(d => d.RPM, d => d.Torque)
                .Name("Torque")
                .YAxis("torque");
        })
    })
%>

Here we have defined a "torque" Y axis and associated the second series to it.

Axis Crossing Value(s)

You can control the arrangement of the X and Y axes by specifying the values at which they cross the primary axes.

CopyView
<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .XAxis(x => x
            .Title("Engine rpm")
            .AxisCrossingValue(0, 10000)
        )                                                    
        .YAxis(y => y.Numeric().Title("Power (bhp)"))
        .YAxis(y => y.Numeric("torque").Title("Torque (lb-ft)"))
        .Series(series =>
        {
            series
                .ScatterLine(d => d.RPM, d => d.Power)
                .Name("Power");

            series
                .ScatterLine(d => d.RPM, d => d.Torque)
                .Name("Torque")
                .YAxis("torque");
        })
%>

The primary Y axis will cross the X axis at 0 (leftmost). The "torque" Y axis will cross the X axis at the 10000 mark or at its right end, whichever is first.

Chart Axis Crossing ValueXY

Common features

Title

A title can be added to clearly indicate the role of the axis.

Example:

CopyView
<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .CategoryAxis(axis => axis
            .Categories(s => s.DateString)
            .Title("Reporting period")
        )
        .Series(series => {
            series.Bar(s => s.TotalSales).Name("Total Sales");
        })
%>

Chart Axis Title

Plot Bands

Each axis can be configured to display bands with different colors for pre-defined value ranges.

The category index (zero based) is used as a value for the category axis.

Example:

CopyView
<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .CategoryAxis(axis => axis
            .Categories(s => s.DateString)
            .PlotBands(pb => pb.Add()
                .From(2).To(3)
                .Color("#ddd")
                .Opacity(0.5)
            )
        )
        .Series(series => {
            series.Bar(s => s.TotalSales).Name("Total Sales");
        })
%>

Highlights the 3rd category by creating a plot band from the 3rd to the 4th category mark. The plot band has grey background with 50% opacity.

Chart Axis Plot Bands

See Also

Other Resources