# Chart Bar Color by Name 1 content
**URL:** https://community.glideapps.com/t/chart-bar-color-by-name-1-content/85381
**Category:** General
**Created:** [November 14, 2025, 1:32pm UTC](https://community.glideapps.com/t/chart-bar-color-by-name-1-content/85381 "2025-11-14T13:32:47Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@AndreaTpro](https://community.glideapps.com/u/AndreaTpro)
#### Post date: [November 14, 2025, 1:32pm UTC](https://community.glideapps.com/t/chart-bar-color-by-name-1-content/85381/1 "2025-11-14T13:32:47Z")
# Custom‑Colour Bars in Glide – A Generic, Reusable Guide
> **Goal** – Colour Recharts bars automatically based on the _first column_ of your data (the **“value 1 content”** ).
> This version uses **generic names** (e.g. _Category 1_, _Category 2_, …) so you can copy it into any app without being tied to your own terms.
* * *
## Understand the Inspector
Every bar that Recharts renders ends up in the DOM as
```html
```
The `name` attribute contains the **exact string** that appears in your first column.
If you want bars with _Category 1_ to be blue, you will target `path[name*="Category 1"]`.
**Why `*=` (contains)?**
_Safe_ – if “Category 1” appears anywhere in the string (e.g. `Category 1 – Q1`), it will still match.
If you want an _exact_ match, use `=` instead.
* * *
## Prepare Your Data
| Category 1 | Category 2 | Category 3 | Category 4 | Category 5 |
| --- | --- | --- | --- | --- |
- Keep **no leading/trailing spaces**.
- Use **exactly** the names you’ll type into the CSS below (case‑sensitive).
* * *
## Insert the CSS in Glide
1. Open your Glide app → **Settings** → **Advanced** → **Custom CSS**.
2. Paste **this snippet** – adjust the colour codes as you wish:
```css
/* ──────────────────────────────────────────────────────── */
/* 1. Bars that contain “Category 1” → light‑blue */
.recharts-layer.recharts-bar-rectangles path[name*="Category 1"] {
fill: #a8c1f7 !important; /* Light blue – feel free to tweak */
}
/* 2. Bars that contain “Category 2” → green */
.recharts-layer.recharts-bar-rectangles path[name*="Category 2"] {
fill: #06ac53 !important; /* Green */
}
/* 3. Bars that contain “Category 3” → dark‑blue */
.recharts-layer.recharts-bar-rectangles path[name*="Category 3"] {
fill: #0b1651 !important; /* Dark blue */
}
/* 4. Bars that contain “Category 4” → orange‑red */
.recharts-layer.recharts-bar-rectangles path[name*="Category 4"] {
fill: #dc6768 !important; /* Orange‑red */
}
/* 5. Bars that contain “Category 5” → yellow */
.recharts-layer.recharts-bar-rectangles path[name*="Category 5"] {
fill: #fdd835 !important; /* Yellow */
}
/* ──────────────────────────────────────────────────────── */
/* OPTIONAL: A universal “skeleton” for any other names */
.recharts-layer.recharts-bar-rectangles path {
/* fallback colour if you add a new category you forgot to style */
fill: #cccccc !important;
}
```
> **Tip** – Keep the `!important` flag if you’re sure you want your colour to overtake Glide’s defaults.
---
### Author:  [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [November 15, 2025, 12:57am UTC](https://community.glideapps.com/t/chart-bar-color-by-name-1-content/85381/2 "2025-11-15T00:57:39Z")
Thanks for sharing!
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [November 15, 2025, 1:19am UTC](https://community.glideapps.com/t/chart-bar-color-by-name-1-content/85381/3 "2025-11-15T01:19:15Z")
> [@AndreaTpro](#):
>
> **Why `*=` (contains)?**
> _Safe_ – if “Category 1” appears anywhere in the string (e.g. `Category 1 – Q1`), it will still match.
But what about “Category 10”, “Category 11”, etc.?
Is that actually what you intended?
---
### Author:  [@AndreaTpro](https://community.glideapps.com/u/AndreaTpro)
#### Post date: [November 15, 2025, 7:18am UTC](https://community.glideapps.com/t/chart-bar-color-by-name-1-content/85381/4 "2025-11-15T07:18:19Z")
**What “\*= (contains)” really does**
- _Category is only a placeholder name._
It can be any word or phrase you’re looking for, just as “Category 1” or “Lorem Ipsum” could be.
- The `*= ` operator means **“the string contains this fragment.”**
If you write `*= Lorem`, every element whose path name holds _any_ instance of “Lorem” will be matched.
That includes a path name that might also have other words or characters after it—“Lorem Ipsum” is a perfect match.
- If you had written `= Lorem` (the strict equals operator), the element would match **only** when the whole path name value is exactly the word “Lorem”.
A path name that contains “Lorem Ipsum” would _not_ be matched because it is _not_ exactly “Lorem”.
- A hyphen or dash (`-`) is not a numeric minus sign; it is simply another character in the string.
Therefore a path that reads `Category-1–Q1` is treated as a single string that includes the dash.
Both `*= Category-1` and `*= Category-1–Q1` will match it because the fragment “Category-1” is present; `= Category-1` will not, since the path name is longer.
- In short, **`*= ` is “safe” when you only know or care about a part of the string**.
It will still apply the rule even if the entire string is longer, like `Category 1 – Q1`.
Using `= ` forces an exact match, so it would only apply if the string were _exactly_ what you specified.
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [November 15, 2025, 7:38am UTC](https://community.glideapps.com/t/chart-bar-color-by-name-1-content/85381/5 "2025-11-15T07:38:33Z")
What I meant was: using path[name\*=“Category 1”] will also match Category 10, Category 11, etc. — is that really intended? This could produce unexpected results.
---
### Author:  [@AndreaTpro](https://community.glideapps.com/u/AndreaTpro)
#### Post date: [November 15, 2025, 7:45am UTC](https://community.glideapps.com/t/chart-bar-color-by-name-1-content/85381/6 "2025-11-15T07:45:11Z")
Yes, `path[name*="Category 1"]` is intentional: the `*=` operator does a **substring search**. It matches any element whose `name` attribute contains exactly the characters “Category 1”, so `Category 10`, `Category 11`, `OtherCategory 1`, etc., will all match.
I chose to use `*=` here because bar names can contain additional important details after the main tag. With `*=` the selector will still pick up the bar when the tag “Category 1” appears somewhere in the value, while still allowing the rest of the name to remain unchanged.
If you want to match **only** the single value `Category 1`, you should use the exact‑match operator:
css
```auto
path[name="Category 1"] { … }
```
Using `=` guarantees that no other values (including those with additional digits or words) will be selected, preventing the unexpected matches you mentioned.
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [November 15, 2025, 7:48am UTC](https://community.glideapps.com/t/chart-bar-color-by-name-1-content/85381/7 "2025-11-15T07:48:24Z")
That’s a good start, but I think using `path[name*="Category 1–"]` (with a dash or some delimiter) would be safer. Otherwise `Category 10` or `Category 11` might also match `*="Category 1"`, which I suspect is not intended. Using a clear delimiter ensures only the intended items are styled.
---
### Author:  [@AndreaTpro](https://community.glideapps.com/u/AndreaTpro)
#### Post date: [November 15, 2025, 7:54am UTC](https://community.glideapps.com/t/chart-bar-color-by-name-1-content/85381/8 "2025-11-15T07:54:00Z")
I’m not using “Category 1”; I use names such as “Score”, “Lead”, or “Winners”. “Category” was just a placeholder.