- Use color thoughtfully and don't make colors too bright without a reason. Keep in mind the visual hierarchy.
- If there are several widgets on a page that mention the same entity, then use the same color for the entity in all widgets on the same page.
- Keep in mind that green and red are often associated with good and bad, growth and decline.
We recommend using red carefully. It is usually used for destructive actions and invalid states.
You can find all tokens for charts in the tokens list. They all have
chart in their token name.
Tokens for text and additional information
|Basic text information|
|Additional text information|
|The X-axis and the accent lines on the grid when, if needed|
|Additional guide lines|
There are two ways of coloring your data with our palette.
--chart-palette-order-other-data token to indicate voids, missing or some other data.
This way helps to color your data in a monochromatic way. In this case use tokens from the base palette in the tokens list.
Need more colors?
The recommended maximum number of colors on a chart is 30.
30 and more colors are for the really complex cases where you need a large number of colors that will be set for the data by the system.
To make a usable palette for this case first use tokens from the base palette with a hue of 300, then 200, then 400 and repeat this steps until you get the desired number of colors.