<h2>When to use</h2>
<p>Gauge chart, utilization chart, and bar chart are components to display data, but they don’t have the same 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>Gauge chart</td>
<td>Used to indicate a single metric’s progress toward a target or goal through an arced slice.</td>
</tr>
<tr>
<td><a href="/data-visualization/utilization-chart/">Utilization chart</a></td>
<td><a href="/data-visualization/utilization-chart/"></a>Use tags to allow users to group, sort, or filter information. Tags frequently contain keywords or metadata. They provide quick access to specific categories and support content classification and navigation.</td>
</tr>
<tr>
<td><a href="/data-visualization/bar-chart/">Bar chart</a></td>
<td><a href="/data-visualization/bar-chart/"></a>Use tags to allow users to group, sort, or filter information. Tags frequently contain keywords or metadata. They provide quick access to specific categories and support content classification and navigation.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"Anatomy of a gauge chart, labeling its elements from 1 to 8.","caption":"Gauge charts are comprised of the following seven elements:\\\n\\\n**1. Header**: includes the chart’s title and optional subtitle. Subtitles are used to provide additional context if it’s necessary to do so.\\\n**2. Start/end value**: meant to be used as a pair, can state a range with start and end value. They provide additional information and context to the value.\\\n**3. Label**: provide additional information and context to the value.\\\n**4. Value**: numerical value that represents the data.\\\n**5. Optional flag**: displays a target in the chart showing the point where the value needs to achieve or avoid.\\\n**6. Rail**: area in which data, conveyed as a slice on the rail, is displayed.\\\n**7. Slice**: an arc visually indicating the value of data on the chart.\\\n**8. 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/data-visualization/gauge-chart/0a795ebc7aa4b0f923e2ac228fd54311f83967b3.png"}]' data-numberofcolumns='1'></details>

<h3>Dial</h3>
<details data-name='image-block' data-images='[{"alt":"anatomy of a semantic dial gauge chart.","caption":"Gauge 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.\n\n2. **Pointer:** Indicates current status\n\n3. **Start/end value:** meant to be used as a pair, can state a range with start and end value. They provide additional information and context to the value. \n\n4. **Value:** provide numeric information or  context to the status.  \n\n5. **Status:** embodies the range of values that determine semantic meaning, whether healthy, warning, or danger.\n\n6. **Rail:** area in which status, conveyed as a slice on the rail, is displayed.","url":"https://dds.dell.com/site/data-visualization/gauge-chart/dial-gauge-anatomy.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","description":"Read about what to consider when choosing a chart type.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

## Usage

Use gauge charts to display a single value of data within a range. Gauge charts are commonly used as a target tracker for estimating and monitoring progress toward or against a goal or flag, and usually contain start and end values.\
\
Use cases of gauge chart can be similar to the [utilization chart](/data-visualization/utilization-chart/), but note gauge chart is made of a single-value display, even though they can be grouped next to each other.

### Target tracker

Gauge chart provides a visual representation of progress towards or away from a goal. This use case enables monitoring data values that vary within the gauge. The chart can include an additional flag as a marker within the chart, used to indicate a goal if that goal doesn’t correspond to the end value. This allows users to display instances where and by how much targets are exceeded.

<details data-name='image-block' data-images='[{"alt":"Three different gauge chart showing how its used. ","caption":"Gauge chart used as a target tracker with a flag to indicate a goal marker","url":"https://dds.dell.com/site/data-visualization/gauge-chart/a6f36c1412f5629dc7fd1fc35a14f5d0bfa217eb.png"}]' data-numberofcolumns='1'></details>

### Performance monitoring

Dial gauge charts visually represent performance status or values, such as speed and temperature, using semantic colors. The pointer on the dial indicates the current data status.

In this use case, the semantic colors help visualization and communication regarding the performance of a resource, with each semantic color representing a specific status (see color section for more information). Healthy status is represented by the green color, warning by the yellow color, and danger by the red color. 

<details data-name='image-block' data-images='[{"alt":"example of performance monitoring showing number of threats within a 24 hour period.","caption":"","url":"https://dds.dell.com/site/data-visualization/gauge-chart/dial-gauge-usage1.png"}]' data-numberofcolumns='1'></details>

You can customize labels based on the use case and rearrange the colors as needed. For example, you can customize the “healthy” status label to “normal”.

There are cases in which three semantic values may not be necessary. It is possible to configure the chart to show chart only two statuses and colors, or to rearrange the order of semantic values. Customize the chart to best fit your use case and only include essential information in your chart.

<details data-name='image-block' data-images='[{"alt":"example of customized semantic ranges using temperature. too cold or too hot is dangerous for a server.","caption":"","url":"https://dds.dell.com/site/data-visualization/gauge-chart/dial-gauge-usage2.png"}]' data-numberofcolumns='1'></details>

## Color

For the sematic use case, each value uses a unique color to help differentiate status. Semantic colors are used to represent specific states and needs to be combined with an icon as color is not a universal experience.  Including an icon, label, or both can increase user understanding. Review the data visualization color palettes for more information.

## Layout

### Specifications

Gauge charts should always follow the same pixel distances between elements to maintain consistency. Note that vertical and horizontal margins are 24 pixels wide on all sides of the plot area. Distance from the header to the gauge is 32 pixels tall. Keep 4 pixels of distance from the flag and the slice gauge itself.

