CODEWITHSUNDEEP
powerbivisualizationpowerbi-desktopvega-litedeneb
Przemyslaw Remin
Przemyslaw Remin

Reputation: 6940

How to visualize two rectangles in Power BI

How to display two rectangles, on inside the other in a Power BI visual? Of course, given rectangle coordinates and sizes. Preferably using native visuals.

Example: Bigger rectangle (frame) size is width:10 hight:8 Inside Rectangle size is width:3, hight:2, x:4, y:5

enter image description here

I do not care about the display of the numbers or axes. Just the blue and red rectangles.

Upvotes: 1

Views: 333

Answers (1)

davidebacci
davidebacci

Reputation: 30219

In case you change your mind, here is a Vega-Lite version. You can literally just drop the code into Deneb and don't need to do anything else.

enter image description here

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 300,
  "height": 240,
  "background": "#9bc2e6",
  "data": {"values": [{"x": 3, "x2": 6, "y": 4, "y2": 6}]},
  "mark": {"type": "rect", "color": "#c00000"},
  "encoding": {
    "x": {
      "field": "x",
      "type": "quantitative",
      "scale": {"domain": [0, 10]},
      "axis": {
        "gridColor": "white",
        "gridWidth": 1,
        "domain": false,
        "title": "x",
        "orient": "top"
      }
    },
    "x2": {"field": "x2"},
    "y": {
      "field": "y",
      "type": "quantitative",
    "scale": {"domain": [8, 0]},
      "axis": {
        "gridColor": "white",
        "gridWidth": 1,
        "domain": false,
        "title": "y"
      }
    },
    "y2": {"field": "y2"}
  }
}

Edit:

You mean like this?

enter image description here

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 300,
  "height": 240,
  "background": "white",
  "layer": [
      {
      "data": {"values": [{"rect":1,"x": 0, "x2": 10, "y": 0, "y2": 8}]},
      "mark": {"type": "rect", "color": "#9bc2e6"}
    },
    {
      "data": {"values": [{"rect":2, "x": 3, "x2": 6, "y": 4, "y2": 6}]},
      "mark": {"type": "rect", "color": "#c00000"}
    }
  ],
  "encoding": {
    "x": {
      "field": "x",
      "type": "quantitative",
      "scale": {"domain": [0, 10]},
      "axis": null
    },
    "x2": {"field": "x2"},
    "y": {
      "field": "y",
      "type": "quantitative",
      "scale": {"domain": [8, 0]},
      "axis": null
    },
    "y2": {"field": "y2"}
  }
}

Upvotes: 1

Related Questions