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

Series Definition

To define the series you should use the Series(Action<(Of <<'(ChartSeriesFactory<(Of <<'(T>)>>)>)>>)) method:

CopyView

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

In this example we have defined two Bar series bound to properties of the Model.

Series Types

The following series types (chart types) are supported:

Area / Vertical Area Chart
Bar / Column Chart
Line / Vertical Line Chart
Pie Chart
Scatter Chart
Scatter Line Chart

Note
A chart can contain Bar or Column series, but not both. A Pie series can't be used with other series, including other Pie series. Scatter / Scatter Line series can't be used with other series.

Common settings

These settings are available for all series types:

Name(String) method:

CopyView

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

Sets the series name.

Opacity(Double) method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => {
                series.Bar(s => s.RepSales).Color("red").Opacity(0.5);
        })
%>

Sets the opacity for the main visual element of the series (bar, line). The valied values are from 0 (transparent) to 1 (opaque). The default value is 1.

Area settings

Use Area for defining a horizontal area chart or VerticalArea for a vertical one.

Both series accept the following settings:

Color(String) method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => {
                series.Area(s => s.RepSales).Color("#ccff00");
        })
%>

Sets the series base color (CSS syntax).

Line method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => {
                series.Area(s => s.RepSales).Line(line => line.Color("red"))));
        })
%>

Configures the line of the area chart.

[M:Telerik.Web.Mvc.UI.Fluent.ChartAreaSeriesBuilder`1.Line(System.Int32,System.String,Telerik.Web.Mvc.UI.ChartDashType})] method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => {
                series.Area(s => s.RepSales).Line(1, "#000", ChartDashType.Dot));
        })
%>

Configures the area chart line (width, color, dash type).

Stack method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => {
                series.Area(s => s.RepSales).Stack(true);
                series.Area(s => s.TotalSales).Stack(true);
        })
%>

Changes between stacked and clustered series. Either all or no series should be marked as stacked.

Labels method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .Area(s => s.RepSales)
            .Labels(true);
        )
%>

Configures the point labels visibility. The labels are hidden by default.

Labels(Action<(Of <<'(ChartAreaLabelsBuilder>)>>)) method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .Area(s => s.RepSales)
            .Labels(labels => labels
                .Position(ChartPointLabelsPosition.Below)
                .Font("18px Arial, sans-serif")
                .Visible(true)
            );
        )
%>

Configures the area labels. The default position is Above()()()().

Markers method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .Area(s => s.RepSales)
            .Markers(true);
        )
%>

Sets the visibility of area markers. The markers are not visible by default.

Markers method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .Area(s => s.RepSales)
            .Markers(markers => markers
                .Type(ChartMarkerShape.Circle)
                .Size(6)
                .Border(1, "#aa0000")
            );
        )
%>

Configures the area markers.

MissingValues method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .Area(s => s.RepSales)
            .MissingValues(ChartLineMissingValues.Interpolate);
        )
%>

Configures the behavior for handling missing values in area series. By default, the missing values are not plotted. You can choose to interpolate their value or treat them as zero.

Bar/Column settings

The Bar and Column series both accept the following settings:

Color(String) method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => {
                series.Bar(s => s.RepSales).Color("#ccff00");
        })
%>

Sets the series base color (CSS syntax).

Stack method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => {
                series.Bar(s => s.RepSales).Stack(true);
                series.Bar(s => s.TotalSales).Stack(true);
        })
%>

Changes between stacked and clustered series. Either all or no series should be marked as stacked.

Gap method:
CopyView
```
<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .Bar(s => s.RepSales).Gap(1)
        )
%>
```
Sets the distance between categories. Value of 1 means that the distance between categories is equal to one bar width. The default value is 1.5
Setting the Gap on the first series is sufficient for it to take effect.
Spacing method:
CopyView
```
<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .Bar(s => s.RepSales).Spacing(1)
        )
%>
```
Sets the distance between bars in a category. Value of 1 means that the distance between the bars is equal to one bar width. The default value is 0.4
Setting the Spacing on the first series is sufficient for it to take effect.

Labels method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .Bar(s => s.RepSales)
            .Labels(true);
        )
%>

Configures the bar/column labels visibility. The labels are hidden by default.

Labels method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .Bar(s => s.RepSales)
            .Labels(labels => labels
                .Position(ChartBarLabelsPosition.InsideEnd)
                .Font("18px Arial, sans-serif")
                .Visible(true)
            );
        )
%>

Configures the bar/column labels. The OutsideEnd()()()() label position is not applicable for stacked bar/column series.

Overlay method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .Bar(s => s.RepSales).Overlay(ChartBarSeriesOverlay.None)
        )
%>

Sets the bar effects overlay.

The default overlay is Glass()()()().

Border(Int32, String) method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .Bar(s => s.RepSales)
            .Border(2, "Red");
        )
%>

Configures the bar/column border width and color.

Line settings

Line defines a horizontal line chart. Use VerticalLine to switch orientation.

Both series accept the following settings:

Color(String) method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => {
                series.Line(s => s.RepSales).Color("#ccff00");
        })
%>

Sets the series base color (CSS syntax).

[M:Telerik.Web.Mvc.UI.Fluent. SeriesBuilder`1.Width(System.Double)] method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => {
                series.Line(s => s.RepSales).Width(2);
        })
