<h2>Elements</h2>
<p>All individual elements used to create charts are provided in the <a href="https://www.figma.com/file/a1X9m1vTZdG3N6xV5G9bz4/Data-Visualization?node-id=5-5466&t=0VvW9TMTdxFrbRde-0">Data Visualization Figma library kit</a>. They provide additional flexibility in prototyping, when a chart component itself must be customized to fit a specific product use case. The elements within this kit can also be used to create charts that are not yet developed by the Dell Design System team. In this case, please consider contributing your design back to the design system.</p>
<h3>Axes</h3>
<p>Typically, y-axis is considered a value axis. It shows numeric information, such as quantity, sales, or totals. The x-axis is considered a categorical axis, and can show values related to time, size, class, and so on.<br>The axes are interchangeable depending on the layout of your plotted data. For most DDS data visualization charts, the y- and x-axes are organized as previously described.</p>
<details data-name='image-block' data-images='[{"alt":"Y-axis is shown as total sales for laptops.","caption":"**Y-axis:** shown with values aligned to grid true (left) and false (right).","url":"https://dds.dell.com/site/production/dd/83/Elements_Axes_Y_Axis_516713c4cc.png"},{"alt":"X-axis is shown as time in months.","caption":"**X-axis:** shown with values aligned to grid true (top) and false (bottom).","url":"https://dds.dell.com/site/production/2e/1e/Elements_Axes_X_Axis_f8c3ea1c9a.png"}]' data-numberofcolumns='2'></details>

<p>In any case, the labels for your axes should concisely describe how your data is being measured, and reflect how you want your data to be read. For example, if you’re reporting laptop sales within the year, your y-axis could be “Total sales” while your x-axis might show “2022” or “Sales quarter” depending on how you’d like to scale your data.</p>
<h3>Legend</h3>
<p>Most charts use a legend to help users identify plotted data. Legend markers are required to map legend labels to their corresponding series. For example, a marker could show fill pattern for bar charts or line color on line charts. Choose labels that best describes the plotted data. If each line represents a different product, use the product name.</p>
<p>If a chart shows only one series of data, likely the axes labels and chart title will be sufficient to describe visualization and a legend may not be required. By default, all charts in the library include a legend. If you’re unsure whether your chart requires one, the safest option is to include it.</p>
<details data-name='image-block' data-images='[{"alt":"Image of a chart with multiple lines in different colors, representing the correct way.","caption":"**Do:** choose a different color for each series within a chart, following the categorical color palette.","url":"https://dds.dell.com/site/production/de/59/Elements_Legend_Do_3ae0defc98.png"},{"alt":"Image of a chart with lines of the same color, a non-recommended practice.","caption":"**Don’t:** choose the same color for two or more series within a chart.","url":"https://dds.dell.com/site/production/03/f7/Elements_Legend_Dont_79a9d499f8.png"}]' data-numberofcolumns='2'></details>

<p>If the legend includes items within its list that exceeds the height of the chart, a vertical scrollbar can be used to contain the number items within the container housing the chart’s elements.</p>
<h3>Interactive legend</h3>
<p>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.</p>
<p>Interactive legend is currently available for line charts only. DDS will soon release it for other charts.</p>
<p>To view the interactive legend and how it works, go to the <a href="https://vanilla-dv.delldesignsystem.com/index.html?path=/story/components-line-chart--basic&args=legend.interactive:true">Storybook live demo</a> and the <a href="https://www.figma.com/design/a1X9m1vTZdG3N6xV5G9bz4/Data-Visualization?node-id=7100-18944&t=440YmBVGhleQbCLv-0">DDS Figma UI Kit</a>.</p>
<p><strong>Isolate a data series</strong></p>
<p>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. </p>
<p>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. </p>
<details data-name='image-block' data-images='[{"alt":"image of a line chart showing an isolated data series in the plot area.","caption":"Selecting a single data series will isolate it on the plot area.","url":"https://dds.dell.com/site/patterns/chart-customization/interactive-legend-isolate-selected--1-.png"},{"alt":"image showing a deselected legend marker being added to the plot area.","caption":"To view a deselected series, the user selects the marker in the legend.","url":"https://dds.dell.com/site/patterns/chart-customization/interactive-legend-hover.png"}]' data-numberofcolumns='2'></details>

