Question about line color for a Vega scatter chart

I have, what I assume is, an easy question. I have a scatter chart (code below) and I want to make the vertical and horizontal line black. Right now it's white. I have tried a handful of different things but nothing has worked. What am I missing?

{
  $schema: https://vega.github.io/schema/vega/v3.3.1.json
  padding: 5
  config: {
  background: "#f5f5f5"
  }
  data: [
    {
      name: source
      url: {
        %context%: true
        index: custom_index
        body: {size: 10000}
      }
      format: {property: "hits.hits"}
      transform: [
        {
          type: filter
          expr: datum._source['annual_recurring_cost'] != null && datum._source['technical_risk'] != null && datum._source['business_value'] != null && datum._source['technical_value'] != null
         }
        {
          type: project
          fields: [
            _source.name
            _source['annual_recurring_cost']
            _source['technical_risk']
            _source['business_value']
            _source['technical_value']     
          ]
         as: ["name", "Cost", "Criticality", "BV", "TV"]
        }
      ]
    }
  ]
  scales: [
    {
      name: x
      type: linear
      round: true
      nice: true
      zero: false
      domain: [0.0, 10.0]
      range: width
    }
    {
      name: y
      type: linear
      round: true
      nice: true
      zero: false
      domain: [0.0, 10.0]
      range: height
    }
    {
      name: size
      type: linear
      round: true
      nice: false
      zero: true
      domain: {data: "source", field: "Cost"}
      //this changes the size of the cost bubble
      //this was 500, 5000
      range: [300, 3000]
    }
    {
      name: color
     //this changes the risk mitigation type
     //this makes it in order of numbers using differnt shades of the same color
     //"type": "ordinal",
      //"type": "linear",
     //this makes it use groups of 2
     //"type": "quantize",
     //this makes it use decimal points
    //"type": "quantile",
     //this sets a threshold, but by default there are 3 thresholds less than 0, 0-10 and then above 10.  need to figure out how to change the threshold
      // "type": "threshold",
     "type": "sequential",
      "range": ["red", "green"] 
      // {"scheme": "category20"},
      //change name to another field name i.e. bv to see a different field - ALSO DO THE PART BELOW
      "domain": {"data": "source", "field": "Criticality"}
    }
  ]
  axes: [
    {
      scale: x
      grid: true
      domain: true
      //this defines location of the title below
      orient: bottom
      labelPadding: 20
      values: [0.0, 5, 10.0]
      tickCount: 3
      title: Business Value
    }
    {
      scale: y
      grid: true
      domain: false
      orient: left
// this is telling it that there are three points on the y axis 0, 5 and 10 and then the tickcount defines how many ticks there are.  so if you had 0, 2, 4, 6, 8, 10 and tick count 6 you'd have six lines (top, bottom and 4 others)
      values: [0.0, 5, 10.0]
      tickCount: 3
      labelPadding: 20
      titlePadding: 5
      title: Technical Value
    }
  ]
  
  legends: [
    {
       fill: "color"
       title: "Risk Mitigation"
    }
    {
      title: Annual Cost
      size: size
      format: s
      symbolStrokeColor: "#4682b4"
      symbolStrokeWidth: 2
      symbolOpacity: 1
      symbolType: circle
    }
  ]
  
  marks: [
    {
      name: marks
// this sets the shape of the circular dots
      type: symbol
      from: {data: "source"}
      encode: {
        update: {
          x: {scale: "x", field: "BV"}
          y: {scale: "y", field: "TV"}
          size: {scale: "size", field: "Cost"}
          //size: {10, field: "Cost"}
          //**ALSO UPDATE HERE field to something else i.e. bv**
          fill: {scale: "color", field: "Criticality"}
          // the line below will change all of the circles to red
          // fill: {value: "#900"}
          shape: {value: "circle"}
          opacity: {value:1}
          stroke: none
          tooltip: {"signal": "{\"Name\": datum.name, \"Cost\": format(datum.Cost, '$,.0f')}"}
//          tooltip: {field: "name"}
        }
      }
    }
    {
      name: Eliminate
      type: text
      from: {data: "source"}
      encode: {
        enter: {
          x: {scale: "x", value: 2.5}
          y: {scale: "y", value: 2.5}
          fill: {value: "#900"}
          text: {value: "Eliminate"}
          align: {value: "center"},
          baseline: {value: "middle"}
          fontSize: {value: 22}
        }
      }
    }
    {
      name: Migrate
      type: text
      from: {data: "source"}
      encode: {
        enter: {
          x: {scale: "x", value: 7.5}
          y: {scale: "y", value: 2.5}
          fill: {value: "#009"}
          text: {value: "Migrate"}
          align: {value: "center"},
          baseline: {value: "middle"}
          fontSize: {value: 22}
        }
      }
    }
    {
      name: Tolerate
      type: text
      from: {data: "source"}
      encode: {
        enter: {
          x: {scale: "x", value: 2.5}
          y: {scale: "y", value: 7.5}
          fill: {value: "#666"}
          text: {value: "Tolerate"}
          align: {value: "center"},
          baseline: {value: "middle"}
          fontSize: {value: 22}
        }
      }
    }
    {
      name: Invest
      type: text
      from: {data: "source"}
      encode: {
        enter: {
          x: {scale: "x", value: 7.5}
          y: {scale: "y", value: 7.5}
          fill: {value: "#090"}
          text: {value: "Invest"}
          align: {value: "center"},
          baseline: {value: "middle"}
          fontSize: {value: 22}
        }
      }
    }
  ]
}

Hi @dandcp,

Not a Vega expert here, but I'll try to help :slight_smile:

From your question, I get that you are trying to customize the colour of the axes. If my assumption is correct, I think you can try with the axes properties detailed in the Vega documentation. It feels like domainColor might do the trick here.