Area Charts

The Kendo UI Area Chart HtmlHelper for ASP.NET Core is suitable for displaying quantitative data by using continuous lines passing through points defined by the values of their items.

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.

Configuration

To define an Area Chart, use Area and VerticalArea.

Axes

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

Example
@(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.

Figure 1: A sample Area Chart

Area Chart

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 supported styles are:

  • Normal—This is 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.

Figure 2: A step-line Area Chart

Step Line Chart

Figure 3: A smooth-line Area Chart

Smooth Line Chart

See Also

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