Legend for bar color

[chocaloca]

Hi all,

Still new to this.I have a single legend for Color (css color hex values) and items (strings), but I want the legend to show items as text with the circles being the corresponding color of Color. Currently the legend is for Color and items because that is simply where I am, and if I update "color": {"field": "**Color**", "type": "nominal" in the bar mark to be 'surface', then I do get a legend for Color values only, but my bar colors disappear.

On the other hand, if I update "color": {"field": "**surface**", "type": "nominal" in the point mark to be 'Color', then I get a legend for Color hex values only, not items strings.

In all my legends the color of the points is wrong

What I want:

Sample data
Columns
year_id, name_short, name_short_year, surface, Color, year_, CP, date_, W, RI
Values
"2025-1536", "Maddy", "Maddy '25", "c", "#b3500495", 2025, "Alex", 2025-01-03T04:00:00.000Z, "L&M", 4

'"2025-311", "Lenny", "Lenny '25", "a", "#0a8a1795", 2025, "Alex", 2025-02-06T04:00:00.000Z, "Jerry", 3`

"2025-337", "Vonnie", "Vonnie '25", "b", "#268cff90", 2025, "Alex", 2025-11-23T04:00:00.000Z, "Jenny", 6

Current chart & legend

  "width": 600,
  "height": 200,
  "data": {"name": "dataset"},
  "layer": [
    {
      "mark": {"type": "bar",  "width": {"band": 1.12}},
      "encoding": {
        "x": {
          "field": "name_short_year",
          "type": "ordinal",
          "sort": {"field": "year_"}
        },
        "color": {"field": "Color", "type": "nominal", "scale": null}
      }
    },    
    {
      "mark": {"type": "line", "color":"gainsboro"},
      "encoding": {
        "x": {
          "field": "name_short_year",
          "type": "nominal",
          "sort": {"field": "year_"},
          "axis": {
            "title": "T",
            "labelAngle":-40,
            "tickColor": "white",
            "labelColor": "white", 
            "titleColor":"white"
          }
        },
        "y": {
          "field": "RI",
          "type": "quantitative",
          "axis": {
            "title": "R",
            "labelColor":"white", 
            "titleColor":"white"
          }
        }
      }
    },
    {
      "mark": {
          "type": "point",
          "tooltip": true, 
          "filled": true
      },
      "encoding": {
        "tooltip": [
          {"field": "year_", "type":"quantitative", "title": "Year"},
          {"field": "name_short", "type":"nominal", "title": "T"},
          {"field": "RI", "type":"quantitative", "title": "R"}
        ],
        "x": {
          "field": "name_short_year",
          "type": "ordinal",
          "sort": {"field": "year_"},
          "axis": {"title": "T", "labelAngle":-50
        }
        },
        "y": {
          "field": "RI",
          "type": "quantitative",
          "axis": {"title": "R"}
        },
        "size": {
          "condition": {
            "test": "datum.RI === 7 && datum.W === datum.CP",
            "value": 70
          },
        "value": 65
        },
        "color": {
           "field": "surface", "type": "nominal", 
          "condition": [
            {"test": "datum.RI === 7 && datum.W === datum.CP", "value": "red"},
            {"test": "datum.RI === 7 && datum.W !== datum.CP", "value": "blue"},
            {"test": "datum.RI !== 7", "value": "blue"}
          ]
        }
      }
    }
  ]
}```

[domoritz]

Instead of condition, color with a color scale by defining a field and a scale domain and range.