<details data-name='image-block' data-images='[{"alt":"Visual representaton of a gauge chart with its specifications in pixels, mentioned in the body text.","caption":"Gauge chart showing all required specifications for distances between elements in pixels","url":"https://dds.dell.com/site/data-visualization/gauge-chart/fdfbc6730cb1d85533dd007660eeab2f6e68257e.png"}]' data-numberofcolumns='1'></details>

### Responsive

In limited space and smaller breakpoints, truncation will occur in responsive gauge charts. It’s not recommended to have titles, labels, or values longer than one line as they might be truncated if applied to a limited screen space. Start and end values can each contain up to six characters. If adding more than six characters, the value will truncate and show in a tooltip upon hover or focus.

## Interaction

### Behavior and states

Gauge chart includes a concise [data visualization (DV) tooltip](/components/tooltip/?tab=Design#usage) to display the value and label of the data. On desktop, the DV tooltip is activated on hover or keyboard focus. On mobile, it is activated by press. When the tooltip is activated, focus on the gauge will show a ring around the value’s arc.

<details data-name='image-block' data-images='[{"alt":"Gauge chart on focus state with a concise DV tooltip activated","caption":"Gauge chart on focus state with a concise DV tooltip activated","url":"https://dds.dell.com/site/data-visualization/gauge-chart/d5a2d6a170b6c25f214931762ce14b7b01fecad8.png"}]' data-numberofcolumns='1'></details>

Dial gauge charts emphasize the focus state with a size contrast in the state where the pointer is positioned, and a stroke around the status and label. 

<details data-name='image-block' data-images='[{"alt":"showing the focus state of a dial gauge chart.","caption":"","url":"https://dds.dell.com/site/data-visualization/gauge-chart/dial-gauge-interaction.png"}]' data-numberofcolumns='1'></details>

## Standards

### Accessibility

**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)<br></br>

**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 subject the chart is presenting. Optionally include a subtitle if it’s necessary 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 should suffice.\
\
**Chart labels**\
Use concise and clear labels to describe how you’re measuring data within your chart.\
\
**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.

## Live demo

This demo lets you interact with the component and view the code. To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla-dv.delldesignsystem.com/index.html?path=/docs/components-gauge-chart--basic).

<details data-name='live-demo' data-link='https://vanilla-dv.delldesignsystem.com/iframe.html?args=&id=components-gauge-chart--basic&viewMode=story' data-codeBlock='%3Cdiv%20class%3D%22ddv__root%22%3E%0D%0A%20%20%3Cdiv%20class%3D%22dds__container-fluid%22%3E%0D%0A%20%20%20%20%3Cdiv%20class%3D%22dds__row%22%3E%0D%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22dds__col-12%20dds__col--md-12%20dds__col--lg-12%20dds__mb-3%22%3E%0D%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22dds__card%22%20role%3D%22figure%22%20aria-labelledby%3D%22ddvChartTitle%20ddvChartSubtitle%20gauge_2639101439_sr%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22dds__card__content%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22dds__card__header%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22dds__card__header__text%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch5%20id%3D%22ddvChartTitle%22%20class%3D%22dds__card__header__title%22%20tabindex%3D%220%22%3EGauge%20chart%3C%2Fh5%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20id%3D%22ddvChartSubtitle%22%20class%3D%22dds__card__header__subtitle%22%20tabindex%3D%220%22%3EOptional%20subtitle%3C%2Fspan%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fspan%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22dds__card__body%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20id%3D%22gauge_2639101439%22%20data-ddv%3D%22gauge%22%3E%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%3C%2Fdiv%3E%0D%0A%3C%2Fdiv%3E%0D%0A%0D%0A%3Cscript%3E%0D%0A%20%20DDV.Gauge(%7B%0D%0A%20%20%20%20target%3A%20%22%23gauge_2639101439%22%2C%0D%0A%20%20%20%20data%3A%20%5B%0D%0A%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20seriesTitle%3A%20%22Server%201%22%2C%0D%0A%20%20%20%20%20%20%20%20min%3A%20187%2C%0D%0A%20%20%20%20%20%20%20%20max%3A%201623%2C%0D%0A%20%20%20%20%20%20%20%20value%3A%20275%2C%0D%0A%20%20%20%20%20%20%20%20goalValue%3A%201031%2C%0D%0A%20%20%20%20%20%20%20%20optionalLabel%3A%20%22Optional%20value%22%2C%0D%0A%20%20%20%20%20%20%20%20unit%3A%20%22mg%22%2C%0D%0A%20%20%20%20%20%20%20%20unitSr%3A%20%22Milligram%22%2C%0D%0A%20%20%20%20%20%20%20%20prefix%3A%20%22%22%2C%0D%0A%20%20%20%20%20%20%20%20prefixSr%3A%20%22%22%2C%0D%0A%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%5D%2C%0D%0A%20%20%20%20translations%3A%20%7B%7D%2C%0D%0A%20%20%7D)%3B%0D%0A%3C%2Fscript%3E' data-heightInPixels='400' data-title='Gauge chart live demo' data-scroll='false'></details>

<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit Storybook","path":"https://vanilla-dv.delldesignsystem.com/index.html?path=/story/components-gauge-chart--basic","type":"External"},"title":"Vanilla","description":"View gauge chart demo and code in Vanilla.","icon":"metadata"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1'></details>

Gauge charts indicate a single metric’s progress toward a target or goal.

Gauge Chart

React update

<p>The DDS React library now contains all components available in the Angular and Vanilla component libraries.</p>
