100% Stacked Stepped Area Chart

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

A 100% stepped stacked area chart is a chart that visualizes multiple series of data as a stacked area chart, with each series represented by a different color. The data is displayed as a series of stacked areas that are connected by steps rather than a continuous line, and the y-axis is scaled to a range of 0 to 100%. This gives the chart a distinctive stepped appearance and makes it easy to see how each series contributes to the total at any given point in time.

Here is an example of a 100% stepped stacked area chart with multiple series:

In this example, a 100% stepped stacked area chart is used to show the trend in fruit sales 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 bananas (represented by a solid line and filled area), sales of apples (represented by a dashed line and filled area), and sales of oranges (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. The lines connecting the data points are angled in a staircase-like fashion.

Sample data:

Date	Sales Bananas	Sales Apples	Sales Oranges
2020-01-01	10	20	30
2020-01-02	15	25	35
2020-01-03	20	30	40
2020-01-04	25	35	45
2020-01-05	30	40	50

How-to build a 100% stacked stepped area chart?

1. Navigate to Add New Chart screen

2. Select data source

3. Select "100% Stacked Stepped Area Chart" type from gallery

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

100% Stacked stepped 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.

PS: You can change the sequence of stack series by changing the order of the series in the data mapping section as shown above.

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% stepped stacked area charts are often used to compare multiple series of data and to visualize how each series contributes to the overall total. They can be particularly useful for showing the relationship between different variables and for highlighting changes in data over time.

There are a few useful tips to keep in mind when using 100% stepped stacked area charts:

1. Make sure to clearly label the chart and include a legend to explain the different series.

2. Use a clear and readable font for the labels and axis ticks to make it easier for readers to understand the chart.

3. Use consistent colors for each series to make it easier to differentiate between the different data sets.

4. Consider using a stacked bar chart or a stacked area chart instead of a 100% stepped stacked area chart if you want to show a more continuous trend over time.

5. Use a meaningful time scale for the x-axis, such as days, weeks, or months, to help readers understand the context of the data.

100% Stacked stepped 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.

Feature	Description
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. Select the series that you want to plot on the right-hand axes.
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. You will also have the option to modify the font attributes.
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.
Padding and Zoom	To change the padding and zoom, follow these steps: 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). Update/customize the count and colors of the gridlines.