Ready

Data Visualization

Data visualizations make complex data easier to understand and help users answers specific questions.

Ready

Data Visualization

Data visualizations make complex data easier to understand and help users answers specific questions.

Ready

Data Visualization

Data visualizations make complex data easier to understand and help users answers specific questions.

Variants

Variants

Variants

  1. Categorical: Categorical colors are used to represent non-numerical items with no inherent ordering. The colors are chosen to be visually distinct to help users distinguish between the different items in the data visual.

  2. Sequential: Sequential colors are used to represent numerical values with an inherent ordering.

  3. Divergent: Divergent colors are used to represent used to represent numerical values with an inherent ordering that include two extremes. There is a baseline value between the two extremes.

  4. Feedback: Feedback colors are used to represent data that is either within or outside of a defined threshold.

Best Practices

Best Practices

Best Practices

1. Data Visibility

Make data values visible when possible. Do not rely on hover states to convey important data.

2. Data Legend

If a data visual is displaying multiple values within a single category, provide a legend to define what the different colors represent.

3. Tool Tip

Use tool tip to display data values that are directly related to the users cursor position on the data visual. Do not use tool tips to provide generic information about the data visual.

4. Y-axis Start

Data visualizations that have a y-axis should always star at zero. Starting with a number value can skew the results and make the visualization misleading.

5. Empty States

All data visuals should use appropriate Empty States that explain why the visual is not displayed.

Tokens

Tokens

Tokens

Name

Value

Name

Value

Name

Value

--categorical-blue

--categorical-blue

--categorical-blue

--categorical-blue

--categorical-blue

--categorical-blue

--categorical-orange

--categorical-orange

--categorical-orange

--categorical-orange

--categorical-orange

--categorical-orange

--categorical-turquoise

--categorical-turquoise

--categorical-turquoise

--categorical-turquoise

--categorical-turquoise

--categorical-turquoise

--categorical-pink

--categorical-pink

--categorical-pink

--categorical-pink

--categorical-pink

--categorical-pink

--categorical-green

--categorical-green

--categorical-green

--categorical-green

--categorical-green

--categorical-green

--categorical-purple

--categorical-purple

--categorical-purple

--categorical-purple

--categorical-purple

--categorical-purple

--categorical-teal

--categorical-teal

--categorical-teal

--categorical-teal

--categorical-teal

--categorical-teal

--categorical-navy

--categorical-navy

--categorical-navy

--categorical-navy

--categorical-navy

--categorical-navy

--sequential-blue-60

--sequential-blue-60

--sequential-blue-60

--sequential-blue-60

--sequential-blue-60

--sequential-blue-60

--sequential-blue-50

--sequential-blue-50

--sequential-blue-50

--sequential-blue-50

--sequential-blue-50

--sequential-blue-50

--sequential-blue-40

--sequential-blue-40

--sequential-blue-40

--sequential-blue-40

--sequential-blue-40

--sequential-blue-40

--sequential-blue-30

--sequential-blue-30

--sequential-blue-30

--sequential-blue-30

--sequential-blue-30

--sequential-blue-30

--sequential-blue-20

--sequential-blue-20

--sequential-blue-20

--sequential-blue-20

--sequential-blue-20

--sequential-blue-20

--sequential-blue-10

--sequential-blue-10

--sequential-blue-10

--sequential-blue-10

--sequential-blue-10

--sequential-blue-10

--diverging-orange-30

--diverging-orange-30

--diverging-orange-30

--diverging-orange-30

--diverging-orange-30

--diverging-orange-30

--diverging-orange-20

--diverging-orange-20

--diverging-orange-20

--diverging-orange-20

--diverging-orange-20

--diverging-orange-20

--diverging-orange-10

--diverging-orange-10

--diverging-orange-10

--diverging-orange-10

--diverging-orange-10

--diverging-orange-10

--diverging-neutral

--diverging-neutral

--diverging-neutral

--diverging-neutral

--diverging-neutral

--diverging-neutral

--diverging-teal-10

--diverging-teal-10

--diverging-teal-10

--diverging-teal-10

--diverging-teal-10

--diverging-teal-10

--diverging-teal-20

--diverging-teal-20

--diverging-teal-20

--diverging-teal-20

--diverging-teal-20

--diverging-teal-20

--diverging-teal-30

--diverging-teal-30

--diverging-teal-30

--diverging-teal-30

--diverging-teal-30

--diverging-teal-30

More

More

More

Accessibility

Color contrast ratio for our data visuals meets AA standards, based on Web Content Accessibility Guidelines (WCAG) guidelines.

  1. Benefits: People with low vision often have difficulty reading text that does not contrast with its background. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a minimum luminescence contrast ratio between the text and its background can make the text more readable even if the person does not see the full range of colors. It also works for the rare individuals who see no color.

Additional Reading

Need more guidance?

Suggest an addition or an edit.

Need more guidance?

Suggest an addition or an edit.

Need more guidance?

Suggest an addition or an edit.

© 2025 Basis Technologies
© 2025 Basis Technologies
© 2025 Basis Technologies