<h2>When to use</h2>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Simple area chart</td>
<td>Shows data over time, emphasizing volume</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>
</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>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"","caption":"Area charts contain these nine elements:\n\n1. **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 height of each bar.\n4. **X-axis label**: the categorical reference for the data being measured.\n5. **X-axis value**: the intervals in which measurements occur.\n6. **Plot area**: shown as a grid within the line chart, where data is displayed.\n7. **Data point**: shown visually using the point element, and represents a single piece of data on a line.\n8. **Area fill**: represents volume of data.\n9. **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/basic-area-chart/areachart-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?","subtitle":"","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

A simple area chart is used to display a single data series, allowing you to focus on changes in values over time. These changes should be measured using a zero baseline for the y-axis.

<details data-name='image-block' data-images='[{"alt":"showing sales of docking stations over a 6 month period","caption":"Simple area chart showing sales over time.","url":"https://dds.dell.com/site/v2/data-visualization/basic-area-chart/areachart-color--2-.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Color

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

See Foundations page for accent color palette.

## Sizes

Avoid small grid sizes with a lot of data points. This will affect readability and can increase the time it takes to process the information presented.

## Layout

Data points on lines are plotted using a zero baseline for the y-axis.

There is no legend for the simple area chart, as it measures a single series.

## 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.

**Margins**

Vertical margins are:

* 24 pixels to the left of the plot line.
* 32 pixels to the right of the plot line.      

Horizontal margins are:

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

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

## Interaction

### Tooltip

The simple area chart uses a concise data visualization
(DV) tooltip by default. It is used to display values for each data point
included on a line. On desktop, the DV tooltip is activated on hover or
keyboard focus. On mobile, it is activated by press.

The DV tooltip is designed specifically for data visualization components and
can be found in the [Data Visualization Library](https://www.figma.com/design/a1X9m1vTZdG3N6xV5G9bz4/Data-Visualization?node-id=9252-7656&node-type=canvas&t=BTpitojtsL2EMFP9-0) in Figma.

<details data-name='image-block' data-images='[{"alt":"Showing a bar chart with a data visualization tooltip.","caption":"The DV tooltip shows the x- and y-axis values and the   value of the data point.","url":"https://dds.dell.com/site/v2/data-visualization/basic-area-chart/areachart-tooltip.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** 

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.

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

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)

**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.

### Content

**Alignment**

Data visualization title should be left-aligned.
Always center align the x and y-axis labels.

**Capitalization**

Use sentence case for all headers and labels, including the chart title.

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-area--docs)

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

Simple area charts use connected data points to show trends over time. The area below the plotted line is filled to give a sense of volume.

Simple Area Chart