Charts

COMPONENTS

Charts visualize and synthesize complex datasets and they are key elements of most applications that are built at Goldman Sachs.

View GSUI Toolkit Documentation (Internal Only)

View in Figma (Internal Only)

The Goldman Sachs Design System offers a rich set of full-fledged components that are designed using proven visualization standards and foundations. Our Charts are built on top of two different libraries: Highcharts and Aurora/d3.js.

Anatomy

Header
Legend
Plot Area
Plotted Data
Tooltip and Scrubber
Y-axis
X-axis
Footer

Sizes

Charts are responsive allowing them to adapt to different screen sizes and devices without loss of functionality and user interaction.

Behaviors

Data Disclosure

Charts automatically come with tooltips that appear when hovered on to display additional information.

Data Editing

For multiple-series Charts, legends can be checked, unchecked or hovered to hide or highlight data series.

Data Focus

Stock Charts allow the user to zoom and pan to explore the data in more detail.

Customization

Charts can be used with their default settings, but they also come with an extensive set of configuration options that can be customized to meet the design requirements of any application.

Chart Layouts

Chart elements can be hidden or reconfigured to meet the requirements of different forms of data storytelling.

Chart Colors

Learn how to apply our visual language to your data visualizations.

Chart Guidelines

Learn which chart to use to build the most effective visualizations.

Chart Types

Get details on how to use and build each chart type in the system.

Creating the Goldman Sachs Design Color System

Learn about the research and testing that went into our color palette.

Contents