Charts and Graphs

Data visualizations are an integral part of many NetApp digital products and web sites. LUCI recommends a specific visual language for charts and graphs, optimized for usability and legibility.

Visual Style

Color

LUCI charts and graphs color palette is distinct from the primary, more broadly applicable LUCI color palette. The colors outlined below are designed to be used in order based on the number of data points in the chart or graph.

Color 1
Color 2
Color 3
Color 4
Color 5
Color 6
Color 7
Color 8
Color 9
Color 10

The primary considerations for the LUCI Chart color palette include:

  • Accessibility; ensure sufficient contrast between colors when comparing up to 10 data points, using the “Stark” plugin for Sketch which simulates colorblindness. These colors were tested for the following: Protanopia, Protanomaly, Deuteranopia, Deuteranomaly, Tritanopia, Tritanomaly, Achromatopsia and Achromatomaly.

  • Cohesiveness; within the chart palette (when extended) and with the broader core LUCI color system.

Per the examples below, charts can also reveal warning ranges and thresholds as follows:

Watch / Moderate risk
Warning / Severe risk

Chart Styles Reference

Chart element Mixins/variables/outcome Properties

Chart Title

luci-chart-title()

Chart Title Example

Source Sans Pro Semibold
20px/24px
Uppercase
#454545

Value Large

luci-chart-value-large()

Value Large Example

Source Sans Pro Semibold
16px/24px
#454545

Value

luci-chart-value()

Value Example

Source Sans Pro Semibold
14px/21px
#454545

Value Small

luci-chart-value-small()

Value Small Example

Source Sans Pro Semibold
12px/18px
#131313

X/Y Axis Units/Dates Small

luci-chart-x-y-unit-small()

X/Y Axis Units/Dates Small Example

Source Sans Pro Regular
10px/15px
#565656

X/Y Axis Units/Dates

luci-chart-x-y-unit()

X/Y Axis Units/Dates Example

Source Sans Pro Regular
12px/18px
#565656

Dividers

$luci-border-component-on-light

solid 1px #D7D7D7

Popover Border

$luci-border-separator-on-light

solid 1px #C2C2C2

End Points

$luci-space-xs, $luci-chart-end-point-border-radius

8px
50%

End Point Hover

$luci-chart-end-point-outline-size, $luci-chart-end-point-hover-opacity

3px
.25

Hover Bar

$luci-space-sm, $luci-color-neutral-96

12px
#F6F6F6

Legend

luci-chart-legend()

Chart Legend Example

Source Sans Pro Semibold
12px/18px
#454545

Example Line Chart Design

Example Line Chart Design

Open Example Line Chart Design PNG

Chart Structure

The LUCI chart structure places core elements consistently.

Chart Structure

Line Charts

Line Charts are good for showing continuous data over time. They can be used to plot a single point, or to allow the user to see the relationship between (and compare) multiple data sets up to ten (10).

Color Progression

LUCI line charts were designed to follow a distinct color order based on the number of values available. A handful of examples are outlined below.

For data points not represented (eg, 5, 8, 9 data points), simply use the ordered progression of the colors outlined above based on the corresponding data points in your graph.

2 data points

2 data points

3 data points

3 data points

6 data points

6 data points

9 data points

9 data points

Data Overlay Panel

An overlay panel is available on-click of the x-axis, to reveal the data across all plotted items for that segment.

Data Overlay Panel

Revealing Thresholds

Color can be added to line chart backgrounds to reveal significant thresholds to users as illustrated below:

Revealing Thresholds

Utilization Charts

Utilization Charts are an important data visualization at NetApp since there’s often a need to reveal available capacity, performance, and other storage values.

Standard / Default

Standard / Default

Warning Threshold

Warning Threshold

Error / Violation Threshold

Error / Violation Threshold

Implementation

There’s not yet a universal, code-based Charts & Graphs library, however, chart styles can be applied using the appropriate variables as illustrated above and available within the LUCI Token file. Designers and developers should use styles and examples provided to guide implementation efforts.