Chart Bar Color by Name 1 content

General
1

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

<path class="recharts-…"
      name="Your‑Value‑Here"
      …></path>

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:
/* ──────────────────────────────────────────────────────── */
/* 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.

3 Likes
2

Thanks for sharing!

3

But what about “Category 10”, “Category 11”, etc.?
Is that actually what you intended?

2 Likes
4

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.

5

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.

6

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

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.

7

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.

8

I’m not using “Category 1”; I use names such as “Score”, “Lead”, or “Winners”. “Category” was just a placeholder.