If you build dashboards in Boomi Flow, you know how powerful its charting components can be. Powered by Chart.js under the hood, it’s usually straightforward to get a good-looking dashboard up and running. But what happens when you need two charts on the same page—like a Donut Chart and a Bar Chart—to use completely different color palettes, and the platform refuses to cooperate?
If you’ve tried overriding the --color-chart CSS variables only to watch both charts stubbornly share the exact same global colors, you aren't alone. Here is a breakdown of why this happens and the CSS "hack" you need to fix it.
The Problem: The Global Variable Trap
In Boomi Flow, chart colors are typically controlled by a set of CSS variables (e.g., --color-chart-1, --color-chart-2) attached to a high-level .flow class.
When you place a Bar Chart and a Donut Chart on the same page, they both act as children of this .flow parent. Even if you wrap each chart in a custom
(like .mizuho-barchart and .mizuho-donut) and try to assign unique variables to those classes, Boomi's engine often bypasses your local CSS. Instead, the JavaScript engine jumps straight to the root .flow class, grabs the global color palette once, and paints both canvas elements with the exact same brush.The Solution: The Canvas Filter Hack
Because the charts are rendered onto an HTML , they are essentially flattened images once drawn. Standard CSS variables can't easily change pixels that are already painted.
Instead of fighting the JavaScript engine for control of the CSS variables, we can let Boomi paint both charts with the same global palette, and then use CSS filter properties to visually shift the colors of the second chart post-render.
Here is how you do it:
Step 1: Set Your Base Palette
First, define the global CSS variables for your primary chart (in this case, the Donut Chart). We will use a clean, professional palette of Dark Navy, Coral, Teal, and Medium Blue.
CSS
/* 1. BASE PALETTE (This colors the Donut Chart) /
.flow {
--color-chart-1: #033d58 !important; / Dark Navy /
--color-chart-2: #ff7c66 !important; / Coral /
--color-chart-3: #22c5be !important; / Teal /
--color-chart-4: #4a8bd6 !important; / Medium Blue */
}
Step 2: Override the Second Chart with hue-rotate
Next, we target the specific container for the second chart (the Bar Chart) and apply a CSS filter directly to its canvas.
The hue-rotate() filter pushes the original colors across the color wheel. We can combine this with saturate and brightness to fine-tune the resulting color so it looks entirely distinct from the Donut Chart.
CSS
/* 2. BAR CHART OVERRIDE (Dramatically shifts the colors) /
.mizuho-barchart canvas {
/ hue-rotate(120deg) shifts the Navy base to a rich Emerald Green.
saturate(1.2) keeps it punchy.
brightness(1.1) lightens it slightly.
*/
filter: hue-rotate(120deg) saturate(1.2) brightness(1.1);
}
Adjusting the Formula
Because your Bar Chart is now mathematically linked to the base palette, you can easily change its color profile just by tweaking the degrees:
0deg: Stays Dark Navy (matches the base).
120deg: Emerald Green.
180deg: Warm Bronze.
240deg: Deep Purple.
Conclusion
When working with low-code platforms, you sometimes hit a wall where the underlying JavaScript framework overrides your custom CSS. By treating the rendered as an image and using powerful CSS filters like hue-rotate, you can bypass these limitations and deliver exactly the UI your users (or clients) are asking for.
Top comments (0)