# Custom color function in Plot Bar chart

**URL:** <https://talk.observablehq.com/t/custom-color-function-in-plot-bar-chart/6836>\
**Category:** Help\
**Created:** [July 21, 2022, 1:39pm UTC](https://talk.observablehq.com/t/custom-color-function-in-plot-bar-chart/6836 "2022-07-21T13:39:52Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Anaglyph-ic](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/anaglyph-ic/32/6512_2.png) [@Anaglyph-ic](https://talk.observablehq.com/u/Anaglyph-ic)\
**Post date:** [July 21, 2022, 1:39pm UTC](https://talk.observablehq.com/t/custom-color-function-in-plot-bar-chart/6836/1 "2022-07-21T13:39:52Z")

</div>

Hi everyone,

I’m trying to have a custom color scheme in a plot chart in [this](https://observablehq.com/@anaglyph-ic/artist-tools-collector-list?collection=@anaglyph-ic/tezos-tools) notebook. I’m generating as many plots as I have lines in my table to visualize the repartition of tokens in a given wallet. So a bit like Mike’s sparkbars in the inputs.Table example, but more elaborate. I could do this the d3 way, but I want to get used to using Plot!

How should I proceed? @Fil any ideas? I tried to navigate the Plot doc/API/Cheatsheet, but nothing seemed very obvious to me. Maybe I didn’t look where I should have?

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [July 21, 2022, 2:02pm UTC](https://talk.observablehq.com/t/custom-color-function-in-plot-bar-chart/6836/2 "2022-07-21T14:02:20Z")

</div>

Unless I’m mistaken, there is only one valid bar in your chart—all the other have a non-numerical value for x.

---

<div class="post-metadata">

**Author:** ![Anaglyph-ic](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/anaglyph-ic/32/6512_2.png) [@Anaglyph-ic](https://talk.observablehq.com/u/Anaglyph-ic)\
**Post date:** [July 22, 2022, 7:48am UTC](https://talk.observablehq.com/t/custom-color-function-in-plot-bar-chart/6836/3 "2022-07-22T07:48:06Z")

</div>

Apologies for not being clearer. Let me rephrase.

I have a color scheme matching problem. I want my legend (categories with collection names such as ‘fxhash’ or ‘Versum Items’) to match the plots in the distribution column. I use a specific function to create the legend, and I would like plot to use that function to do the color attribution. Should I do it the other way around? If yes, how?

 ![Capture](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/8/83dc97ee9e07af1d109abd0f46a90612af2858ef.png)

(edit, the colors look like they could be matching but they aren’t).

---

<div class="post-metadata">

**Author:** ![Anaglyph-ic](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/anaglyph-ic/32/6512_2.png) [@Anaglyph-ic](https://talk.observablehq.com/u/Anaglyph-ic)\
**Post date:** [July 24, 2022, 9:55am UTC](https://talk.observablehq.com/t/custom-color-function-in-plot-bar-chart/6836/4 "2022-07-24T09:55:37Z")

</div>

Solution found: I can pass a function in the plot _mark_ like

`fill:(d)=>color(d.collection)`

But this only works if the overal _color_ property of the plot is commented out/doesn’t exist. If it does exist, it trumps the mark-specific fill function. This might be somewhere in the API and I probably have missed it so this is all on me!

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [July 25, 2022, 7:11am UTC](https://talk.observablehq.com/t/custom-color-function-in-plot-bar-chart/6836/5 "2022-07-25T07:11:08Z")

</div>

Yes, it’s easy to overlook:  
“A _color_ scale defaults to _identity_ if no range or scheme is specified and all associated defined values are valid CSS color strings.”