<p>Dell Design System (DDS) currently documents three kinds of bar charts. Review the data presentation and use case for each kind to make sure it’s right for your project.</p>
<h2>When to use</h2>
<table>
<thead>
<tr>
<th><strong>Component</strong></th>
<th><strong>Use case</strong></th>
</tr>
</thead>
<tbody><tr>
<td><a href="/data-visualization/bar-chart/simple-bar-chart">Simple bar chart</a></td>
<td>Use simple bar charts to compare data of individual categories side by side.</td>
</tr>
<tr>
<td>Stacked bar chart</td>
<td>Use stacked bar charts to compare values of subcategories to the total values of primary categories.</td>
</tr>
<tr>
<td><a href="/data-visualization/bar-chart/grouped-bar-chart">Grouped bar chart</a></td>
<td>Use grouped bar charts to compare data of multiple categories side by side.</td>
</tr>
</tbody></table>
<p><br /><br /></p>
<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"","caption":"Stacked bar charts are comprised of the following nine elements:\n\n1. **Header:** includes the chart’s title and optional subtitle. Subtitles are used to provide additional context if it’s necessary to do so.\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. **Legend:** uses markers and labels to define their respective series, represented by bar segments within the chart.\n5. **Category label:** defines the main category each group belongs to. Commonly, this is quarter, year, or month.\n6. **Subcategory value:** represents the subcategory each group belongs to. Its values are commonly the intervals in which measurements occur. This will determine the location for each group on the x-axis.\n7. **Bar:** visually indicates the value, number, or total for a data category.\n8. **Plot area:** shows as a grid within the bar chart, where data is displayed.\n9. **Container:** houses the chart and all accompanying elements, including the legend. The container aligns to the grid to determine the chart’s size within in.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/stackedbarchart-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h2>Articles</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Read blog","path":"https://blogs.sas.com/content/iml/2021/04/12/horizontal-bar-chart.html","type":"External","ariaLabel":""},"title":"SAS Institute","subtitle":"Three reasons to prefer a horizontal bar chart.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Read blog","path":"https://statisticsbyjim.com/graphs/bar-charts/","type":"External","ariaLabel":""},"title":"Statistics By Jim","description":"","icon":"pop-up-arrow-corner","subtitle":"Bar Charts: Using, Examples, and Interpreting"},{"image":{"url":"","alt":""},"link":{"label":"Read blog","path":"https://www.atlassian.com/data/charts/bar-chart-complete-guide","type":"External","ariaLabel":""},"title":"Atlassian","subtitle":"A complete guide to grouped bar charts","icon":"pop-up-arrow"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1' data-hideWidget='false'></details>


## Usage

Bar charts are helpful for sorting categorical data and highlighting quantitative differences for comparison. 


When comparing multi-series data, the focus of the comparison should determine the type of bar chart used. 



Stacked bar charts show sub-category data series "stacked" on top of each other in a single bar and are often used to show part-to-whole relationships. They should always include a legend to help identify values and labels of each series.

<details data-name='image-block' data-images='[{"alt":"","caption":"A series of five stacked bar charts each displaying four subcategories depicting Alienware computer models. Note that in Jan the m18 subcategory value is 0, but it&#39;s color is present.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/stackedverticalbarchart-intlegend--1-.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Color

Stacked bar charts present a consistent color for each subcategory to aid in differentiation. Subcategory colors should match their corresponding labels in the legend.

Categorical colors are provided in sequence to optimize
contrast for accessibility and should not be reordered at implementation. For bar charts representing projections, bars may use lighter shades of the
categorical colors provided. Review the [categorical color palette ](https://www.delldesignsystem.com/foundations/color/?tab=Data-visualization#categorical-palette)for more information.  

Do not use bar shadows or 3-dimensional bars because they
may be distracting or misleading.

<details data-name='image-block' data-images='[{"alt":"","caption":"The four subcategory colors are distinct and correspond to the color of a label in the legend.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/barchart-do-stacked-colors--1-.png"},{"alt":"","caption":"The lack of distinct subcategory colors makes it difficult to interpret the data.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/barchart-dont-stacked-colors--1-.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Layout

Bar width is not fixed but it should be consistent for each plotted bar and use at least 4 pixels of padding. Spacing between bars in the plot area should be half of the bar width. Bar width and spacing between bars should scale with the size of the bar chart.

The bar representing the maximum numerical value in the data series should be completely visible in the plot area to display all data accurately. 

Do not truncate any bars to avoid misrepresenting data.

<details data-name='image-block' data-images='[{"alt":"","caption":"\nThe incremental measurements should allow for the full data of the largest bar to be shown.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/image-ratios--4-.png"},{"alt":"","caption":"Avoid incremental values that don&#39;t allow for the full value of the largest bar to be shown in the plot area.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/image-ratios--5-.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

### Labels

When labeling bar charts, show the x-axis label horizontally and the y-axis label vertically.

In subcategories with values of zero, a data visualization (DV) tooltip shows on hover or press in the area the segment would normally appear. Do not exclude values of zero, as they are important for data comparison.

All data labels should be horizontal to support readability regardless of bar chart alignment.

<details data-name='image-block' data-images='[{"alt":"","caption":"","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/stackedverticalbarchart-intlegend--1-.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Density

Try not to add more than five groups to the plot area. This ensures the data is easily interpreted and is readable on smaller screens.

### Alignment

**Horizontal alignment**:

* allows for longer category labels category labels.
* plots categorical data on the y-axis and quantitative data on the x-axis with negative values to the left of the baseline.

**Vertical alignment**:

* is used for shorter category labels.
* plots categories in sequential order, like monthly or yearly.
* plots categorical data on the x-axis and quantitative data on the y-axis with negative values below the baseline.

For either alignment, the numerical axis baseline value should be zero to represent all data accurately.

<details data-name='image-block' data-images='[{"alt":"","caption":"Horizontal alignment allows for longer category labels.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/stackedhorizontalbarchart-aligmnent2-2x--1-.png"},{"alt":"","caption":"Use vertical alignment when category labels are short and sequential order is important.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/StackedBarChart (3).png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Interaction

### Behaviors and states

Use horizontal alignment with responsive bar chart designs. Smaller screen sizes cannot show as many categories as larger ones. Horizontal alignment ensures data series and longer labels  will show on smaller screens.

Use bar value labels for basic and grouped bar charts. This guarantees you can read data if labels or values disappear on smaller screens.

### Tooltip

Stacked bar chart includes a concise [data visualization (DV) tooltip](https://www.delldesignsystem.com/components/tooltip/?tab=Design#usage) to display values for each subcategory segment within the plot area. The DV tooltip contains the subcategory name, the corresponding legend marker, the category name, and the data value of the segment.

On desktop, the DV tooltip is activated on hover or keyboard focus. On mobile, it is activated by press.

<details data-name='image-block' data-images='[{"alt":"A DV tooltip showing the pertinent data for a subcategory segment of a stacked bar chart.","caption":"The DV tooltip contains data on each subcategory segment of the chart.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/stackedverticalbarchart-tooltip--4-.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

Interactive legend

In its initial state, the interactive legend appears the same as the basic legend. Where they differ is in the interactive legend’s ability to isolate data series and a hover to highlight a feature.

#### **Isolate a data series**

To isolate the plotted data series of a subcategory, select 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, hover over the marker and select 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":"A stacked bar chart showing the interactive legend in initial state.","caption":"In its initial state the interactive legend shows all legend markers, and all plotted data series show in the plot area.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/stackedverticalbarchart-intlegend--1-.png"},{"alt":"A stacked bar chart showing an isolated data series. ","caption":"When a data series is isolated, all other legend markers do not show, and only the isolated series appears in the plot area.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/stackedverticalbarchart-intlegend3.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

**Hover to highlight**

When all markers are selected, hovering over a data series 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":"An interactive legend in its initial state.","caption":"\nIn its initial state the interactive legend shows all legend markers, and all plotted data series show in the plot area.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/stackedverticalbarchart-intlegend--1-.png"},{"alt":"An interactive legend with a marker being hovered on and the corresponding highlighted data series.","caption":"On hover or click, a legend marker and its corresponding data series on the plot area will be highlighted.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/stackedverticalbarchart-intlegend2--1-.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

### Specifications

All bar 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.

Bar width is not fixed, but it should be consistent. Truncating bars could result in misunderstanding the data.

Bar width is not fixed, but it should be consistent. Truncating bars could result in misunderstanding the data.

Margins should be the same width and height for horizontal and vertical alignments. 

**Vertical margins**  

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

**Horizontal margins**  

* 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 x-axis label

**Spacing** 

* 4 pixels, at minimum, between edge of the plot field and the nearest bar 
* 8 pixels between a value label and the corresponding bar

<details data-name='image-block' data-images='[{"alt":"Showing stacked bar chart specifications.","caption":"All bar chart specifications are built in to the component.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/stackedverticalbarchart-specs.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Standards

### Accessibility

**Target area is a minimum of 8 pixels**

Bar columns are a minimum of 8 pixels tall to provide a large enough target area for users to view and engage. If the target area is too small, bars may be difficult to engage.

**Bold text styling is applied to focused bars**

During hover or focus states, bar label text is bolded to highlight the numerical value of the selected bar. Applying bold text styling to the bar value in focus helps differentiate from other bar values and supports better readability.

**Tooltips show bar values when activated via pointer, keyboard, and touch**

Use tooltips to display bar values even when bar values are labeled in the plot area. Displaying bar values with tooltips helps reduce cognitive load and improve readability of bar chart data. Tooltips appear at the middle of the bar, but if the bar is too short, show it at the top of the bar.

### Content

**Vital content should not disappear**

Use horizontal alignment in responsive designs. This ensures labels and data appear on smaller screens. Also, use bar value labels in the plot area to guarantee numerical values are always displayed regardless of screen size.

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

**Data visualization (DV) tooltip**

Be consistent in how you present information in data tooltips across your product experience. Each tooltip in a chart should repeat the same format of information so users don’t incorrectly read data.

**DV tooltip text**

Content should replicate the y-and x-labels on the graph, showing the specific values of the data point.

**Capitalization**

Use sentence case unless providing an explanation for an acronym or initialism.

**Legend text**

Use concise and clear labels for items within the legend.

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

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

Stacked bar charts compare values of subcategories to the total values of primary categories.