COMPONENTS

Charts

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

chart-intro

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.

chart-anatomy
  1. Header
  2. Legend
  3. Plot Area
  4. Plotted Data
  5. Tooltip and Scrubber
  6. Y-axis
  7. X-axis
  8. Footer

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

chart-appearance-sizes

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

chart-behaviors-disclosure

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

chart-behaviors-editing

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

chart-behaviors-focus

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 elements can be hidden or reconfigured to meet the requirements of different forms of data storytelling.

chart-customization-layouts