Chart Customization

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.

Contents

Elements

All individual elements used to create charts are provided in the Data Visualization Figma library kit. 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.

Axes

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.

Y-axis: shown with values aligned to grid true (left) and false (right).

X-axis: shown with values aligned to grid true (top) and false (bottom).

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.

Legend

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.

Do: choose a different color for each series within a chart, following the categorical color palette.

Don’t: choose the same color for two or more series within a chart.

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.

Tooltip

The DV tooltip is designed specifically for data visualization components, and can be found in the Data Visualization library 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.

Values: DV tooltip with default, recommended content template.

Labels: DV tooltip with altered content template. Changes to the template should only be made if using the provided template would cause inconsistencies among existing tooltips in charts in your product experience.

DV tooltip with default content template in context of a line chart.

DV tooltip with altered content template in context of a line chart.

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.

Plot area

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.

Do: choose gridlines that match the scale determined by your x- and y-axes.

Don’t: choose gridlines that are inconsistent with the scale of your x- and y-axes.

Building a chart

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.

Do: choose a scale that optimizes readability.

Don’t: choose a scale that is overly large for your dataset.

Layout

All charts in the data visualization library sit within a container and follow the same template for padding in pixels. They are designed responsively.

Specifications

When creating a new chart, use the following specifications in pixels.

Padding between chart elements within a container when legend is in its default position.

Padding between chart elements within a container at smaller screen sizes when values are aligned to grid.

When values are not aligned to grid at smaller screen sizes, there is extra padding on the right for visual balance.

Responsive

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.

Tablet showing a chart occupying half the screen and the full screen.