<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Line chart</td>
<td>Line charts connect a series of data points using a line, and are commonly used to show data trends over time.</td>
</tr>
<tr>
<td><a href="/data-visualization/bar-chart/">Bar chart</a></td>
<td>Bar charts are used to compare categorical or discrete data. They are preferred for side-by-side comparison or ranking.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"Image of a line chart with its elements labeled from 1 to 8.","caption":"Line charts are comprised of the following eight 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 information:** includes a label and values. The label represents how data is measured, while its values are the incremental measurements, or scale, for plotted data.\n3. **X-axis information:** includes a label and values. The label is the categorical reference over which data is measured, while its values are the intervals in which those measurements occur. Commonly, the x-axis represents time.\n4. **Legend:** uses markers and labels to define their respective series, represented by lines, within the chart.\n5. **Data point:** shown visually using the point element, and represents a single piece of data on a line.\n6. **Line:** lines connect a series of data points.\n7. **Plot area:** shown as a grid within the line chart, where data is displayed.\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/line-chart/Line_Chart_Anatomy_50372c4729.png"}]' data-numberofcolumns='1'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

## Usage

Use line charts to represent changes in data that were measured in a fixed interval or over a linear progression, such as time. Line charts can display a single or multiple series, with each series represented as its own line, depending on the type of analysis you’d like to support.

### Trends

Line charts are especially helpful in tracking behavioral changes and showing trends in data. In addition to serving as a snapshot of historical data over a period of time, analysis of the chart can be used to make predictions about how the series data may behave in the future.

<details data-name='image-block' data-images='[{"alt":"Line chart showing DDS website traffic from January to June.","caption":"","url":"https://dds.dell.com/site/v2/data-visualization/line-chart/Line_Chart_Usage_Trends_v2_3dab219589.png"}]' data-numberofcolumns='1'></details>

### Comparison

Including multiple series in a chart can highlight differences and correlations within your data, depending on each line’s path and potential intersections. When showing multiple lines within a chart, each series should have the same relationship to the measured category as summarized by the chart’s title. They should use the same values and have a similar scale. Series that are vastly different in scale might not be best to include for comparison purposes as it can reduce precision in the visual representation of the chart, and analysis can be summarized easily without it.

When the chart shows multiple lines, use different [colors](/foundations/color/?tab=Data-visualization) to distinguish between series within the chart (see color below). Charts with fewer lines are easier to consume, while too many lines can cause clutter and make the visualization difficult to understand.

<details data-name='image-block' data-images='[{"alt":"Line chart with multiple lines and multi-series tooltip showing laptop sales from Q1 of 2022 to Q2 of 2023 for Alienware, Latitude, Precision, and XPS. ","caption":"","url":"https://dds.dell.com/site/v2/data-visualization/line-chart/Line_Chart_Usage_Comparison_v2_2747784374.png"}]' data-numberofcolumns='1'></details>

In multi-series tooltips, all the information from the group series will be displayed. Note that if no data is available for a specific series or category, it will not be included or displayed on the tooltip.

<details data-name='image-block' data-images='[{"alt":"A demonstration of a multi-series tooltip when a series does not have data in a point group. ","caption":"Example of a multi-series tooltip when a series does not have data in a point group.","url":"https://dds.dell.com/site/v2/data-visualization/line-chart/Elements_DV_Tooltip_Trigger_1_83f0ae5c07.png"}]' data-numberofcolumns='1'></details>

## Color

Line chart data relies on the categorical color palette to help users distinguish data trends. Each series uses a unique color to help differentiate information. Note that categorical colors are provided in sequence to optimize contrast for accessibility and should not be reordered at implementation. Review the [categorical color palette ](/foundations/color/?tab=Data-visualization#categorical-palette)for more information.

## Layout

The component has its legend set to the right of the chart by default. However, the smallest chart size in the desktop view sits across a [4-grid column](/foundations/grid/#baseline-grid) and shows the legend below the chart’s x-axis. The chart and legend are designed to adapt to different layouts and screen sizes responsively.

### Responsive

The legend will automatically reposition below the chart’s x-axis for smaller viewports. This is true for tablet views in which a chart occupies a 3-grid column and all mobile chart views. The legend’s placement is programmatically determined in the chart’s code. Consider how your data will look across multiple devices, as smaller charts cannot accommodate multiple series as easily as larger charts.

<details data-name='image-block' data-images='[{"alt":"Desktop view of a line chart.","caption":"In the larger desktop views, the legend’s position is to the right of the chart.","url":"https://dds.dell.com/site/v2/data-visualization/line-chart/Line_Chart_Responsiveness_1_04293697c0.png"},{"alt":"Responsive view of a line chart.","caption":"The legend moves below the chart for smaller viewports.","url":"https://dds.dell.com/site/v2/data-visualization/line-chart/Line_Chart_Responsiveness_2_3e05ff6719.png"}]' data-numberofcolumns='2'></details>

## Interaction

Line chart uses a [tooltip](/components/tooltip/) to display values for each data point included on a series. The data visualization (DV) tooltip is designed specifically for data visualization components, and can be found in the [data visualization library](https://www.figma.com/file/a1X9m1vTZdG3N6xV5G9bz4/Data-Visualization?node-id=5-5466&t=0VvW9TMTdxFrbRde-0) in Figma. On desktop, the DV tooltip is activated on hover or keyboard focus. On mobile, it is activated by press.

## Standards

### Accessibility

**Avoid placing too many lines within the same 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](/foundations/color/?tab=Data-visualization#categorical-palette) with sequences preserved will help maintain contrast between lines.

**All tooltips should be able to be activated and dismissed via pointer, keyboard, and touch**\
Users should have full control of the tooltip interaction regardless of device. 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 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 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 once activated.

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

Design

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

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

Code

Line charts connect a series of data points using a line, and are commonly used to show data trends over time.

Line Chart