CODEWITHSUNDEEP
powerbivega-litepowerbi-custom-visualsdeneb
mschaefer56
mschaefer56

Reputation: 13

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

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

Upvotes: 1

Views: 565

Answers (1)

davidebacci
davidebacci

Reputation: 30304

Do you mean like this?

enter image description here

{
  "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"}}
}

Upvotes: 0

Related Questions