<h2>When to use</h2>
<table>
<thead>
<tr>
<th><strong>Component</strong></th>
<th><strong>Use case</strong></th>
</tr>
</thead>
<tbody><tr>
<td>Simple bar chart</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><a href="/data-visualization/bar-chart/grouped-bar-chart">Grouped bar chart</a></td>
<td>Grouped bar charts 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":"Simple bar charts are comprised of the following nine elements:\n\n1. **Heading**: 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. **Category label**: defines the main category each group belongs to. Commonly, this is quarter, year, or month.\n5. **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.\n6. **Bar value label**: presents an always visible value for each bar.\n7. **Bar**: visually indicates the data value of a subcategory. The height of a bar is relative to its value on the y-axis.\n8. **Plot area**: shown 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 grid to determine the chart’s size within in.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/barchart-anatomy-2x.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","description":"Basic breakdown of bar charts","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"View Atlassian blog","path":"https://www.atlassian.com/data/charts/bar-chart-complete-guide","type":"External","ariaLabel":""},"title":"A Complete Guide to Bar Charts","description":"This article give in-depth information on use case and design decisions.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1' data-hideWidget='false'></details>


## Usage



Use simple bar charts to show data of individual categories side by side.  They are helpful for comparing differences among subcategories in single data series and are commonly used for ordering and ranking categories by their numeric values. 

### Ordering

When ordering categories, start with the lowest value on the left and list in ascending order to the right. This aids in a better visual comparison of data in the series. 

<details data-name='image-block' data-images='[{"alt":"","caption":"Use bar charts to compare totals between categorical data to improve visual recognition.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/verticalbarchart-comparison.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Ranking

Bar charts used for ranking should order categories from high to low or low to high depending on the focus of the ranking.

<details data-name='image-block' data-images='[{"alt":"","caption":"This chart is shows the ranking of CPU models from highest to lowest performance, allowing it to be inferred that higher CPU frequency translates to higher performance.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/Horizontal_Bar_Chart_Ranking_7162280926.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Color

Use the same color for all bars in a simple bar chart. This will keep the user focused on the values and won’t confuse the categorical representation.

Avoid using stoplight colors (red, yellow, green), as they are inherently associated with positive and negative values.

Review the [categorical color palette](/foundations/color/?tab=Data-visualization#categorical-palette) for more information.

<details data-name='image-block' data-images='[{"alt":"","caption":"Use one color in single series charts.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/barchart-do-colors.png"},{"alt":"","caption":"Don’t use multiple colors in single series charts.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/barchart-dont-bar-colors.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Layout

### Bar width

Bar width is not fixed and should be consistent for each plotted bar, 

Bar width and spacing between bars should scale with the size of the bar chart. Spacing between bars in the plot area should be half of the bar width.

Use at least 4 pixels of padding. 

. 

<details data-name='image-block' data-images='[{"alt":"Showing correct spacing of bat charts, where the space between bars is half the width of the bar itself.","caption":"\nEnsure spacing between bars is equal to half the width of each bar. If the bar is 10 pixels wide, spacing is 5 pixels.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/Bar_Chart_Do_Bar_Spacing_e952b5322d.png"},{"alt":"Showing large spacing between bars, which can be confusing.","caption":"\nAvoid unnecessary spacing between bars. The farther they are, the less it seems they are related.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/barchart-dont-bar-spacing.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

### Incremental value

The bar representing the largest numerical value in the data series should be completely visible in the plot area. If needed, change the increments of your numerical values to avoid truncating any bars and misrepresenting data.

When choosing increments for the numerical axis, use values that are consistent and easy to follow in the context of the data.

<details data-name='image-block' data-images='[{"alt":"Showing a simple bar chart with all data within the plot area.","caption":"\nKeep all data contained within the plot area.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/Bar_Chart_Do_Max_Values_1ebf1d3449.png"},{"alt":"Showing a simple bar chart with a bar exceeding the maximum value of the plot area.","caption":"\nAvoid allowing bars to reach or exceed the maximum value of the chart’s plot area.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/Bar_Chart_Dont_Max_Values_35a7c0dbd4.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 categories with values of zero, a categorical label takes the place of a bar. 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":"Showing correct horizontal labelling of data labels","caption":"\nInclude horizontal labels for the categorical axis regardless of the chart’s alignment.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/Bar_Chart_Do_Bar_labels_1_bd940466cf.png"},{"alt":"Showing data labels incorrectly styled vertically on the x-axis","caption":"\nAvoid diagonal or vertical type style, due to its negative impact on readability.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/Bar_Chart_Dont_Bar_labels_8145b3e2ca.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

### Alignment

Use vertical alignment as the default format for bar charts, as it creates better understanding of ordering and ranking. Vertical alignment plots categorical data on the x-axis and quantitative data on the y-axis with negative values below the baseline Short category labels are best for vertical alignment.

Horizontal alignment plots categorical data on the y-axis and quantitative data on the x-axis with negative values to the left of the baseline. This allows for better readability when using longer category labels.

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

<details data-name='image-block' data-images='[{"alt":"Showing vertical alignment ","caption":"\nVertical alignment plots categorical data on the x-axis and quantitative data on the y-axis.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/simple-bar-chart/verticalbarchart-aligmnent-2x.png"},{"alt":"Showing horizontal alignment","caption":"\nHorizontal alignment plots categorical data on the y-axis and quantitative data on the x-axis.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/simple-bar-chart/horizontalbarchart-aligmnent2-2x.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Interaction

### Behaviors and states

Use horizontal alignment with bar charts in responsive designs. If plotted with vertical alignment, data series on the categorical axis may disappear in smaller viewports.

Use bar value labels in the plot area so data shows in smaller viewports. Consider how data will look across various devices, as smaller charts cannot accommodate a large number of categories.

### Tooltip

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

<details data-name='image-block' data-images='[{"alt":"Showing the concise data visualization tooltip on a horizontal bar chart","caption":"\nA concise DV tooltip is used by default to reiterate each bar’s categorical label and corresponding value.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/simple-bar-chart/horizontalbarchart-tooltip.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Specifications

All bar chart specifications, besides bar width,  are built in to the component. This ensures consistency across products, ease of use, and accessibility. All of these could be negatively affected by altering the component specifications, so this is not recommended.

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 specifications for a simple bar chart","caption":"Bar chart specifications are built in to the component.","url":"https://dds.dell.com/site/v2/data-visualization/bar-chart/simple-bar-chart/verticalbarchart-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-bar--docs)

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

Simple bar charts are used to compare single-series categorical data points side by side.