Search code examples
powerbipowerbi-desktopvega-litevegadeneb

How do I vertically align symbols, so that they align with the y-axis labels?

I'm trying to create a bar and symbol plot which shares the same axes. The issue I am having is that the symbol is aligning to the top of the bar instead of the center. Is this even possible with the configuration options available through vega? I looked through the vega documentation here, but could find no such explanations or applicable examples.

Current Chart

{
  "data": [{"name": "dataset"}],
  "scales": [
    {
      "name": "yscale",
      "type": "band",
      "domain": {
        "data": "dataset",
        "field": "Sector"
      },
      "range": "height",
      "padding": 0.1,
      "round": true
    },
    {
      "name": "xscale",
      "domain": {
        "data": "dataset",
        "field": "Position Weight"
      },
      "nice": true,
      "range": "width"
    }
  ],
  "axes": [
    {
      "scale": "xscale",
      "orient": "bottom",
      "title": "Position Weight"
    },
    {
      "orient": "left",
      "scale": "yscale",
      "title": "Sector"
    }
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "dataset"},
      "encode": {
        "enter": {
          "tooltip": {
            "signal": "datum"
          },
          "x": {
            "scale": "xscale",
            "field": "Position Weight"
          },
          "x2": {
            "scale": "xscale",
            "value": 0
          },
          "y": {
            "scale": "yscale",
            "field": "Sector"
          },
          "height": {
            "scale": "yscale",
            "band": 1
          },
          "opacity": {"value": 1}
        }
      }
    },
       {
      "type": "symbol",
      "from": {"data": "dataset"},
      "encode": {
        "enter": {
          "tooltip": {
            "signal": "datum"
          },
          "x": {
            "scale": "xscale",
            "field": "Record Count"
          },
          "x2": {
            "scale": "xscale",
            "value": 0
          },
          "y": {
            "scale": "yscale",
            "field": "Sector"
          },
          "height": {
            "scale": "yscale",
            "band": 1
          },
          "opacity": {"value": 1}
        },
        "update" :{"fill": {"value": "red"}},
        "baseline": {"value": "bottom"}
      }
    }
  ]
}
Solution

  • You mean like this?

    enter image description here

    If so, set the band on the symbol.

    {
  "data": [{"name": "dataset"}],
  "scales": [
    {
      "name": "yscale",
      "type": "band",
      "domain": {
        "data": "dataset",
        "field": "Sector"
      },
      "range": "height",
      "padding": 0.1,
      "round": true
    },
    {
      "name": "xscale",
      "domain": {
        "data": "dataset",
        "field": "Position Weight"
      },
      "nice": true,
      "range": "width"
    }
  ],
  "axes": [
    {
      "scale": "xscale",
      "orient": "bottom",
      "title": "Position Weight"
    },
    {
      "orient": "left",
      "scale": "yscale",
      "title": "Sector"
    }
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "dataset"},
      "encode": {
        "enter": {
          "tooltip": {
            "signal": "datum"
          },
          "x": {
            "scale": "xscale",
            "field": "Position Weight"
          },
          "x2": {
            "scale": "xscale",
            "value": 0
          },
          "y": {
            "scale": "yscale",
            "field": "Sector"
          },
          "height": {
            "scale": "yscale",
            "band": 1
          },
          "opacity": {"value": 1}
        }
      }
    },
       {
      "type": "symbol",
      "from": {"data": "dataset"},
      "encode": {
        "enter": {
          "tooltip": {
            "signal": "datum"
          },
          "x": {
            "scale": "xscale",
            "field": "Record Count"
          },
          "x2": {
            "scale": "xscale",
            "value": 0
          },
          "y": {
            "scale": "yscale", "band":0.5,
            "field": "Sector"
          },
         
          "opacity": {"value": 1}
        },
        "update" :{"fill": {"value": "red"}},
        "baseline": {"value": "bottom"}
      }
    }
  ]
}