How to visualize two rectangles in Power BI - powerbi

Question

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
I do not care about the display of the numbers or axes. Just the blue and red rectangles.

Answer 1

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.
{
"$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?
{
"$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"}
}
}