Percent Stacked Area Chart

Percent stacked area charts are a visualization used to display the relative contribution of each category within a total over time or across groups, with all areas normalized to 100%. Each stacked layer represents a category’s percentage of the total at each point along the x-axis, making it easy to compare proportional changes across categories.

You can use percent stacked area charts to visualize how each component contributes to the whole while emphasizing proportions rather than absolute values.

You can use percent stacked area charts to display percentage-based comparisons such as the share of revenue by product category across months, the percentage distribution of website traffic by source over time, or the relative contribution of departments to total expenses by quarter.

This topic explains how to create and customize data tables and explains the most frequently used properties. Refer to the reference for all the column chart properties and configuration options.

Create a Percent Stacked Area Chart

To create a percent stacked area chart, click on the Plus (+) button, opening the dropdown from which you can select your chart.

Bind Data to Percent Stacked Area Chart

For a percent stacked area chart, you need to determine the following bindings:

Values (Y-Axis): The quantitative data displayed on the y-axis. Typically, this represents numeric measures such as Sales, Profit, or Quantity.
Axis (Category / X-Axis): The categorical or continuous data displayed on the x-axis. Typically, this represents grouped or sequential categories such as Month, Year, Region, or Product.
Legend (Series): The dimension that defines separate areas within the chart. Each unique value in this field generates an individual stacked area, allowing proportional comparisons between multiple categories.

Once your data source is selected, all data attributes appear in the Data Binding tab. You can drag the following to the binding slots of the chart:

Data attribute: Drag and drop any field from the data source.
Measure: Hover over the data source table name, click the gear icon (⚙), and select Add measure…. Define a name and an expression, click OK, then drag the measure to a binding slot.
Calculated column: Hover over the data source table name, click the gear icon (⚙), and select Add calculated column…. Define your calculation, click OK, then drag it to a binding slot.

Note: To display stacked segments as percentages, you must modify the data label settings in the Inspector Panel.

To display stacked segments as percentages:

Click the gear icon (⚙) next to the Data Binding panel to open the Inspector Panel.
Under Data Labels, set the Value as Percentage toggle item to True to display the value as a percentage on the chart.

Add Aggregations

You can control how data is aggregated and labeled in the chart:

Aggregation method: Click the gear icon (⚙) next to a bound data attribute, and select an aggregation type (e.g., Sum, Average, Count).
Rename data attribute: Click the gear icon (⚙) next to a bound data attribute and select Rename to modify how it appears in the chart.

Set Chart Title

By default, Wyn generates a chart title based on the selected data attributes.

You can modify this title in the Inspector Panel:

Click the gear icon (⚙) next to the Data Binding tab to open the Inspector Panel.
Under Title, type a custom title for your chart.

Note: Once a custom title is entered, changes to the data attributes will no longer automatically update the chart title.

To include more details in the chart’s tooltip, drag one or more data attributes into the Tooltip binding slot.

Tooltips appear when hovering over chart elements, providing contextual details without cluttering the chart area.

Customize Colors

You can adjust the color scheme of your percent stacked area chart in Inspector Panel > Chart Style > Palette.

Choose from:

Theme: A seven-color palette based on your dashboard theme.
Standard: A set of predefined seven-color palettes.
Custom: Define your own palette to match brand colors or visualization standards.

Build a Chart Trellis

A trellis column layout (also known as a small multiples view) creates a set of individual charts arranged horizontally. Each chart represents a subset of the data, determined by the field you assign.

To create a series of trellis column charts, drag a data attribute into the Trellis Columns binding slot. Each unique value in that field generates a separate chart displayed in columns across the dashboard.

A trellis row layout arranges multiple charts vertically, each showing a subset of data for a particular category or group.

To create a series of trellis row charts, drag a data attribute into the Trellis Rows binding slot. Each unique value generates an individual chart displayed in rows down the dashboard.