# Plot: Legend and Dynamic Fill Issue

**URL:** <https://talk.observablehq.com/t/plot-legend-and-dynamic-fill-issue/7205>\
**Category:** Help\
**Created:** [October 27, 2022, 4:54am UTC](https://talk.observablehq.com/t/plot-legend-and-dynamic-fill-issue/7205 "2022-10-27T04:54:28Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![MarioDelgadoSr](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mariodelgadosr/32/1828_2.png) [@MarioDelgadoSr](https://talk.observablehq.com/u/MarioDelgadoSr)\
**Post date:** [October 27, 2022, 4:54am UTC](https://talk.observablehq.com/t/plot-legend-and-dynamic-fill-issue/7205/1 "2022-10-27T04:54:28Z")

</div>

Is it possible to have a domain/range-based Plot Legend when the fill attribute for an overlapping barX Mark is utilized?

See: [Plot Issue / Mario Delgado / Observable](https://observablehq.com/d/48d40a548e1f7565) and toggle the ‘Legend Object’ radio input for an example.

---

<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:** [October 27, 2022, 7:13am UTC](https://talk.observablehq.com/t/plot-legend-and-dynamic-fill-issue/7205/2 "2022-10-27T07:13:16Z")

</div>

When fill is a constant color (your first bar), it can be specified as a css color (“green”).

However a dynamic color (your second bar), will pass through the color scale if it exists. If that scale has a domain, each of the colors is going to be compared to the domain, and the mark will not be drawn if its value is not in the domain (“red” or “blue”).

A solution could be something like

```auto
Plot.plot({
  color: {
    legend: true,
    domain: ["Expense<50", "Expense+50"],
    range: ["blue", "red"]
  },
  marks: [
    Plot.barX(data, {
      x: "Income",
      y: "Year",
      fill: "green"
    }),
    Plot.barX(data, {
      x: "Expense",
      y: "Year",
      // Dynamic fill
      fill: (d) => (d.Expense < 50 ? "Expense<50" : "Expense+50")
    })
  ]
})

```

---

<div class="post-metadata">

**Author:** ![MarioDelgadoSr](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mariodelgadosr/32/1828_2.png) [@MarioDelgadoSr](https://talk.observablehq.com/u/MarioDelgadoSr)\
**Post date:** [October 27, 2022, 2:24pm UTC](https://talk.observablehq.com/t/plot-legend-and-dynamic-fill-issue/7205/3 "2022-10-27T14:24:00Z")

</div>

> [@Fil](#):
>
> ```auto
> Plot.plot({
> color: {
> legend: true,
> domain: ["Expense<50", "Expense+50"],
> range: ["blue", "red"]
> },
> marks: [
> Plot.barX(data, {
> x: "Income",
> y: "Year",
> fill: "green"
> }),
> Plot.barX(data, {
> x: "Expense",
> y: "Year",
> // Dynamic fill
> fill: (d) => (d.Expense < 50 ? "Expense<50" : "Expense+50")
> })
> ]
> })
> 
> ```

Fil:

Your recommendation addressed the Legend, but the dynamic bar fill value is not assigned by Plot:

See updated notebook: [Plot Issue / Mario Delgado | Observable](https://observablehq.com/d/48d40a548e1f7565)

 ![Capture](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/3/30f629842bfae0a9efdabcbc3ac6d07209e94053.jpeg)

---

<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:** [October 27, 2022, 2:52pm UTC](https://talk.observablehq.com/t/plot-legend-and-dynamic-fill-issue/7205/4 "2022-10-27T14:52:38Z")

</div>

It’s because the second bar mark uses the fixed _data_ variable, instead of the value set by the slider.