New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Range Area Charts

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

The Range Area chart displays a range between a lower and higher value for each data point. This chart type is useful for comparing the low and high levels of value ranges, for example, working time, blood glucose levels per day, average minimum and maximum temperatures and rainfalls over time.

Getting Started

The following example demonstrates how to configure a basic Range Area Chart.

    @(Html.Kendo().Chart()
        .Name("chart")
        .Title("Average Weather Conditions")
        .Series(series =>
        {
            series.RangeArea(new double[][] {
                new double[] {5, 11}, new double[] {5, 13}, new double[] {7, 15}, new double[] {10, 19}, new double[] {13, 23}, new double[] {17, 28},
                new double[] {20, 30}, new double[] {20, 30}, new double[] {17, 26}, new double[] {13, 22}, new double[] {9, 16}, new double[] {6, 13}
            }).Labels(labels => labels
                .Visible(true)
                .From(from => from.Template("#=value.from# °C"))
                .To(to => to.Template("#=value.to# °C")));
        })
        .CategoryAxis(axis => axis
            .Categories("January", "February", "March", "April", "May", "June",
                        "July", "August", "September", "October", "November", "December")
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Template("Avg Min Temp : #= value.from # °C <br>" +
                      "Avg Max Temp : #= value.to # °C")
        )
    )

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

UI for ASP.NET MVC A sample Range Area Chart

See Also

In this article