<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="https://dds-website-decap-preview.r2.pcf.dell.com/data-visualization/bar-chart/simple-bar-chart">Simple bar chart</a></td>
<td>Simple bar charts compare data of individual categories side by side.</td>
</tr>
<tr>
<td><a href="/data-visualization/bar-chart/stacked-bar-chart">Stacked bar chart</a></td>
<td>Stacked bar charts compare values of subcategories to the total values of primary categories.</td>
</tr>
<tr>
<td>Grouped bar chart</td>
<td>Grouped bar charts compare data of multiple categories side by side.</td>
</tr>
</tbody></table>
<p><br /><br /></p>
<details data-name='image-block' data-images='[{"alt":"","caption":"\n\n\nGrouped bar charts are comprised of the following ten elements:\n\n1. **Header:** includes the chart’s title and optional subtitle. Use subtitles when additional context is necessary.\n2. **Y-axis label:** defines how you are measuring data. 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 color to define the property of each bar.\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 value label:** shows a visible value for each bar.\n8. **Bar group:** colors correspond to colors in the legend. The height of the bars is relative to their value on the y-axis.\n9. **Plot area:** shown as a grid within the bar chart, where data is displayed.\n10. **Container:** houses the chart and all elements including the legend. The container aligns to grid to determine the chart’s size.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/groupedbarchart-anatomy--3-.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h2>Articles</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"View SAS article","path":"https://blogs.sas.com/content/iml/2021/04/12/horizontal-bar-chart.html","type":"External","ariaLabel":""},"title":"Three Reasons to Prefer a Horizontal Bar Chart","description":"This article discusses three situations in which a horizontal bar chart is preferable to a vertical bar chart.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"View Statistics by Jim blog","path":"https://statisticsbyjim.com/graphs/bar-charts/","type":"External","ariaLabel":""},"title":"Bar Charts: Using, Examples, and Interpreting","icon":"pop-up-arrow-corner","description":"Basic breakdown of bar charts"},{"image":{"url":"","alt":""},"link":{"label":"View Atlassian blog","path":"https://www.atlassian.com/data/charts/bar-chart-complete-guide","type":"External","ariaLabel":""},"icon":"pop-up-arrow-corner","title":"A Complete Guide to Bar Charts","description":"This article give in-depth information on use case and design decisions."}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Use grouped bar charts to compare sub categorical data across multiple categories. They’re effective for comparing categories side by side, like when you want to compare sales by month or quarter.

### **The x and y-axis**

On grouped bar charts, the x-axis displays data points grouped into categories. The y-axis represents a numerical value, such as a count or average. 

It’s important to maintain a zero baseline for the y-axis, so numerical data can be easily interpreted.

### **Categorical variables**

Each group of bars (categories) represents an equivalent number of data points across the chart. So, if there are two bars per group, each group will represent two data points within two distinct data series. 

Bars are plotted on the x-axis using two categorical variables. The position of the bars represents one variable, and color represents the second variable within each group.

It’s necessary to decide which of the two categorical variables will be the **category** (primary) variable. This will determine where to plot each bar group on the x-axis. The **subcategory** (secondary) variable determines the number of items in the legend, and thus the number of bars in each group. For example: when plotting revenue for two different laptop models over time, the measurement of time will be the primary variable, and determine where the bars are plotted. 

<details data-name='image-block' data-images='[{"alt":"Showing a grouped bar chart with the months of January, February, and March as primary variables.","caption":"\nIn this image, the months of January, February, and March are the category variables. XPS and Latitude are the subcategory variables.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/grouped-bar-chart/frame-12952--2-.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Color

A bar’s color should match the color of a legend marker, indicating a shared category. In grouped  bar charts, color has no inherent meaning or intent other than to keep data organized and easy to interpret.

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), as they are inherently associated with positive and negative values.

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

## Layout

### Bar order and axis

Bar order should correspond to the legend markers and remain consistent among all groups.

Show the x-axis label horizontally and the y-axis label vertically. All value labels should lay horizontal to support readability.

Numerical axis values should define the units of measure used to clearly represent data. Use incremental values that are consistent and easy to follow in the context of the data.

The numerical axis baseline value should be zero to accurately represent all data.

<details data-name='image-block' data-images='[{"alt":"Showing a grouped bar chart with the order of bar colors matching the legend markers.","caption":"\n\n\nBar order should correspond to the legend markers and remain consistent among all groups.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/grouped-bar-chart/groupedverticalbarchart-tooltip-2x.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

Density

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

Alignment

* Use **vertical alignment** for shorter labels, ordered data with a natural sequence (like age or time), or when emphasizing height for comparison of values.
* Choose **horizontal alignment** for long category labels or to display many categories and for responsive design, as it improves readability by preventing label overlap and abbreviation. 

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

**Titles and labels**:

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

## Responsive

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.

## Interaction

Bar chart includes a concise [data visualization (DV) tooltip](https://www.delldesignsystem.com/components/tooltip/?tab=Design#usage) to display
values for each bar within the plot area. On desktop, the DV tooltip is
activated on hover or keyboard focus. On mobile, it is activated by press.

For grouped bar charts the subcategory name, numerical value, and legend marker should be present in the tooltip.

For more information on using tooltips in grouped bar charts visit the [Chart customization](https://www.delldesignsystem.com/patterns/chart-customization) page and scroll down to Tooltip.

<details data-name='image-block' data-images='[{"alt":"Showing a grouped bar chart with data visualization tooltip","caption":"\nFor grouped bar charts the subcategory name, numerical value, and legend marker should be present in the tooltip.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/grouped-bar-chart/frame-12952--2-.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.

Interactive legend is currently available for line charts only. DDS will soon release it for other charts.

To view the interactive legend and how it works, go to the [Storybook live demo](https://vanilla-dv.delldesignsystem.com/2.16.3/index.html?path=/story/components-line-chart--basic&args=legend.interactive:true) and the [DDS Figma UI Kit](https://www.figma.com/design/a1X9m1vTZdG3N6xV5G9bz4/Data-Visualization?node-id=7100-18944&t=440YmBVGhleQbCLv-0).

**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 data series show on the plot area.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/grouped-bar-chart/dds2---bar-chart--grouped-vertical--3-.png"},{"alt":"Showing interactive legend with one data series isolated.","caption":"When isolated, a single data series will show on the plot area.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/grouped-bar-chart/dds2---bar-chart--grouped-vertical--2-.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":"Showing interactive legend in initial state.","caption":"In inital state, al data series show on the plot area.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/grouped-bar-chart/dds2---bar-chart--grouped-vertical.png"},{"alt":"Showing interactive legend with one data series highlighted.","caption":"On, hover a single data series is highlighted.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/grouped-bar-chart/dds2---bar-chart--grouped-vertical--1-.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Specifications

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 
* 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
* 4 pixels, at minimum, between edge of the plot field and the nearest bar 
* 8 pixels between a value label and the corresponding bar

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

Spacing between groups should be half of the group width. Bar width and spacing between bars should scale with the size of the bar chart. 

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

**Baselines**

The baselines for the x- and y-axis should be thicker than the grid lines in the plot area to help them stand out.

**Bar width**

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

<details data-name='image-block' data-images='[{"alt":"Showing specifications for grouped bar chart.","caption":"","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/grouped-bar-chart/groupedverticalbarchart-specs--1-.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-grouped-bar--docs)

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

Grouped bar charts show two or more bars side by side in grouped categories on the same axis.