Telerik UI for Windows 8 HTML

Area series visualize data as a portion of the Cartesian coordinate system. Categories are laid out on the X-axis, while values go on the Y-axis.

chart-area-series

Defining an Area Series Declaratively

To define an area series in the HTML, add an object with type property set to "area" to the series array.

HTML Copy imageCopy
<div id="declarativeAreaSeriesChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{ 
            type: 'area', 
            name: 'World', 
            data: [16.7, 20, 15.7, 26.6, 23.5] 
        }
    ]
}">
</div>

Defining an Area Series Programmatically

To programmatically add an area series to a chart, create a new Telerik.UI.Chart.AreaSeries object and add it to the Telerik.UI.RadChart.series array. Finally, call refresh() to have the changes take effect:

JavaScript Copy imageCopy
var areaSeriesChartCtrl = new Telerik.UI.RadChart(document.getElementById("areaSeriesChart"));
var areaSeries = new Telerik.UI.Chart.AreaSeries();
areaSeries.data = [16.7, 20, 15.7, 26.6, 23.5];
areaSeriesChartCtrl.series.push(areaSeries);
areaSeriesChartCtrl.refresh();

Configuring Area Series

Apart from the common configuration settings listed in this article, there a few more specific configuration settings that you can use to customize the look and behavior of the Area series.

Line Settings

The line property gets the line setting for the area series. It exposes three options for customizing the border line of the rendered area: color, opacity, width.

The line property gets the line setting for the area series. It exposes three options for customizing the border line of the rendered area: color, opacity, width and style. The style option has three possible values — "normal", "smooth" and "step". The option's default value is "normal".

Example:

Line Settings Example Copy imageCopy
<div id="lineSettingsChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series:[{
        name: 'Example Series',
        type: 'area',
        data: [16.7, 20, 15.7, 26.6, 23.5],
        line: {
            color:'#336699',
            width:10,
            opacity: 0.3
        }
            }]
}">
</div>

The image here shows the result.

Line settings

Customizing Markers

You can set a few options that change what a data point looks like in an Area series by setting the markers property. The options you can set include background, border settings, size, type (circle, square or triangle) and visible.

Customizing Markers Example Copy imageCopy
<div id="markersSettingsChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series:[{
        name: 'Example Series',
        type: 'area',
        data: [16.7, 20, 15.7, 26.6, 23.5],
        markers: {
            type: 'triangle',
            background: '#fff',
            size:10,
            border:{
                width:1
            }
        }
    }]
}">
</div>
Markers settings

Handling Missing Values

There are three different options to handle missing values in your chart when using Area series. They are presented by the missingValues property, which accepts the following values:

  • gap: The line stops before missing point and continues after it (default value).

  • interpolate: The value is interpolated from neighboring points

  • zero: The value is assumed to be zero.

In the example below,the missing value is assumed to be zero:

Missing values Copy imageCopy
<div id="missingValuesChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series:[{
        name: 'Example Series',
        type: 'area',
        missingValues: 'zero',
        field: 'value'
    }],
    dataSource: {
        data:[{
                value: 40,
                category: 'Apples'
            }, 
            {
                category: 'Pears',
            },
            {
                value: 20,
                category: 'Peaches'
            },
            {
                value: 60,
                category: 'Oranges'
        }]
    }
}">
</div>

This chart shows the missingValues property set to zero:

Handling missing values

See Also

Other Resources