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.
ElementsCopy link to this section
All individual elements used to create charts are provided in the . 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.
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.
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.
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.
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.
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.
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.
The DV tooltip is designed specifically for data visualization components, and can be found in the 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.
On desktop, the DV tooltip is activated on hover or keyboard focus. On mobile, it is activated by press.
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.
Building a chartCopy link to this section
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.
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.
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.
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.
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.
LayoutCopy link to this section
All charts in the data visualization library sit within a container and follow the same template for padding in pixels. They are designed responsively.
When creating a new chart, use the following specifications in pixels.
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.