<p><strong>Hover to highlight</strong></p>
<p>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.</p>
<details data-name='image-block' data-images='[{"alt":"image of a multi-series line chart in initial state.","caption":"Line chart in initial state.","url":"https://dds.dell.com/site/patterns/chart-customization/interactive-legend-initial-state.png"},{"alt":"image of a multi-series line chart when a data series is isolated by hovering over its legend marker.","caption":"Hovering over a data series marker in the legend will isolate its related series in the plot area.","url":"https://dds.dell.com/site/patterns/chart-customization/interactive-legend-isolate-hover.png"}]' data-numberofcolumns='2'></details>

<h3>Data visualization tooltip</h3>
<p>The data visualization (DV) tooltip is designed specifically for data visualization components and is used to highlight values associated with data points. </p>
<p>The DV tooltip can be found in the <a href="https://www.figma.com/file/a1X9m1vTZdG3N6xV5G9bz4/Data-Visualization?type=design&node-id=5-3549&t=R9m0o01PcvjzftDd-0">Data Visualization library</a> in Figma. Use the predefined layout for showing data to ensure consistency if your team is new to using and creating data visualizations in your product experience. If your team has already determined how to display data within a tooltip for data visualizations in your product, edit the content within the DV tooltip to match your existing experience.</p>
<p>On desktop, the DV tooltip is activated on hover or keyboard focus. On mobile, it is activated by press.</p>
<details data-name='image-block' data-images='[{"alt":"DV tooltip template","caption":"DV tooltip: DV tooltip with default, recommended content template. Changes to the template should only be made if using the provided one would cause inconsistencies among existing tooltips in charts in your product experience.","url":"https://dds.dell.com/site/production/0e/d8/Elements_DV_Tooltip_Options_Values_9ffaadf58b.png"},{"alt":"Image of a multi-series tooltip with two total series shown.","caption":"Multi-series tooltip: Shown with default position and content, can show two to four series within the tooltip’s container.","url":"https://dds.dell.com/site/production/dc/6c/Elements_Multi_series_Tooltip_f4621dad87.png"}]' data-numberofcolumns='2'></details>

<p>Multi-series (MS) tooltip is used in charts where there are multiple data points on the same cursor line. It helps users easily compare the values in a single container and maintain focus on the x-axis plot lines instead of trying to isolate individual data points. This is especially helpful when the touch targets for data points may overlap. Content in the tooltip displays the order of the series in the legend, regardless of the order of points within the plot area, which are grouped by the cursor line.</p>
<details data-name='image-block' data-images='[{"alt":"Image of a chart with a DV tooltip hovering over a point.","caption":"DV tooltip showing a single data point on a single series.","url":"https://dds.dell.com/site/production/00/5c/Elements_DV_Tooltip_Options_Values_Mockup_f4cc14fea3.png"},{"alt":"Image of a chart with a multi-series tooltip hovering over a point group.","caption":"Cursor lines are most beneficial in charts with categorical x-axes. They are automatically placed to the left or right side of the tooltip within the plot area. It is not a requirement for top and bottom placements, as the horizontal line case is unnecessary in charts where the series data are typically stacked or grouped within segments.","url":"https://dds.dell.com/site/production/4d/d6/Elements_Multi_series_Tooltip_Mockup_518fbac71d.png"}]' data-numberofcolumns='2'></details>

<p>In a single series chart, each data point will activate a tooltip that displays its unique data. On desktop, a DV tooltip is activated on hover or keyboard focus of a point element. On mobile, it is activated by press of a point element.</p>
<details data-name='image-block' data-images='[{"alt":"A demonstration of a DV tooltip being activated when hovering over a point.","caption":"On desktop, a DV tooltip is activated on hover or keyboard focus of a point element. On mobile, it is activated by press of a point element.","url":"https://dds.dell.com/site/production/8e/3c/Elements_DV_Tooltip_Trigger_089163fe21.png"}]' data-numberofcolumns='1'></details>

<details data-name='image-block' data-images='[{"alt":"A demonstration of a DV tooltip being activated when hovering over a point.","caption":"Multi-series tooltip in a multi-series chart highlighting all data points related to the cursor line.","url":"https://dds.dell.com/site/production/ac/2e/Elements_Multi_series_Tooltip_Trigger_7c253ecfda.png"}]' data-numberofcolumns='1'></details>

