D3 chart

Description ​

D3 chart components offer various chart types and tools for data visualization.

Refer to Charts showcase, to explore all charts and pick the best one for your needs.

Grid and axes ​

Axes help users understand data relationships and navigate through data. A plot can include horizontal and vertical lines.

	Appearance example	When to use
Horizontal lines		Use with charts showing data trends over time.
Both horizontal and vertical lines		Use with scatter plots and bubble charts.
Vertical lines		Use with horizontal bar charts.

Basic styles for Chart.Plot:

• The Y-axis is hidden by default.
• Additional axes are colored with --chart-grid-line token.
• X-axis and additional active lines on the grid (if needed) have --chart-grid-x-axis color.

Margins ​

• Y-axis values have 16px left and right margins.
• X-axis values have a 12px top margin.

Reference line ​

You can show different reference lines (highlight date or dates range) to guide user through your data visualization.

Minimum and maximum axes' number ​

Use 3-5 horizontal additional horizontal lines for clarity. Use rounded values on axes, for example, 25K, 20K, 15K, 10K.

It's recommended for smal charts having no more than 3 horizontal lines.

The maximum chart height depends on your specific case. For charts with greater heights, use no more than 5-6 additional horizontal lines.

Tooltip ​

Tooltips show data when hovering over chart parts, even if no data is present (use "n/a" in this case).

The tooltip aligns with the cursor with a 4px margin within the chart area.

• It shows data for all lines for a selected date.
• Align tooltip values to the right for easy comparison.
• Include total values in the tooltip.
• Synchronize tooltips across charts for data comparison.

Tooltip styles ​

Tooltip padding is always 12px.

Edge cases ​

Not available data ​

Represent missing data with a dashed line.

Start of data collecting ​

Use a solid line for new data. The tooltip should mention the start of data collection, use --chart-grid-y-accent-hover-line token for the text color.

Dots ​

Chart dot styles

Appearance	Styles
	Default dot size is 8px * 8px. The dot's size in hovered state is 10px * 10px.
	Color for the additional vertical line that appears on line charts when hovering is --chart-grid-y-accent-hover-line.
	Background color for hovering bar charts is --chart-grid-bar-chart-hover.

Legend ​

Legend explains chart data and can act as filters. For detailed information, refer to Chart legend.

Usage with Card ​

In our design system, data is typically placed within a Card, which consists of the Card.Header and Card.Body.

Chart title ​

Every chart needs a clear title. If the title is far from the chart, ensure clear margins. Make titles clickable and use an Info icon for additional details.

For the chart title, use 16px text (--fs-300, --lh-300, font-weight: var(--bold)) and --text-primary token for color. M size Info icon has --icon-secondary-neutral color and margin-left: 4px. Hover state for the clickable title matches link styles.

Chart description ​

You can add a description text to your chart. Typically, such a text can provide information on maximum/minimum data statuses, explains the data source, or offers insightful advice related to visualized data.

For the description text, use 14px text (--fs-200, --lh-200) and --text-secondary token for color.

Initial data loading ​

During the initial data loading, display the Skeleton instead of the chart.

If the chart has a title, it should be displayed during the initial loading. The user should be aware of what is being loaded, and whether they need to wait for the process to complete.

Edge cases ​

Edge cases vary by chart type. Check the specific chart documentation for details. For empty states, refer to Error & n/a widget states.