100% Stacked Area Chart

In this article, we will explain how to create and customize a 100% Stacked area chart. So let's get started!

A 100% stacked area chart is a graphical representation of data that uses multiple series of data points connected by straight lines and is filled in with a color or pattern. The area between the line and the x-axis is filled in to create a visual representation of the data, and the data series are stacked on top of each other to show the contribution of each series to the total. In a 100% stacked area chart, the y-axis is scaled so that the sum of all the data series is equal to 100%, allowing you to compare the relative size of each data series.

Example: Sales by product category over time

In this example, a 100% stacked area chart is used to show the trend in sales by product category over a period of time (e.g. months or years). The x-axis represents time, and the y-axis is scaled so that the sum of all the data series is equal to 100%. The chart includes three data series: sales of electronics (represented by a solid line and filled area), sales of clothing (represented by a dashed line and filled area), and sales of home goods (represented by a dotted line and filled area). The data series are stacked on top of each other to show the contribution of each category to the total sales.

Sample data:

Time PeriodSales - Electronics (\$)Sales - Clothing (\$)Sales - Home Goods (\$)

Jan 2020

100,000

50,000

25,000

Feb 2020

110,000

55,000

30,000

Mar 2020

120,000

60,000

35,000

Apr 2020

130,000

65,000

40,000

May 2020

140,000

70,000

45,000

Jun 2020

150,000

75,000

50,000

How-to build a 100% stacked area chart?

1. Navigate to Add New Chart screen

2. Configure and customize the chart to create the desired visualization.

100% Stacked area chart configuration:

1) The configuration shown illustrates how to map the time period on the x axis and the sales on the y axis in order to generate the line chart.

2) To customize the appearance of an area chart, follow these steps:

1. Click on the "Customize" tab

2. Go to "Series" and select the desired data series

3. Select the desired customization options, such as color, line type, line thickness, point shape, point size, data points, dual axes representation, and more

This allows you to tailor the appearance of the chart to your specific needs and preferences. You can customize a variety of options to create a chart that effectively communicates your data and insights.

100% stacked area charts are often used to show the relative size of each data series and how it changes over time. They can be particularly useful when you want to compare the contribution of each data series to the total and see how it changes over time. Some useful tips for creating 100% stacked area charts include:

• Clearly label the x-axis and y-axis, including units of measurement if applicable

• Use a legend to label multiple data series on the same chart

• Use a clear and concise title to describe the data being displayed

• Avoid cluttering the chart with too much data or unnecessary elements

• Use a meaningful and appropriate time scale for the x-axis (e.g. days, weeks, months, years)

• Use different line styles and fill patterns

100% Stacked area chart customization options:

Infinity offers many customization options for your chart. To access these options, click on the customize tab in the chart builder screen. This will display a list of customization options.

Here is a list of notable customization options for the line chart.

FeatureDescription

Aggregation

To create an aggregation, click on the data series chip in the data mapping section and choose the desired aggregation.

There are various aggregation options available based on the data type.

Renaming the Data Series

To rename a data series, click on the data series chip in the data mapping section. A pop-up will appear, allowing you to change the name and any aggregation options.

Dual Axes or Right hand Axes

To enable dual axes, follow these steps:

• Click on the customization tab.

• Click on series.

Titles

To change the titles, follow these steps:

• Click on the customization tab.

• Click on the horizontal (or) vertical axes.

• Proceed to change the titles.

Chart Background

To change the chart background, follow these steps:

• Click on the customization tab.

• Click on the chart background.

• Proceed to selecting the desired color.

• Click on the customization tab.

• Click on the padding and zoom accordion.

• Proceed to customize the padding and zoom attributes for your chart.

Legend

To customize the legend, follow these steps:

• Click on the customization tab.

• Click on the legend accordion.

• The platform offers four legend options: top, bottom, right, or none.

• You can also configure the legend font here.

Axes

To customize the axes, follow these steps:

• Click on the customize tab.

• Select the desired axes (horizontal for X, vertical for Y, and right vertical for secondary Y).

• Proceed to changing the title, fonts, labels, order of axes, scale, or even add formatting such as \$ or %.

Gridlines

To change the grid lines, follow these steps:

• Click on the customize tab.

• Select the gridlines accordion.

• Select the orientation (i.e. vertical or horizontal).

Last updated