<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>Stacked area chart</td>
<td>Compares value of subcategories to the larger category value</td>
<td></td>
</tr>
<tr>
<td><a href="/data-visualization/area-chart/percentage-area-chart/">Percentage area chart</a></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":"1. **Header**: includes the chart’s title and optional subtitle. Use subtitles when additional context is necessary.\n2. **Y-axis label**:  defines the data you are measuring. Commonly, this is revenue or quantity.\n3. **Y-axis value**:  represents the incremental measurements for plotted data. This will determine the location of each data point.\n4. **X-axis label**:  the categorical reference for the data being measured.\n5. **X-axis value**:  the intervals in which measurements occur. This determines the number of data points.\n6. **Legend**:  uses color to define the property of each category.\n7. **Plot area**:  shown as a grid within the line chart, where data is displayed.\n8. **Data point**:  shown visually using the point element and represents a single piece of data on a line.\n9. **Area fill**:  represents volume of data.\n10. **Container**:  houses the chart and all accompanying elements including the legend. The container aligns to the grid to determine the chart’s size.","url":"https://dds.dell.com/site/v2/data-visualization/area-chart---stacked/stackedareachart-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<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?","description":"This article covers the use of all area chart types.","icon":"pop-up-arrow-corner"},{"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","description":"This is an in-depth article on area charts and data correlation.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1' data-hideWidget='false'></details>


## Usage

The stacked area chart is useful for showing the relationships between multiple subcategories. It also shows the contribution that each subcategory makes to the overall data. 

The height of each area represents the y-axis value of a particular subcategory. The height of all areas is the sum of those values. For instance, you can track computer sales over months or years and also track how the sales of each model of computer contributed to total computer sales. 

These changes should be measured using a zero baseline for the bottom subcategory on the y-axis. The plotted line of one subcategory becomes, in essence, the zero baseline of the next.

<details data-name='image-block' data-images='[{"alt":"showing a stacked area chart three data series","caption":"This image shows three subcategories and their contribution to the total data at each plotted point.","url":"https://dds.dell.com/site/v2/data-visualization/area-chart---stacked/areachart-tooltip--3-.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Color

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

Align category data series 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/?tab=Overview) page for color palette.

## Layout

Data points on the lowest line are plotted using a zero baseline for the y-axis. The plotted line of one subcategory becomes, in essence, the zero baseline of the next.

Stacked 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. When the screen size falls below 480 pixels, the legend appears on the bottom of the plot area.

### Responsive

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

On smaller screens, the legend shifts to the bottom of the container.

<details data-name='image-block' data-images='[{"alt":"showing the legend in the upper right of the chart on a larger screen","caption":"On larger screens, the legend appears in the upper right of the chart.","url":"https://dds.dell.com/site/v2/data-visualization/area-chart---stacked/stackedareachart-aligmnent.png"},{"alt":"showing a chart on a smaller screen with the legend appearing at the bottom of the chart.","caption":"On smaller screens, the legend shifts to the bottom of the chart.","url":"https://dds.dell.com/site/v2/data-visualization/area-chart---stacked/stackedareachart-aligmnent2.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.

Altering the component specifications could have negative effects, so this is not recommended.

**Margin sizes** 

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 the specifications for a stacked bar chart","caption":"Altering the component specifications could have negative effects, so this is not recommended.","url":"https://dds.dell.com/site/v2/data-visualization/area-chart---stacked/specs.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Interaction

### Tooltip

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

It helps users easily compare the values in a single container and maintain focus on the x-axis plot lines instead of trying to isolate individual data points. This is especially helpful when the touch targets for data points may overlap. 

Content in the tooltip displays the order of the series in the legend, regardless of the order of points within the plot area, which are grouped by the cursor line.

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

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

### Interactive legend

#### Hover to highlight

When all data series markers are selected, hovering over a marker in the legend will isolate its related series in the plot area. All other plotted series will show as muted.

<details data-name='image-block' data-images='[{"alt":"showing stacked bar chart with interactive legend in initial state","caption":"In initial state, all series show as normal.","url":"https://dds.dell.com/site/v2/data-visualization/area-chart---stacked/stacked-area--intlegend.png"},{"alt":"showing stacked bar chart with interactive legend and a single series highlighted","caption":"On hover, the selected series is highlighted, and other are muted.","url":"https://dds.dell.com/site/v2/data-visualization/area-chart---stacked/stacked-area--intlegend2.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>



#### Isolate a data series



To isolate a plotted data series, the user selects it from the legend. At this point, all other plotted data series will not show on the plot area, and they will not have marker fill in the legend.


To view a deselected series, the user hovers over the marker and selects it. When all the series are selected, the legend reverts to its initial state. Also, if a single isolated series is selected, the legend reverts to initial state.



<details data-name='image-block' data-images='[{"alt":"showing interactive legend in initial state","caption":"in initial state, all series show on the plot area.","url":"https://dds.dell.com/site/v2/data-visualization/area-chart---stacked/stacked-area--intlegend.png"},{"alt":"showing interactive legend with two series isolated.","caption":"In this image, two series are isolated.","url":"https://dds.dell.com/site/v2/data-visualization/area-chart---stacked/stacked-area--intlegend4.png"}]' data-numberofcolumns='2' 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-stacked-area--docs)

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

Stacked area charts show trends in categories over time and the contribution each subcategory makes to the total category data.

Stacked Area Chart