New to Kendo UI for Angular? Start a free 30-day trial

Changing Radial Gauge Label Colors Conditionally

Environment

Product

Progress® Kendo UI® for Angular RadialGauge

You may want to customize the colors of the labels in the Kendo UI for Angular RadialGauge component based on their content. For example, you might want different colors for labels containing specific text or numeric values, or to highlight certain ranges or categories.

This knowledge base article also answers the following questions:

How to change the color of RadialGauge labels based on their content?
How to apply dynamic colors to RadialGauge labels?
Can RadialGauge labels have different colors for text and numbers?

Solution

To achieve conditional label coloring, the color property of the Kendo UI for Angular RadialGauge does not directly support dynamic functions. However, this can be implemented using custom JavaScript to target the text elements and set their colors based on conditions. Follow these steps:

Use the querySelectorAll() method to select all text elements within the RadialGauge.
Iterate over the text elements to access their content.

Match the label content with predefined conditions and apply the desired color using the fill attribute.

public setLabelColor(): void {
  const textElements = document.querySelectorAll('text');
  textElements.forEach((textElement) => {
    const label = textElement.textContent?.trim();
    if (label) {
      const range = this.ranges.find((item) => item.label === label);
      if (range) {
        this.renderer.setAttribute(textElement, 'fill', range.color);
      }
    }
  });
}

The following example demonstrates the complete implementation of this approach:

Change Theme

Theme

Loading ...

Changing Radial Gauge Label Colors Conditionally

Environment

Description

Solution

See Also