<h2>When to use</h2>
<p>Utilization chart, bar chart, line chart, and progress bar are similar components but differentiate on their purpose. Make sure to identify the right use case to make the experience clear for all users.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Utilization chart</td>
<td>Track progress, evaluate the health of a resource, and show a part-to-whole relationship of all data composing a resource.</td>
</tr>
<tr>
<td><a href="/data-visualization/bar-chart/">Bar chart</a></td>
<td>Compare categorical or discrete data. They are preferred for side-by-side comparison or ranking.</td>
</tr>
<tr>
<td><a href="/data-visualization/gauge-chart/">Gauge chart</a></td>
<td>Indicate a single metric or data’s progress toward a target or goal through a slice gauge.</td>
</tr>
<tr>
<td><a href="/components/progress-bar/">Progress bar</a></td>
<td>Provides visual or quantitative feedback to users regarding the real-time system progress.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<p>Simple single and grouped utilization charts maintain the same anatomy and elements and differ only in the number of bar lines within the chart.</p>
<details data-name='image-block' data-images='[{"alt":"Utilization chart showing its seven elements","caption":"Simple utilization charts are comprised of the following seven 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. **Label**: includes the information of how data is being measured within the chart.\n3. **Optional subvalue A and B**: meant to be used as a pair, they provide additional information and context to the value. They can state a range (with subvalue A representing the bottom and subvalue B representing the top) or display utilized and available storage space.\n4. **Optional helper text**: provides additional context about the data measured.\n5. **Rail**: area in which data, conveyed as a bar on the rail, is displayed.\n6. **Value**: numerical value that represents the data. If using semantic colors, it’s followed by an icon representing the information.\n7. **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/utilization-chart/utilizationchart-single-anatomy.png"},{"alt":"Stacked utilization chart showing its eight elements","caption":"1. **Header**: includes the chart’s title and optional subtitle. Subtitles are used to provide additional context if it’s necessary to do so.\n2. **Label**: includes the information of how data is being measured within the chart.\n3. **Optional subvalue A and B**: meant to be used as a pair, they provide additional information and context to the value. They can state a range (with subvalue A representing the bottom and subvalue B representing the top) or display utilized and available storage space.\n4. **Optional helper text**: provides additional context about the data measured.\n5. **Legend**: uses color to define each category.\n6. **Rail**: area in which data, conveyed as a bar on the rail, is displayed.\n7. **Value**: numerical value that represents the data. If using semantic colors, it’s followed by an icon representing the information.\n8. **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/utilization-chart/utilizationchart-single-stacked-anatomy--1-.png"}]' data-numberofcolumns='1'></details>

<h2>Articles</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/choosing-chart-types/","type":"External"},"title":"Choosing Chart Types: Consider Context","description":"Clearly visualize your UX data by providing context and contrast, while avoiding clutter.","icon":"pop-up-arrow"},{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/contrast-charts/","type":"External"},"title":"Contrast: One of the 3Cs for Better Charts","description":"Direct your viewer’s attention to your point. Use color, callouts, and titles to communicate your key takeaway.","icon":"pop-up-arrow"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

## Usage

Utilization charts compare or analyze resource usage, monitor a cycle tracking, evaluate the performance of a resource and monitor its risks, and have other utilizations of this type of data. 

Use a standalone chart to display individual data, such as cycle tracking, and a grouped chart to compare and visualize multiple sets of data simultaneously. 

### Simple utilization chart

Simple utilization charts visualize only one data series within a bar that contains one color to represent this data. They can be single or grouped and don’t require a legend. Simple utilization charts can be used with or without a header.

<details data-name='image-block' data-images='[{"alt":"a simple utilization chart","caption":"A simple utilization chart","url":"https://dds.dell.com/site/v2/data-visualization/utilization-chart/utilizationchart-simple-semantic-types.png"},{"alt":"a grouped simple utilization chart","caption":"A grouped simple utilization chart","url":"https://dds.dell.com/site/v2/data-visualization/utilization-chart/utilizationchart-stacked-semantic-types.png"}]' data-numberofcolumns='2'></details>

