[{"id":"26713f3d-fbf1-4c9c-bdbe-31fb188e7096","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"d9f783e1-612a-4fa7-9408-7f1c821a45fc","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"af5bd81a-b6cd-410b-84b4-9de9c51c3a7d","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"60de5e12-02d9-4fd1-8db5-cb82a6bca160","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"6af12f79-8609-4b30-8be3-d617d0cd7a16","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"86b2a642-0ee8-4605-b04d-e7e0ec019e01","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"aa9c6845-a521-49a8-ba61-f85856865f32","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]}]
Area
plots are suitable for tracking and comparing changes in Data Values
over a period of time. An area plot arranges a period horizontally, encodes data values into points, connects them by line, and fills the area below it with a color.
You could use a clustered area plot to break down data values into subcategories for more granular analysis. For instance, the Clustered Area Demo shows the Net Sales
changes over the year divided into clustered areas per product category.
A stacked area is another way to break down data values into subcategories by placing corresponding area subsections on top of each other. The Stacked Area Demo shows the Net Sales
changes over the year divided into stacked areas per product category.
A percentage stacked area combines the stacked area and the Percentage
axis scale. In addition to changes in data values, it also shows each subcategory's contribution to a total. For instance, the Percentage Stacked Area Demo shows the percentage share of product categories in Net Sales
.
You can configure all these types using the Area
plot template and its properties described in the following sections. The Area Stacked
and Area Percent Stacked
templates are just shortcuts to a specific configuration.
You can use the following demos to explore plot properties - open a link, toggle the Report explorer, select the Plot - Plot 1
node and use the Properties panel to modify the configuration.
You could also download the report files listed below and open them in the Standalone Report Designer.
If you add a chart into a report, set the plot type to Area
on the first page of the Chart Wizard
, and click the Next
button, the wizard shows the Area Settings
page that looks like the following:
The Data Values
section allows you to add one or more Data Values.
The Data Categories
section allows you to set the Category Encoding.
The Data Subcategories
section allows you to configure the Details Encoding.
The Area plot's Values
collection determines data values that change over time. The Chart Wizard displays the Values
collection as Fields
in the Data Values
section. Collection items consist of two properties:
The Value
is usually a bound field reference. The Properties Panel displays the Value
as the collection, but Line
plots take the first item only. The Chart Wizard displays the Value
as Field
.
The Aggregate
is an optional function, such as Count
or Average
, that reduces many field values into a single one.
For instance, all the demos listed above have the Value={SalesAmount}, Aggregate=Sum
Data Value.
The Category Encoding
of an Area
plot is a set of properties that determine the period over which the plot generates connected data points representing those above Data Values
.
The Category
is usually a bound field reference. Bound DataSet Records with the same value of that field fall into the same category. Distinct categories form the period. For instance, all the area plot demos are bound to the Sales DataSet
containing several fields, including the SalesDate
for each data record. The plot's Category
is set to {MonthName(Month(SalesDate))}
expression. Therefore the plot goes through the Sales DataSet
, finds the distinct months from the SalesDate
values, and generates one category per month. If you preview a demo output, you can see 12 months along the horizontal axis.
The Category Sorting
configuration determines the order of the category values appearance. For instance, the demo plots have the Category Sort Expression = {Month(SalesDate)}, Category Sort Direction = Ascending
settings to ensure chronological order.
The Chart Wizard
offers the simplified editor of the Categories Encoding
in the Data Categories
section:
A single Category Expression displayed as Field
is available.
The Sorting
configuration of the Category Encoding displays the Sort direction
property only. The Sort Expression
is automatically set to the same value as the Field
property has.
The Details Encoding
allows you to break down those above Data Values
into subcategories for more granular analysis of changes.
The Details
property of the Area
plot is the collection of items that define these subcategories. Each item includes several properties:
The Values
is usually one or more bound field references. Bound DataSet Records with the same values of these fields fall into the same subcategory. For instance, in the area demos, the plot Details
value is {ProductCategory}
. Consequently, the Net Sales
area breaks down into multiple subsections corresponding to distinct product categories.
The Exclude Nulls
flag indicates whether DataSet Records with an undefined Details Value
should be excluded from the visualization.
The Group
property determines how the plot arranges area subsections.
Stack
- a plot places area subsections on top of each other. You can use this value to configure a Stacked Area
plot.
Cluster
- area subsections overlap each other. The Clustered Area Demo uses this value for the plot details.
None
- equals to Cluster
.
The Sorting
configuration determines the order of subsections appearance.
The Chart Wizard
offers the simplified editor of the Details Encoding
in the Data Subcategories
section:
A single Details Encoding item is available.
A single Value
item displayed as Field
is available.
The Group
property of the Detail Encoding is displayed as Break-down method.
The Sorting
configuration of the Details Encoding displays the Sort direction
property only. The Sort Expression
is automatically set to the Field
value.
The Colors Encoding
enables the color legend of the Details Encoding
and includes the Color
expression and the optional Color Aggregate
function that reduces many Color
values into a single one.
The plot calculates distinct Color Encoding
results for the subcategories produced by the Details Encoding
, converts them to fill color of corresponding areas, and displays the match between colors and encoding results in the legend. Colors come from the Chart Palette.
For instance, the area plot demos use the {ProductCategory}
expression for the Colors Encoding. Consequently, the report output shows the colors legend that matches Product Categories with fill color of corresponding areas.
Note: The Color
property is the collection, but the Area
plot takes the first item only.
The following properties allow you to fine-tune the outfit of shapes that form the Area
plot. You can see their effect in action by modifying the configuration of any area demo.
The Opacity
is a number in percentage that determine the opacity of areas filled with color. 100%
means they are opaque, and 0%
means that they are entirely transparent.
The Line Aspect
property determines the style of the line that connects data points.
Default
means the straight line
Spline
means the bezier curve
Step Center
, Step Left
and Step Right
mean the stepped line with different step directions.
The Show Nulls
property indicates the arrangement of data points for Null
values.
Gaps
means that the plot will not draw a line between a null data point and its previous and next points
Zero
means that null data points will be considered to have 0
value
Connected
means that the plot will connect the previous and the next points of a null point
The Clipping Mode
indicates the manner that the plot area draws a plot:
Fit
value means that the plot area should use all the available space to fit the plot
Clip
value means that the plot area cuts off the plot on the edge of its right or bottom padding
None
value equals to Fit
The line properties in the Style
section determine the appearance of lines that connect data points.
The color expression in the Background
section sets the fill color of areas and overwrites the Color Encoding
described earlier.
Data points can display labels with the following content that you can set up using the Label Text Template
expression.
You can choose one of the following values in the drop-down list.
Value Field Name
usually means the field name bound to a Data Value
.
Value Field Value
means the current Data Value
within the containing Category or Details.
Percentage In Details
means the percentage share of the current Data Value
among all the values with the same Details
.
Percentage In Category
means the percentage share of the current Data Value
among all the values with the same Category
.
Category Field Name
usually means the field name bound to the Category Encoding
.
Category Field Value
means the current Category Encoding
value.
Details Field Name
usually means the field name bound to the Details Encoding
.
Details Field Value
means the current Details Encoding
value.
Color Field Name
usually means the field name bound to the Color Encoding
.
Color Field Value
means the current Color Encoding
value.
Also, you could use the template's Expression Editor to set the formatting for these values using the interpolation syntax and supported format strings. For instance, you can set the Label Text Template
to {valueField.value:C2}
in the Stacked Area Demo to display Net Sales Amount as currency.
A subset of text properties in the Label Text
section and the line properties in the Label Border
section allow you to set up the corresponding visual parameters of the plot labels.
The Label Position
and an optional Offset
in pixels determine the location of labels relative to a parent data point symbol:
Inside
- on the bottom
Outside
- on the top
Center
- on the center
Auto
- equals to Outside
The Overlapping Labels
property indicates the handling of overlapping labels. Possible values are:
Auto
- hides some labels to prevent the overlapping
Show
- shows all labels even if the overlapping persists
The line properties in the Label Line
section allows you to add the connecting lines between labels and their parent data points. The Label Line Position
determines the connection point of a label's bounding box and the line:
Auto
- selected automatically
Center
- on the center of the bounding box side
This group of properties determine the Interactive Action when a report reader clicks inside a filled area. You can use bound field references to pass parameters in a drill-through report or configure a dynamic bookmark or URL. The field value is evaluated in the scope of the current detail. Visit the Drill-Through Reports Walkthrough for more information. It explains how to set up the drill-through column plot, but the same technique is applicable for an area plot.