The area graph presents quantitative data over time, similar to line graph. Each data series (each area) is color coded. Commonly used to compare multi-series data (multiple areas).

The area graph has the following features:

- The X axis must be datetime data, when configuring for the area graph, only SharePoint datetime list column are available for X
- The Y axis must be numeric data (otherwise comparison is impossible), only SharePoint numeric list columns (include currency columns) are available for Y
- The area graph supports multi-series, meaning multiple area can be rendered in the same graph
- The area graph supports live data updates from SharePoint, meaning when the underlying SharePoint list data changes, the graph will gracefully update itself

Here is an example of a single-series area graph **(see below example live)**.

Here is an example of a multi-series area graph **(see below example live):**

## DateTime Grouping

Sometimes instead of plotting datetime data row by row, where each row of data is a dot on the area graph, you want to group datetime data. The visualizer can group datetime data on one of these levels: Year, Quarter, Month, Week, Day, Hour, Minute.

Once datetime data is grouped, the area graph can show one of these values: Minimum, Maximum, Average, Median, Sum, First, Last, Row Count, Unique values.

Consider the following example.

First we have a SharePoint list holding the stock price of Apple Inc from 2007 to 2012.

Now, what if we want to create an area graph, where it shows the “** average stock price quarterly**“? to do so, use the following configuration.

The result as follows (** see the below example live**):

## Visual range

When rendering, the visualizer will determine the visual range on the Y axis from data, from example, if the minimum and maximum value from your data is 20 and 80, respectively, then the area graph’s Y axis will begin at 20 and end at 80.

Users have the option to override this range to be a more inclusive range, in the above example, users can set the range to be, say between 0 and 100.

Please note, the visualizer will **take into account both range user inputted and the data range from data**, and use the most inclusive range.

## Area shape

You can adjust the shape of the area in the configuration panel.

These shapes are supported: