<h2>When to use</h2>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
<th></th>
</tr>
</thead>
<tbody><tr>
<td><a href="/data-visualization/area-chart/simple-area-chart/">Simple area chart</a></td>
<td>Shows data over time, emphasizing volume</td>
<td></td>
</tr>
<tr>
<td><a href="/data-visualization/area-chart/stacked-area-chart/">Stacked area chart</a></td>
<td>Compares value of subcategories to the larger category value</td>
<td></td>
</tr>
<tr>
<td>Percentage area chart</td>
<td>Shows the value of subcategories as percentages of the overall category value</td>
<td></td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"","caption":"","url":"https://dds.dell.com/site/v2/data-visualization/basic-area-chart/stackedareachart-anatomy--1-.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<p>Percentage area charts contain the following ten elements:</p>
<ol>
<li><strong>Header</strong>: includes the chart’s title and optional subtitle. Use subtitles when additional context is necessary.</li>
<li><strong>Y-axis label</strong>: defines the data you are measuring. Commonly, this is revenue or quantity.</li>
<li><strong>Y-axis value</strong>: represents the incremental measurements for plotted data. This will determine the location of each data point.</li>
<li><strong>X-axis label</strong>: the categorical reference for the data being measured.</li>
<li><strong>X-axis value</strong>: the intervals in which measurements occur. This determines the number of data points.</li>
<li><strong>Legend</strong>: uses color to define the property of each category.</li>
<li><strong>Plot area</strong>: shown as a grid within the line chart, where data is displayed.</li>
<li><strong>Data point</strong>: shown visually using the point element, and represents a single piece of data on a line.</li>
<li><strong>Area fill</strong>: represents volume of data.</li>
<li><strong>Container</strong>: houses the chart and all accompanying elements including the legend. The container aligns to the grid to determine the chart’s size.</li>
</ol>
<h2>Articles</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"View Cluster article","path":"https://clusterdesign.io/what-is-an-area-chart-and-when-to-use-it/","type":"External","ariaLabel":""},"title":"What is an Area Chart and When to Use It?","icon":"pop-up-arrow-corner","description":"This article covers the use of all area chart types."},{"image":{"url":"","alt":""},"link":{"label":"View Atlassian article","path":"https://www.atlassian.com/data/charts/area-chart-complete-guide?","type":"External","ariaLabel":""},"title":"A Complete Guide to Area Charts","icon":"pop-up-arrow-corner","description":"This is an in-depth article on area charts and data correlation."}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1' data-hideWidget='false'></details>


## Usage

The percentage area chart is a part-to-whole chart. It shows the value of subcategories as percentages of the category’s cumulative value, and the height of each stack shows how the percentage changes over time. This places more emphasis on the contribution each subcategory  makes to the whole category rather than their individual numerical values. So, instead of measuring sales in dollars for a model of computer, you would measure how a model’s sales contributes as a percentage of 100% of computer sales.

It is important to include all contributing subcategories. Leaving one out means that the cumulative percentage would be less than 100% of a category and the data would lose its meaning.

Rather than using a discrete value on the y-axis, the values are plotted as percentages ranging from 0 to 100%. In essence, there are two baselines. The bottom one being 0 and the top being 100%.

<details data-name='image-block' data-images='[{"alt":"showing a percentage area chart with two subcategories","caption":"This chart show two subcategories as a percentage of the whole category value.","url":"https://dds.dell.com/site/v2/data-visualization/basic-area-chart/stackedareachart-specs-density--6-.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Color

In percentage area charts, color has no inherent meaning or intent, other than to keep data organized and easy to interpret.

Align category colors to the legend markers. This makes it easy to compare data. Categorical colors are provided in sequence to optimize contrast for accessibility and should not be reordered at implementation.

Avoid using stoplight colors (red, yellow, green) to show that data has a positive or negative value.