### Stacked utilization chart

A stacked utilization chart can be used to show a part-to-whole relationship. It allows the user to analyze all data series that make up the full resource. 

Stacked utilization charts use a legend to aid in differentiating individual data series. The color of a series in the legend should match its color in the chart.

<details data-name='image-block' data-images='[{"alt":"a stacked utilization chart","caption":"A stacked utilization chart with corresponding legend","url":"https://dds.dell.com/site/v2/data-visualization/utilization-chart/utilizationchart-simple-semantic-types--1-.png"},{"alt":"a grouped stacked utilization chart","caption":"A grouped stacked utilization chart with corresponding legend.","url":"https://dds.dell.com/site/v2/data-visualization/utilization-chart/utilizationchart-stacked-semantic-types--2-.png"}]' data-numberofcolumns='2'></details>

### Use cases

#### Progress tracking

Utilization charts are commonly used to track progress by showing the amount of a resource used and that remaining, unlike progress bars that show the progression of a system operation with time remaining as a percentage of progression,  They can also be used for tracking KPI's, or iterative processes.

<details data-name='image-block' data-images='[{"alt":"Example of a simple grouped utilization chart used to monitor a cycle tracking","caption":"Simple grouped utilization chart used to monitor storage","url":"https://dds.dell.com/site/v2/data-visualization/utilization-chart/Utilization_Chart_Group_Categorical2_Usage_455e873cf9.png"}]' data-numberofcolumns='1'></details>

#### Health status

Health status is used to evaluate the condition of a resource. 

Use semantic colors to represent a specific health status, and always include an icon to facilitate an accessible experience.

<details data-name='image-block' data-images='[{"alt":"Example of a simple grouped utilization chart using semantic colors and icons","caption":"Simple grouped utilization chart using semantic colors and icons","url":"https://dds.dell.com/site/v2/data-visualization/utilization-chart/utilizationchart-group-categorical-usage--1-.png"}]' data-numberofcolumns='1'></details>

Composition

Stacked utilization chart can show an entire resource usage in one chart. Use it to analyze all series that compose the full space of a resource, like comparing the storage and the proportional relations and contributions of each series to the total amount.  

<details data-name='image-block' data-images='[{"alt":"","caption":"","url":"https://dds.dell.com/site/v2/data-visualization/utilization-chart/utilizationchart-single-kinds.png"}]' data-numberofcolumns='1'></details>

## Color

Utilization chart relies on the categorical and semantic color palettes. Each value uses a unique color to help users differentiate information. Semantic colors are used to represent specific states and need to be combined with an icon, as relying on color alone is not accessible. 

Categorical colors are provided in sequence to optimize contrast for accessibility and should not be reordered at implementation. 

Review the [data visualization color palettes](/foundations/color/?tab=Data-visualization) for more information.

| Component       | Icon            | Use cases                                                                                                       |
| --------------- | --------------- | --------------------------------------------------------------------------------------------------------------- |
| Semantic green  | alert-check-cir | Represents a healthy and normal scan. No action is needed when this color is displayed.                         |
| Semantic yellow | alert-notice    | Indicates warning and possible risks found during the scan. Action is recommended when this color is displayed. |
| Semantic red    | alert-error     | Cautions critical issues and loss. Action is necessary when this color is displayed.                            |

## Layout

### Specifications

All utilization chart specifications are built into the component. This ensures consistency across products, ease of use, and accessibility.

It is not recommended that you alter the component specifications. This could have negative effects.

The component adds built-in widths for both the label and the value fields. If the label exceeds the space allotted for max width, the text is truncated and will show in a tooltip upon hover.

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

