ColorManager

To manage colors in a centralized way, you can leverage the ColorManager, which is available in the JavaScript context under the variable colorManager.
For more details about the already registered colors and palettes, you can refer to the Brand Configuration article.

The Color Manager provides methods to manage color palettes.

// registers a new color to be used when the HEATING string must printed out.
colorManager.registerColor("HEATING", "#DD4B39");

// registers a new color palette.
colorManager.registerColorPalette("my-colors", ["#DD4B39", "FFD800", "#08B05B"]);

In the Custom Filters component, you can register your own colors, which will be used by components (such as widgets or filters).

// retrieves the color registered for the HEATING status string.
let heatingColor = colorManager.getColor("HEATING");

// retrieves the color palette registered for chart visualization.
let chartColors = getColorPalette("chart")

Here is an example of an amChart4-based widget, which uses the ColorManager to set the axis and grid colors.

let axisColor = colorManager.getColor("CHART_AXIS");
if (axisColor) {
    axis.renderer.line.stroke = am4core.color(axisColor);
    axis.renderer.line.strokeOpacity = 1;
    axis.renderer.line.strokeWidth = 1;
}

let gridColor = colorManager.getColor("CHART_GRID");
if (gridColor) {
	axis.renderer.grid.template.stroke = am4core.color(gridColor);
}

let labelColor = colorManager.getColor("CHART_LABEL");
if (labelColor) {
    axis.renderer.labels.template.fill = am4core.color(labelColor);
}

Methods