<h3>Plot area</h3>
<p>By default, the plot area is shown with gridlines to help map data points to their x and y values. Gridlines should reflect the scale determined by your x- and y-axes.</p>
<details data-name='image-block' data-images='[{"alt":"A good example of how to plot data within a chart.","caption":"**Do:** choose gridlines that match the scale determined by your x- and y-axes.","url":"https://dds.dell.com/site/production/95/ed/Elements_Plot_Area_Do_bd3a35b7be.png"},{"alt":"An example of how not to plot data on a chart.","caption":"**Don’t:** choose gridlines that are inconsistent with the scale of your x- and y-axes.","url":"https://dds.dell.com/site/production/fa/6d/Elements_Plot_Area_Dont_23fdc4249b.png"}]' data-numberofcolumns='2'></details>

<h2>Building a chart</h2>
<p>Start by determining what kind of chart you need. Choosing the right chart impacts how your audience understands and makes decisions based on the information you’re presenting.</p>
<p>The chart you use depends on what goal you’re trying to accomplish by presenting your data. For example, capturing trends are best shown using a line chart, and trend data can help you make future predictions. Showing parts of a whole, like budget spending breakdowns, can be shown as a pie chart. Storage consumption or percent usage out of a defined total might be shown by a donut chart.</p>
<p>Factors like how data is distributed, how values relate or compare to each other, or how data is composed will help you determine which chart best represents the story you’re trying to tell.</p>
<p>Each story begins with a title. It is important to give your chart a name that clearly summarizes what your chart is displaying. Additionally, concisely describing your axes is important as script in how your data will be read. Your axis labels should describe how data was collected and determine your dataset’s scale. Note that your axes’ maximum values should be greater than the highest value in your dataset in order to contain information within the chart’s plot area.</p>
<p>What increments you choose can affect the readability of your chart. If your data values fall between 0 and 100, consider increments of 10. Larger ranges will typically require larger increments.</p>
<details data-name='image-block' data-images='[{"alt":"Example of a chart&#39;s scale that helps improve readability.","caption":"**Do:** choose a scale that optimizes readability.","url":"https://dds.dell.com/site/production/94/dc/Building_A_Chart_Do_d28a8ea886.png"},{"alt":"Example showing how a large scale makes it difficult to see changes on a line chart.","caption":"**Don’t:** choose a scale that is overly large for your dataset.","url":"https://dds.dell.com/site/production/04/bd/Building_A_Chart_Dont_35d6d7e030.png"}]' data-numberofcolumns='2'></details>

<h2>Layout</h2>
<p>All charts in the data visualization library sit within a container and follow the same template for padding in pixels. They are designed responsively.</p>
<h3>Specifications</h3>
<p>When creating a new chart, use the following specifications in pixels.</p>
<details data-name='image-block' data-images='[{"alt":"Chart elements padding is 24 pixels on the top, bottom, left and right.","caption":"Padding between chart elements within a container when legend is in its default position.","url":"https://dds.dell.com/site/production/99/a0/Layout_Specifications_Full_Chart_4984141743.png"}]' data-numberofcolumns='1'></details>

<details data-name='image-block' data-images='[{"alt":"When the legend is at the bottom and the axis is aligned to the grid, padding is 24 pixels on the top, bottom, left and right.","caption":"Padding between chart elements within a container at smaller screen sizes when values are aligned to grid.","url":"https://dds.dell.com/site/production/ba/6c/Layout_Specifications_Axis_Aligned_To_Grid_True_484af7c012.png"},{"alt":"When legend is at the bottom and the axis are not aligned to the grid, padding is 32 pixels on the right.","caption":"When values are not aligned to grid at smaller screen sizes, there is extra padding on the right for visual balance.","url":"https://dds.dell.com/site/production/3b/c9/Layout_Specifications_Axis_Aligned_To_Grid_False_8d284e1873.png"}]' data-numberofcolumns='2'></details>

<h3>Responsive</h3>
<p>The chart’s 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.</p>
<details data-name='image-block' data-images='[{"alt":"Image of two line charts with different sizes within a mockup. The padding between them should be 16px.","caption":"Tablet showing a chart occupying half the screen and the full screen.","url":"https://dds.dell.com/site/production/69/1c/Responsive_Charts_bd953099ba.png"}]' data-numberofcolumns='1'></details>


The data visualization library includes necessary elements and guidance for customizing existing charts or building new ones that are aligned with the design system foundations.

Chart Customization

<p>The DDS Feedback Form has been updated to point to Service Now (the new official intake form). Please <a href="/resources/videos/servicenow-overview">review this video</a> to learn more about how to interact with our team. Although the tool and process changed, our team expects to continue providing the same support as before.</p>