See [Foundations](https://www.delldesignsystem.com/foundations/color) page for color palette.

## Layout

Data points on lines for bottom category are plotted using a zero baseline for the y-axis. The data series for the bottom subcategory becomes the baseline for the next subcategory.

Percentage area charts use a legend with markers corresponding to each plotted category area. The legend will appear on the upper right of the plot area. 

## Responsive

When displayed on larger screens, the legend appears on the upper right corner of the container. 

When the screen size falls below 480 pixels, the legend appears on the bottom of the container.



<details data-name='image-block' data-images='[{"alt":"a percentage area chart on a standard size screen with legend in the upper right","caption":"Legend in the upper right of the container","url":"https://dds.dell.com/site/v2/data-visualization/area-chart---stacked/stackedareachart-aligmnent--1-.png"},{"alt":"percentage area chart on a small screen with legend in the bottom of the container","caption":"Legend at the bottom of the container","url":"https://dds.dell.com/site/v2/data-visualization/area-chart---stacked/stackedareachart-aligmnent2--1-.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>



## Specifications

All area chart specifications are built into the component. This ensures consistency across products, ease of use, and accessibility.

It is not recommended that you alter the component specifications. This could have negative effects.

Vertical margins are: 

* 24 pixels wide to the left of the plot area. 
* 32 pixels wide to the right of the plot area. 

Horizontal margins are:

* 24 pixels tall above the bar chart title. 
* 24 pixels tall below the plot area. 
* 32 pixels tall between the plot area and bar
  chart title.
* 24 pixels tall between the legend and the plot
  area. 

<details data-name='image-block' data-images='[{"alt":"showing area chart specifications","caption":"\nAll area chart specifications are built into the component","url":"https://dds.dell.com/site/v2/data-visualization/area-chart---stacked/stackedareachart-specs.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Interaction

### Tooltip

Percentage area charts use a [multi-series (MS) tooltip](https://www.delldesignsystem.com/patterns/chart-customization) by default.

The MS tooltip is used when there are multiple data points that share the same x-axis value. It helps users easily compare values in a single container, instead of trying to isolate individual data points. This is especially helpful when data points overlap.

Content in the tooltip always displays the order of the series as it appears in the legend.

The MS tooltip is designed specifically for data visualization components with more than one series and can be found in the[ Data Visualization UI Kit,](https://www.figma.com/design/a1X9m1vTZdG3N6xV5G9bz4/Data-Visualization?node-id=9252-7656&p=f&t=bUkPmPTgvAY94dyx-0)

[](https://www.figma.com/design/a1X9m1vTZdG3N6xV5G9bz4/Data-Visualization?node-id=9252-7656&p=f&t=bUkPmPTgvAY94dyx-0)
The MS tooltip will appear when a data point is hovered over and will show all series sharing the x-axis value.

<details data-name='image-block' data-images='[{"alt":"showing a percentage area chart with an multi-series tooltip","caption":"\n\nContent in the tooltip always displays the order of the series as it appears in the legend.","url":"https://dds.dell.com/site/v2/data-visualization/area-chart---stacked/areachart-tooltip--6-.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Standards

### Accessibility

**Avoid placing too many data points within the same chart**. 

While there is not a recommended maximum number of data points a chart can support, consider the chart size and responsive behavior when adding multiple points within a chart. Too many points within the same chart can negatively impact a chart’s readability.

**The plotted line must be easily distinguished from the fill area**. 

Fill opacity should be 30% of the point and line color value. This will create a clear view of where the line stops, and the fill begins.

**Data within the tooltip should correspond to its data point**. 

Tooltips should show the values that correspond to the data point that activates it. The presentation of values in each tooltip in your components should remain consistent.

**All tooltips should be able to be activated and dismissed via pointer, keyboard, and touch**. 

Users should have full control of the tooltip interaction regardless of device. Do not cause the tooltip to disappear or timeout after a set interval. [WCAG 2.1: 1.4.13 Content on Hover or Focus](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html)

### Content

**Capitalization**

Use sentence case in all text, with the exception of page titles which should be title cased.

**Chart title**

Be brief and descriptive about the subject the chart is presenting. Optionally include a subtitle to provide more context about the chart. Every chart should include a chart title. A group title can be used when you’re showing more than one chart in the same container or widget.

**Chart labels**

Use concise and clear y- and x-labels to describe how you’re measuring data within your chart.

This demo lets you interact with the area chart and view the code. To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla-dv.delldesignsystem.com/?path=/docs/components-percentage-area--docs)

<details data-name='iframe-doc' data-link='https://vanilla-dv.delldesignsystem.com/iframe.html?args=&id=components-percentage-area--docs&viewMode=docs&websiteFrame=true'></details>

Percentage stacked area charts show trends in subcategories over time as percentages of a total category value.

Percentage Area Chart