Skip to main content

    Chart 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

    All color palettes can be used in reverse order by adding the suffix -inverted to the palette name. For example, categorical would become categorical-inverted

    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 )

    If you want to use an inverted color palette using the value-based approach, it will only work in cases where the name does not match a category. In such cases, the order of the colors in that palette will be inverted.

    CodeSandbox

    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 with ColorRule​

    The ColorRule component provides a powerful way to apply conditional coloring to your chart series based on their values or names. This is particularly useful for highlighting specific data points or applying business logic to your visualizations.

    Basic Usage​

    ColorRule can be used as a subcomponent of most of the chart to apply conditional coloring rules. Each rule consists of:

    • comparator: The comparison operator to use (e.g., 'starts-with', 'ends-with', 'contains', 'equals')
    • matchValue: The value to match against
    • color or colorPalette: The color or palette to apply when the rule matches
    • valueAccessor(optional): accessor property to extract the value from the data point. If not set, each chart has its own default value accessor.

    Example: Color Rules in Action​

    CodeSandbox

    Available Comparators​

    • equals: Exact match
    • starts-with: Series name starts with the specified value
    • ends-with: Series name ends with the specified value
    • contains: Series name contains the specified value
    • regex: Match using a regular expression

    Color Application​

    • When multiple rules match a series, the last matching rule takes precedence
    • If no rules match, the series uses the default color from the chart's color palette
    • You can use either a specific color (hex, rgb, color token) or a color palette

    Best Practices​

    1. Order your rules from most specific to most general
    2. Use color palettes for consistent theming across related series
    3. Consider color accessibility when choosing custom colors
    4. Test with different data sets to ensure rules work as expected

    Note: Color rules take precedence over the chart's color palette but can be overridden by direct color assignments in the data series.

    Still have questions?
    Find answers in the Dynatrace Community