%>

Sets the line width. The default value is 1.

Stack method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => {
                series.Line(s => s.RepSales).Stack(true);
                series.Line(s => s.TotalSales).Stack(true);
        })
%>

Changes between stacked and clustered series. Either all or no series should be marked as stacked.

Labels method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .Line(s => s.RepSales)
            .Labels(true);
        )
%>

Configures the point labels visibility. The labels are hidden by default.

Labels(Action<(Of <<'(ChartLineLabelsBuilder>)>>)) method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .Line(s => s.RepSales)
            .Labels(labels => labels
                .Position(ChartPointLabelsPosition.Below)
                .Font("18px Arial, sans-serif")
                .Visible(true)
            );
        )
%>

Configures the line labels. The default position is Above()()()().

Markers method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .Line(s => s.RepSales)
            .Markers(false);
        )
%>

Sets the visibility of line markers. The markers are visible by default.

Markers method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .Line(s => s.RepSales)
            .Markers(markers => markers
                .Type(ChartMarkerShape.Circle)
                .Size(6)
                .Border(1, "#aa0000")
            );
        )
%>

Configures the line markers.

MissingValues method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .Line(s => s.RepSales)
            .MissingValues(ChartLineMissingValues.Interpolate);
        )
%>

Configures the behavior for handling missing values in line series. By default, the missing values are not plotted. You can choose to interpolate their value or treat them as zero.

Pie settings

The Pie series accept the following settings:

Labels method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .Pie("RepSales", "DateString")
            .Labels(true);
        )
%>

Configures the pie labels visibility. The labels are hidden by default.

Labels method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .Pie("RepSales", "DateString")
            .Labels(labels => labels
                .Font("18px Arial, sans-serif")
                .Visible(true)
            );
        )
%>

Configures the pie labels.

StartAngle method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .Pie("RepSales", "DateString")
            .StartAngle(90);
        )
%>

Configures the start angle of the first pie segment (0-360 degrees).

Padding method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .Pie("RepSales", "DateString")
            .Padding(100);
        )
%>

Configures the padding around the pie chart (in pixels).

Border method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .Pie("RepSales", "DateString")
            .Border(1, "#000", ChartDashType.Dot);
        )
%>

Configures the pie segment border (width, color, dash type).

Overlay method:
CopyView
```
<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Overlay(ChartPieSeriesOverlay.None)
%>
```
Configures the pie segment effects overlay. Possible values:
- None - no overlay.
- SharpBevel - bevel with sharp edge.
- RoundBevel - bevel with round edge.

Scatter settings

The Scatter series accept the following settings:

Labels(Boolean) method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .Scatter("X", "Y")
            .Labels(true);
        )
%>

Configures the point labels visibility. The labels are hidden by default.

Labels(Action<(Of <<'(ChartPointLabelsBuilder>)>>)) method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .Scatter("X", "Y")
            .Labels(labels => labels
                .Font("18px Arial, sans-serif")
                .Visible(true)
            );
        )
%>

Configures the point labels.

Markers(Boolean) method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .Scatter("X", "Y")
            .Markers(false);
        )
%>

Sets the visibility of point markers. The markers are visible by default.

Markers(Action<(Of <<'(ChartMarkersBuilder>)>>)) method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .Scatter("X", "Y")
            .Markers(markers => markers
                .Type(ChartMarkerShape.Circle)
                .Size(6)
                .Border(1, "#aa0000")
            );
        )
%>

Configures the point markers.

Scatter line settings

The Scatter line series accept the following settings:

Labels(Boolean) method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .ScatterLine("X", "Y")
            .Labels(true);
        )
%>

Configures the point labels visibility. The labels are hidden by default.

Labels(Action<(Of <<'(ChartPointLabelsBuilder>)>>)) method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .ScatterLine("X", "Y")
            .Labels(labels => labels
                .Font("18px Arial, sans-serif")
                .Visible(true)
            );
        )
%>

Configures the point labels.

Markers(Boolean) method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .ScatterLine("X", "Y")
            .Markers(false);
        )
%>

Sets the visibility of point markers. The markers are visible by default.

Markers(Action<(Of <<'(ChartMarkersBuilder>)>>)) method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .ScatterLine("X", "Y")
            .Markers(markers => markers
                .Type(ChartMarkerShape.Circle)
                .Size(6)
                .Border(1, "#aa0000")
            );
        )
%>

Configures the point markers.

Width(Action<(Of <<'(Double>)>>)) method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .ScatterLine("X", "Y")
            .Width(1);
        )
%>

Sets the line width.

DashType(Action<(Of <<'(ChartDashType>)>>)) method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .ScatterLine("X", "Y")
            .DashType(ChartDashType.Dot);
        )
%>

Sets the line dash type. The available types are:

MissingValues method:

CopyView

<%= Html.Telerik().Chart(Model)
        .Name("chart")
        .Series(series => series
            .ScatterLine(s => s.x, s => s.y)
            .MissingValues(ChartScatterLineMissingValues.Interpolate);
        )
%>

Configures the behavior for handling missing values in scatter line series. By default, the missing values are not plotted. You can choose to interpolate their value.

Telerik Extensions for ASP.NET MVC

Series Definition

Series Types

Common settings

Area settings

Bar/Column settings

Line settings

Pie settings

Scatter settings

Scatter line settings