Skip to main content

Coloring

Predefined Color Palettes​

The colorPalette prop allows you to set the chart color palette to be used within the chart (i.e. to color the chart's series). Depending on the selected color palette, the color is then applied to the series by index or by value.

When utilizing the index-based method, colors are allocated to the series in a sequential manner. Once the last color in the sequence is reached, the series will restart from the beginning with the same color sequence. The following color palettes employ the index-based approach for color assignment:

  • categorical (default)
  • swamps
  • fireplace
  • blue-steel
  • purple-rain

Color Palette by Index on Timeseries Chart​

CodeSandbox

When employing the value-based approach, colors are automatically allocated to correspond with the series name. For instance, a series labeled as "Error" would be associated with the color denoted as "error". The correlation between a series name and color value is not influenced by letter case, ensuring a case-insensitive matching process. In cases where a series does not align with any color palette value, the color assignment is determined based on the index of the series. The available color palettes and their respective admissible values are as follows:

  • log-status ( error, warn, info, none )
  • apdex ( excellent, good, fair, poor, unacceptable )
  • log-level ( emergency, alert, critical, severe, error, warn, notice, debug, info, none )
  • vulnerability-risk-level ( critical, high, medium, low )
  • vulnerability-status ( affected, resolved, muted )

Color Palette by Value on Categorical Bar Chart​

CodeSandbox

Custom Color Palettes​

There is also the option to supply a personalized collection of colors, which will be subsequently applied to the chart series based on their index. To accomplish this, you can furnish an array of color strings using the colorPalette prop. The provided color strings can utilize any format supported by web browsers, including RGB, HSL, HEX, as well as color tokens.

Custom Color Palette Value on Donut Chart​

CodeSandbox

Custom Color Maps​

In addition, there is the capability to assign colors that correspond to specific chart series names. To achieve this, you can provide a map consisting of series name-color pairs, where the series name acts as the key and the corresponding color as the value. The provided color strings can utilize any format supported by web browsers, including RGB, HSL, HEX, as well as color tokens. To implement this functionality, you can pass the aforementioned map to the colorPalette prop.

Custom Color Palette Value on Pie Chart​

CodeSandbox

Overriding Series Color​

Apart from all these options for providing a color palette, each chart also offers the ability to override colors for specific series. These overrides can be defined in the "Coloring" section of each chart's documentation. When a color override is specified, it takes precedence over the color that would otherwise be assigned from the color palette. However, it does not affect the colors assigned to other series. This allows for fine-grained control over the appearance of individual series within a chart.

Still have questions?
Find answers in the Dynatrace Community