Area Charts

The Telerik UI Area Chart HtmlHelper for ASP.NET Core is a server-side wrapper for the Kendo UI Area Chart widget.

Area Charts are suitable for displaying quantitative data by using continuous lines passing through points defined by the values of their items.

Getting Started

The portion of the graph beneath the lines is filled with a particular color for each series. The different colors in an Area Chart are useful for emphasizing changes in values coming from several sets of similar data.

To create an Area series in the Chart HtmlHelper, use Area and VerticalArea in the Series configuration.

Configuring the Axes

To configure the axes, use the CategoryAxis and ValueAxis. Multiple value axes are also supported.

@(Html.Kendo().Chart()
    .Name("chart")
    .Title("Internet Users")
    .Legend(legend => legend
        .Position(ChartLegendPosition.Bottom)
    )
    .SeriesDefaults(seriesDefaults =>
        seriesDefaults.Area()
    )
    .Series(series =>
    {
        series.Area(new double[] { 15.7, 16.7, 20, 23.5, 26.6 }).Name("World");
        series.Area(new double[] { 67.96, 68.93, 75, 74, 78 }).Name("United States");
    })
    .CategoryAxis(axis => axis
        .Categories(2005, 2006, 2007, 2008, 2009)
    )
    .ValueAxis(axis => axis
        .Labels(labels => labels.Format("{0}%"))
    )
)

The configuration from the previous example results in the following Area Chart.

A simple Area Chart

Configuring the Line Styles

The Area Charts support the rendering of lines between points by using different styles. You can set the supported styles through the line.style option.

The Area Chart supports the following styles:

  • Normal—The default style. It produces a straight line between data points.
  • Step—The style renders the connection between data points through vertical and horizontal lines. It is suitable for indicating that the value is constant between the changes.
  • Smooth—This style causes the Area Chart to display a fitted curve through data points. It is suitable when the data requires to be displayed with a curve, or when you wish to connect the points with smooth instead of straight lines.

A step-line Area Chart

The following image displays a smooth-line Area Chart.

A smooth-line Area Chart

See Also

In this article
Not finding the help you need? Improve this article