Vega Lite (deneb) is showing a second x axis on my bar chart

Question

I have a bar chart with bars stacked over each other that is using two separate x-axis. I have each separated axis to be positioned to where one axis is on the bottom of the chart and one is on the top.

Here is the chart in it's current state...

It's duplicating x-axis "b" and putting it on both the top and bottom when it should only display "b" on the bottom and "c" on the top axis.

This is the vega lite code I'm currently using. I've tried to set the axis to null everywhere I could but can not get the top copy of "b" to turn off.

Here is the VegaLite Editor with the current code

score 0 · Accepted Answer · answered Mar 20 '23 at 15:07

Do you mean like this?

{
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 87, "c": 4},
      {"a": "B", "b": 56, "c": 5},
      {"a": "C", "b": 77, "c": 6},
      {"a": "D", "b": 80, "c": 9},
      {"a": "E", "b": 81, "c": 10},
      {"a": "F", "b": 53, "c": 10},
      {"a": "G", "b": 102, "c": 10},
      {"a": "H", "b": 87, "c": 10},
      {"a": "I", "b": 91, "c": 1}
    ]
  },
  "transform": [
    {"joinaggregate": [{"op": "max", "field": "c", "as": "max"}]},
    {"calculate": "datum.max * 5", "as": "max"}
  ],
  "params": [
    {"name": "max", "expr": "data('data_0')[0]['max']"},
    {"name": "min", "expr": "data('data_0')[0]['min']"}
  ],
  "layer": [
    {"mark": {"type": "bar", "color": "#5bc2e7", "stroke": "white"}},
    {
      "mark": {"type": "text", "align": "left"},
      "encoding": {
        "text": {"field": "c"},
        "x": {"field": "b", "type": "quantitative", "title": null, "axis": null}
      }
    },
    {
      "mark": {
        "type": "rule",
        "height": 30,
        "point": {
          "shape": "M555.3 300.1L424.3 112.8C401.9 81 366.4 64 330.4 64c-22.63 0-45.5 6.75-65.5 20.75C245.2 98.5 231.2 117.5 223.4 138.5C220.5 79.25 171.1 32 111.1 32c-61.88 0-111.1 50.08-111.1 111.1L-.0028 368c0 61.88 50.12 112 112 112s112-50.13 112-112L223.1 218.9C227.2 227.5 231.2 236 236.7 243.9l131.3 187.4C390.3 463 425.8 480 461.8 480c22.75 0 45.5-6.75 65.5-20.75C579 423.1 591.5 351.8 555.3 300.1zM159.1 256H63.99V144c0-26.5 21.5-48 48-48s48 21.5 48 48V256zM354.8 300.9l-65.5-93.63c-7.75-11-10.75-24.5-8.375-37.63c2.375-13.25 9.75-24.87 20.75-32.5C310.1 131.1 320.1 128 330.4 128c16.5 0 31.88 8 41.38 21.5l65.5 93.75L354.8 300.9z",
          "yOffset": -15,
          "height": 25,
          "size": 0.015,
          "color": "black"
        },
        "stroke": "black"
      },
      "encoding": {
        "x": {
          "field": "c",
          "type": "quantitative",
          "title": null,
          "scale": {"domain": {"expr": "[0,max]"}},
          "axis": {"orient": "top"}
        }
      }
    }
  ],
  "encoding": {
    "y": {"field": "a", "type": "nominal", "title": null},
    "x": {
      "field": "b",
      "type": "quantitative",
      "title": null,
      "axis": {"orient": "bottom"}
    }
  },
  "resolve": {"scale": {"x": "independent"}}
}

Vega Lite (deneb) is showing a second x axis on my bar chart

1 Answers1