# 📊 CSS Hack: Dynamic Coloring Stacked Bar Chart

**URL:** https://community.glideapps.com/t/css-hack-dynamic-coloring-stacked-bar-chart/85853
**Category:** Community Resources
**Tags:** custom-css, tutorial, charts
**Created:** [January 2, 2026, 12:31am UTC](https://community.glideapps.com/t/css-hack-dynamic-coloring-stacked-bar-chart/85853 "2026-01-02T00:31:32Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [January 2, 2026, 12:31am UTC](https://community.glideapps.com/t/css-hack-dynamic-coloring-stacked-bar-chart/85853/1 "2026-01-02T00:31:32Z")

</div>

This demonstration shows how CSS can be pushed beyond static styling to create conditional visual behavior in stacked bar charts, where each bar consists of multiple stacked layers (bottom → very top).

In this approach, the Rich Text component is not used as a visibility trigger, but as a lightweight HTML container whose attributes are generated from data.  
These attributes (classes, IDs, or data-attributes) are then queried by CSS using :has(), allowing chart appearance to respond indirectly to those attributes.

**Reference:**  
🧠 [CSS Hack: Dynamic CSS in Glide](https://community.glideapps.com/t/css-hack-dynamic-css-in-glide/85080)

| |
| --- |
| _You don’t need to understand every selector here — just copy the pattern that fits your use case._ |

## 1. Bar Chart / Chart (Beta) — Order-Based Bar (nth-bar)

Classes **A–F** are written into a Rich Text container as _data-signaling selectors_:

```auto
<div class="A B D"></div>

```

> - Each selector corresponds to one bar ( **A → bar 1, B → bar 2, … F → bar 6** ) and switches the bar between red and blue.
> - These selectors target _bar positions (render-order dependent)_, not fixed data rows.
> - The `+` combinator is used to target individual stacked layers within each bar.
> - Tooltips automatically adapt to the active stack color on hover.

> **Note:** This method works for all Bar Chart components. It is ideal when the order of bars is fixed and predictable.

![Dynamic Stacked Bar Chart](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/3/e3cce3f0b4998a4752fe07d0c9b904c3cf139827.gif)

Here is the CSS logic code built to generate visual behavior based on data conditions:

> **📌 CSS Code Template — Order-Based Bar**
>
> **1.a. Main — Stacked Bars**
> 
> ```auto
> :root {
> --bottom-red: #ffcccc; --bottom-blue: #cce0ff;
> --middle-red: #ff9999; --middle-blue: #99b3ff;
> --top-red: #ff3333; --top-blue: #3366ff;
> --vtop-red: #990000; --vtop-blue: #0033cc;
> }
> 
> /* ========================================================= */
> /* MAIN — STACKED BARS */
> /* ========================================================= */
> 
> /* Default — all blue */
> .recharts-wrapper svg {
> g.recharts-bar g.recharts-bar-rectangles g.recharts-bar-rectangle > path { fill: var(--bottom-blue); }
> g.recharts-bar + g.recharts-bar g.recharts-bar-rectangles g.recharts-bar-rectangle > path { fill: var(--middle-blue); }
> g.recharts-bar + g.recharts-bar + g.recharts-bar g.recharts-bar-rectangles g.recharts-bar-rectangle > path { fill: var(--top-blue); }
> g.recharts-bar + g.recharts-bar + g.recharts-bar + g.recharts-bar g.recharts-bar-rectangles g.recharts-bar-rectangle > path { fill: var(--vtop-blue); }
> }
> 
> /* ========================================================= */
> /* RED BARS — A–F (nested under #page-root) */
> /* ========================================================= */
> #page-root {
> 
> /* 1. Bottom stack */
> :has(.A) .recharts-wrapper svg g.recharts-bar-rectangle:nth-child(1) > path,
> :has(.B) .recharts-wrapper svg g.recharts-bar-rectangle:nth-child(2) > path,
> :has(.C) .recharts-wrapper svg g.recharts-bar-rectangle:nth-child(3) > path,
> :has(.D) .recharts-wrapper svg g.recharts-bar-rectangle:nth-child(4) > path,
> :has(.E) .recharts-wrapper svg g.recharts-bar-rectangle:nth-child(5) > path,
> :has(.F) .recharts-wrapper svg g.recharts-bar-rectangle:nth-child(6) > path {
> fill: var(--bottom-red);
> }
> 
> /* 2. Middle stack */
> :has(.A) .recharts-wrapper svg g.recharts-bar + g.recharts-bar g.recharts-bar-rectangle:nth-child(1) > path,
> :has(.B) .recharts-wrapper svg g.recharts-bar + g.recharts-bar g.recharts-bar-rectangle:nth-child(2) > path,
> :has(.C) .recharts-wrapper svg g.recharts-bar + g.recharts-bar g.recharts-bar-rectangle:nth-child(3) > path,
> :has(.D) .recharts-wrapper svg g.recharts-bar + g.recharts-bar g.recharts-bar-rectangle:nth-child(4) > path,
> :has(.E) .recharts-wrapper svg g.recharts-bar + g.recharts-bar g.recharts-bar-rectangle:nth-child(5) > path,
> :has(.F) .recharts-wrapper svg g.recharts-bar + g.recharts-bar g.recharts-bar-rectangle:nth-child(6) > path {
> fill: var(--middle-red);
> }
> 
> /* 3. Top stack */
> :has(.A) .recharts-wrapper svg g.recharts-bar + g.recharts-bar + g.recharts-bar g.recharts-bar-rectangle:nth-child(1) > path,
> :has(.B) .recharts-wrapper svg g.recharts-bar + g.recharts-bar + g.recharts-bar g.recharts-bar-rectangle:nth-child(2) > path,
> :has(.C) .recharts-wrapper svg g.recharts-bar + g.recharts-bar + g.recharts-bar g.recharts-bar-rectangle:nth-child(3) > path,
> :has(.D) .recharts-wrapper svg g.recharts-bar + g.recharts-bar + g.recharts-bar g.recharts-bar-rectangle:nth-child(4) > path,
> :has(.E) .recharts-wrapper svg g.recharts-bar + g.recharts-bar + g.recharts-bar g.recharts-bar-rectangle:nth-child(5) > path,
> :has(.F) .recharts-wrapper svg g.recharts-bar + g.recharts-bar + g.recharts-bar g.recharts-bar-rectangle:nth-child(6) > path {
> fill: var(--top-red);
> }
> 
> /* 4. Very top stack */
> :has(.A) .recharts-wrapper svg g.recharts-bar + g.recharts-bar + g.recharts-bar + g.recharts-bar g.recharts-bar-rectangle:nth-child(1) > path,
> :has(.B) .recharts-wrapper svg g.recharts-bar + g.recharts-bar + g.recharts-bar + g.recharts-bar g.recharts-bar-rectangle:nth-child(2) > path,
> :has(.C) .recharts-wrapper svg g.recharts-bar + g.recharts-bar + g.recharts-bar + g.recharts-bar g.recharts-bar-rectangle:nth-child(3) > path,
> :has(.D) .recharts-wrapper svg g.recharts-bar + g.recharts-bar + g.recharts-bar + g.recharts-bar g.recharts-bar-rectangle:nth-child(4) > path,
> :has(.E) .recharts-wrapper svg g.recharts-bar + g.recharts-bar + g.recharts-bar + g.recharts-bar g.recharts-bar-rectangle:nth-child(5) > path,
> :has(.F) .recharts-wrapper svg g.recharts-bar + g.recharts-bar + g.recharts-bar + g.recharts-bar g.recharts-bar-rectangle:nth-child(6) > path {
> fill: var(--vtop-red);
> }
> }
> 
> ```
> 
> **1.b. Tooltip**
> 
> ```auto
> /* ========================================================= */
> /* TOOLTIP */
> /* ========================================================= */
> .recharts-wrapper:not(:has(g.recharts-bar-rectangle:hover)) .recharts-tooltip-wrapper { visibility:hidden !important; }
> 
> .recharts-wrapper:has(g.recharts-bar-rectangle:hover) {
> /* Temporary tooltip colors for each stack */
> --tb1:var(--bottom-blue); --tb2:var(--middle-blue); --tb3:var(--top-blue); --tb4:var(--vtop-blue);
> }
> 
> /* Red tooltip on hover for selected bar */
> #page-root {
> :has(.A) .recharts-wrapper:has(g.recharts-bar-rectangle:nth-child(1):hover),
> :has(.B) .recharts-wrapper:has(g.recharts-bar-rectangle:nth-child(2):hover),
> :has(.C) .recharts-wrapper:has(g.recharts-bar-rectangle:nth-child(3):hover),
> :has(.D) .recharts-wrapper:has(g.recharts-bar-rectangle:nth-child(4):hover),
> :has(.E) .recharts-wrapper:has(g.recharts-bar-rectangle:nth-child(5):hover),
> :has(.F) .recharts-wrapper:has(g.recharts-bar-rectangle:nth-child(6):hover) {
> --tb1:var(--bottom-red); --tb2:var(--middle-red); --tb3:var(--top-red); --tb4:var(--vtop-red);
> }
> 
> /* Apply tooltip colors to inner divs */
> .recharts-tooltip-wrapper {
> div:nth-child(2) > div > div:nth-of-type(1) { background: var(--tb1) !important; }
> div:nth-child(3) > div > div:nth-of-type(1) { background: var(--tb2) !important; }
> div:nth-child(4) > div > div:nth-of-type(1) { background: var(--tb3) !important; }
> div:nth-child(5) > div > div:nth-of-type(1) { background: var(--tb4) !important; }
> }
> 
> ```
> 
> **1.c. Legend**
> 
> ```auto
> /* ========================================================= */
> /* LEGEND */
> /* ========================================================= */
> 
> .recharts-responsive-container > div > div.recharts-legend-wrapper > div {
>   
> /* Base styling for legend color boxes */
> > div > div {
> position: relative;
> margin-right: 1.25rem;
> background: var(--legend-blue) !important;
> 
> &::after {
> content: '';
> position: absolute;
> left: 1rem;
> width: 0.75rem;
> height: 0.75rem;
> border-radius: 0.25rem;
> background: var(--legend-red);
> }
> }
> 
> /* Map stacks via nth-child */
> > div:nth-child(1) {
> --legend-blue: var(--bottom-blue);
> --legend-red: var(--bottom-red);
> }
>   
> > div:nth-child(2) {
> --legend-blue: var(--middle-blue);
> --legend-red: var(--middle-red);
> }
>   
> > div:nth-child(3) {
> --legend-blue: var(--top-blue);
> --legend-red: var(--top-red);
> }
>   
> > div:nth-child(4) {
> --legend-blue: var(--vtop-blue);
> --legend-red: var(--vtop-red);
> }
> }
> 
> ```

## 2. Chart Beta — Dynamic Bar Targeting

For **Chart** (Beta) components only, bar colors can be assigned by targeting each bar’s _unique data identifier_, rather than relying on its render order in the DOM.

> - This allows colors to adjust according to the **actual x-axis value** (`name="..."`) rather than bar position.
> - Tooltips automatically adapt to reflect the hovered stack’s color.
> - This method is particularly useful when the Chart (Beta) component’s bar order may vary dynamically or when data is **sorted** differently.

![Chart Beta Component](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/7/17f790b9019459b4be4d3ba364d77206480c3ade.gif)

Although this component is still evolving, it demonstrates a clean way to link visual styling directly to data attributes, making the chart behavior data-aligned and robust to reordering.

```auto
<div class="chart-state">
  <div data-red="Christina Wallace"></div>
  <div data-red="Elina Smith"></div>
  <div data-red="Derek Jaston"></div>
</div>

```

> **📌 CSS Code Template — Dynamic Bar Targeting**
>
> **2.a. Main — Bar/Stacked Bar Style**
> 
> ```auto
> :root {
> --bottom-red: #ffcccc;
> --middle-red: #ff9999;
> --top-red: #ff3333;
> --vtop-red: #990000;
> }
> 
> /* ========================================================= */
> /* RED BARS */
> /* ========================================================= */
> #page-root {
> /* 1. Bottom stack */
> :has(div[data-red="Christina Wallace"]) .recharts-wrapper svg g.recharts-bar:nth-child(7) g.recharts-bar-rectangle > path[name="Christina Wallace"],
> :has(div[data-red="Christiana Bright"]) .recharts-wrapper svg g.recharts-bar:nth-child(7) g.recharts-bar-rectangle > path[name="Christiana Bright"],
> :has(div[data-red="Elina Smith"]) .recharts-wrapper svg g.recharts-bar:nth-child(7) g.recharts-bar-rectangle > path[name="Elina Smith"],
> :has(div[data-red="Derek Jaston"]) .recharts-wrapper svg g.recharts-bar:nth-child(7) g.recharts-bar-rectangle > path[name="Derek Jaston"],
> :has(div[data-red="Bobby Darret"]) .recharts-wrapper svg g.recharts-bar:nth-child(7) g.recharts-bar-rectangle > path[name="Bobby Darret"]
> { fill: var(--bottom-red); }
> 
> /* 2. Middle stack */
> :has(div[data-red="Christina Wallace"]) .recharts-wrapper svg g.recharts-bar:nth-child(8) g.recharts-bar-rectangle > path[name="Christina Wallace"],
> :has(div[data-red="Christiana Bright"]) .recharts-wrapper svg g.recharts-bar:nth-child(8) g.recharts-bar-rectangle > path[name="Christiana Bright"],
> :has(div[data-red="Elina Smith"]) .recharts-wrapper svg g.recharts-bar:nth-child(8) g.recharts-bar-rectangle > path[name="Elina Smith"],
> :has(div[data-red="Derek Jaston"]) .recharts-wrapper svg g.recharts-bar:nth-child(8) g.recharts-bar-rectangle > path[name="Derek Jaston"],
> :has(div[data-red="Bobby Darret"]) .recharts-wrapper svg g.recharts-bar:nth-child(8) g.recharts-bar-rectangle > path[name="Bobby Darret"]
> { fill: var(--middle-red); }
> 
> /* 3. Top stack */
> :has(div[data-red="Christina Wallace"]) .recharts-wrapper svg g.recharts-bar:nth-child(9) g.recharts-bar-rectangle > path[name="Christina Wallace"],
> :has(div[data-red="Christiana Bright"]) .recharts-wrapper svg g.recharts-bar:nth-child(9) g.recharts-bar-rectangle > path[name="Christiana Bright"],
> :has(div[data-red="Elina Smith"]) .recharts-wrapper svg g.recharts-bar:nth-child(9) g.recharts-bar-rectangle > path[name="Elina Smith"],
> :has(div[data-red="Derek Jaston"]) .recharts-wrapper svg g.recharts-bar:nth-child(9) g.recharts-bar-rectangle > path[name="Derek Jaston"],
> :has(div[data-red="Bobby Darret"]) .recharts-wrapper svg g.recharts-bar:nth-child(9) g.recharts-bar-rectangle > path[name="Bobby Darret"]
> { fill: var(--top-red); }
> 
> /* 4. Very top stack */
> :has(div[data-red="Christina Wallace"]) .recharts-wrapper svg g.recharts-bar:nth-child(10) g.recharts-bar-rectangle > path[name="Christina Wallace"],
> :has(div[data-red="Christiana Bright"]) .recharts-wrapper svg g.recharts-bar:nth-child(10) g.recharts-bar-rectangle > path[name="Christiana Bright"],
> :has(div[data-red="Elina Smith"]) .recharts-wrapper svg g.recharts-bar:nth-child(10) g.recharts-bar-rectangle > path[name="Elina Smith"],
> :has(div[data-red="Derek Jaston"]) .recharts-wrapper svg g.recharts-bar:nth-child(10) g.recharts-bar-rectangle > path[name="Derek Jaston"],
> :has(div[data-red="Bobby Darret"]) .recharts-wrapper svg g.recharts-bar:nth-child(10) g.recharts-bar-rectangle > path[name="Bobby Darret"]
> { fill: var(--vtop-red); }
> }
> 
> ```
> 
> **2.b. Tooltip**
> 
> ```auto
> /* ========================================================= */
> /* TOOLTIP */
> /* ========================================================= */
> .recharts-wrapper:not(:has(g.recharts-bar-rectangle:hover)) .recharts-tooltip-wrapper { visibility: hidden !important; }
> 
> #page-root {
> :has(div[data-red="Christina Wallace"])
> .recharts-wrapper:has(path[name="Christina Wallace"]:hover),
> :has(div[data-red="Christiana Bright"])
> .recharts-wrapper:has(path[name="Christiana Bright"]:hover),
> :has(div[data-red="Elina Smith"])
> .recharts-wrapper:has(path[name="Elina Smith"]:hover),
> :has(div[data-red="Derek Jaston"])
> .recharts-wrapper:has(path[name="Derek Jaston"]:hover),
> :has(div[data-red="Bobby Darret"])
> .recharts-wrapper:has(path[name="Bobby Darret"]:hover) {
> 
> .recharts-tooltip-wrapper {
> div:nth-child(2) > div > div:nth-of-type(1) { background: var(--bottom-red) !important; }
> div:nth-child(3) > div > div:nth-of-type(1) { background: var(--middle-red) !important; }
> div:nth-child(4) > div > div:nth-of-type(1) { background: var(--top-red) !important; }
> div:nth-child(5) > div > div:nth-of-type(1) { background: var(--vtop-red) !important; }
> }
> }
> }
> 
> ```
> 
> **2.c. Legend (Optional)**
> 
> ```auto
> /* ========================================================= */
> /* LEGEND */
> /* ========================================================= */
> 
> [class^="wire-data-plot___StyledDiv4"] {
> 
> > div > div[class^="wire-data-plot___StyledDiv6"] {
> width: 36px;
> background: linear-gradient(
> -45deg,
> transparent 0px,
> transparent 18px,  
> var(--legend-red) 18px,
> var(--legend-red) 36px  
> );
> }
> 
> /* Map stacks — RED ONLY */
> > div:nth-child(1) { --legend-red: var(--bottom-red); }
> > div:nth-child(2) { --legend-red: var(--middle-red); }
> > div:nth-child(3) { --legend-red: var(--top-red); }
> > div:nth-child(4) { --legend-red: var(--vtop-red); }
> }
> 
> ```

> Base (default) gradient colors are defined directly in the Chart component settings, with CSS used only for conditional overrides.

---

<div class="post-metadata">

### Author: ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [January 2, 2026, 12:56pm UTC](https://community.glideapps.com/t/css-hack-dynamic-coloring-stacked-bar-chart/85853/2 "2026-01-02T12:56:52Z")

</div>

Bookmarked!