<details data-name='image-block' data-images='[{"alt":"Pixels specifications for a simple grouped utilization chart","caption":"Pixels specifications for a simple grouped utilization chart","url":"https://dds.dell.com/site/v2/data-visualization/utilization-chart/Utilization_Chart_Group_Specs_dccc2643f3.png"},{"alt":"Stacked utilization chart specifications","caption":"\nSpecifications for a grouped stacked utilization chart","url":"https://dds.dell.com/site/v2/data-visualization/utilization-chart/utilizationchart-group-stacked-specs.png"}]' data-numberofcolumns='1'></details>

### Responsive

Utilization charts sizes are responsive at different breakpoint ranges. Consider how data will look across various devices, as smaller charts cannot accommodate as many categories as larger charts. It’s not recommended to have titles, labels, values, or helper texts longer than one line as they might be truncated if applied to a limited screen space.

## Interaction

### Behavior and states

#### Tooltip

Utilization chart includes a [data visualization (DV) tooltip](/components/tooltip/?tab=Design#usage) to display the label and value 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. When the tooltip is activated, the bar will be on focus state.

<details data-name='image-block' data-images='[{"alt":"DV tooltip being used in a simple single utilization chart","caption":"DV tooltip being used in a simple single utilization chart","url":"https://dds.dell.com/site/v2/data-visualization/utilization-chart/Utilization_Chart_Group_Tooltip_Interaction_068b5fcef8.png"}]' data-numberofcolumns='1'></details>

#### Scroll

Scroll behavior is applied in cases where grouped utilization charts are displayed in limited space. In these cases, the responsive container will hide some plot areas, and the scroll behavior ensures that users can scroll to view all chart information.

<details data-name='image-block' data-images='[{"alt":"Scroll behavior applied to a simple grouped utilization chart","caption":"Scroll behavior applied to a simple grouped utilization chart","url":"https://dds.dell.com/site/v2/data-visualization/utilization-chart/Utilization_Chart_Group_Scroll_Interaction_3080c37199.png"}]' data-numberofcolumns='1'></details>

## Standards

### Accessibility

**Avoid placing too many lines in a grouped chart**\
While there is not a recommended maximum number of lines a chart can support, consider the chart size and responsive behavior when adding multiple lines within a chart. Too many lines within the same chart can negatively impact a chart’s readability.\
\
\
**Each line must be easily distinguished from the others**\
In addition to quantity, line color also plays an important part in readability. In charts where multiple lines are shown, using the categorical color palette with sequences preserved will help maintain contrast between lines.\
\
\
**When using semantic colors, make sure to add an icon**\
Each semantic color represents a state, but relying on color alone to communicate information is not an accessible practice. Make sure to combine color and its icon to communicate a state when using semantic colors. WCAG 2.2: [SC 1.4.1 Use of Color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html)

\
**Tooltips are activated via pointer, keyboard, and touch**\
Tooltips help reduce cognitive load and improve readability of utilization chart data. Use them even when bar values are labeled in the plot area. They display the focused bar values and are placed at the top of the bar, but if the bar is too short or close to the edges, show it at the right of left. Do not cause the tooltip to disappear or timeout after a set interval.\
WCAG 2.2: [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. Each tooltip in your application should show the values in the same way.

### Content

**Chart title**\
Be brief and descriptive about the chart's subject. Optionally include a subtitle to provide more context about the chart. Every chart should include a chart title, except in cases where you’re showing more than one chart in the same container or widget. In this case, a group title will suffice.\
\
\
**Chart labels**\
Use concise and clear labels to describe how you’re measuring data within your chart.\
\
\
**Chart helper texts**\
In this situation, helper texts are used to provide additional information on how the the chart is measuring data and its context. Keep the content concise and clear. Helper text appears below the plot area.\
\
\
**Capitalization**\
Use sentence case unless providing an explanation for an acronym or initialism.\
\
\
**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.

Design

This demo lets you interact with the utilization 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-utilization--docs)

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

Code

Utilization charts show how much of a particular resource is being used at any given time.

Utilization Chart