What do you mean as an image?
You could recreate it using just a label component by setting the border radiuses to 50% and adding a border and background colour
3 Likes
As I shared an image above , the same double circle and the text fail, should appear in flex container and if I make label there with border radiuses to 50% and then it is like this 
The bounds need to be square. Easiest way might be to put it in a row flex and set the circle's basis (width) to the row flex's basis (height)
I've pasted json of 2 labels if it helps.
[
{
"type": "ia.display.label",
"version": 0,
"props": {
"textStyle": {
"textAlign": "center"
},
"style": {
"border-radius": "50%",
"background-color": "brown",
"key": "value"
}
},
"meta": {
"name": "Label_0"
},
"position": {
"x": 626.04,
"y": 341.92,
"height": 75,
"width": 75
},
"custom": {}
}
]
[
{
"type": "ia.display.label",
"version": 0,
"props": {
"text": "Fail",
"textStyle": {
"textAlign": "center"
},
"style": {
"border-radius": "50%",
"background-color": "red",
"key": "value"
}
},
"meta": {
"name": "Label"
},
"position": {
"x": 639.04,
"y": 354.92,
"height": 50,
"width": 50
},
"custom": {}
}
]
Edit:
and as Nick said you need to
How and in which field can I make scripting in perspective for above mentioned circle. @nminchin @andrew.budaiev
I'm not exactly sure what you mean, but Andrew's JSON can simply be copied and pasted into your Flex container in the Designer to add this into your container. Make sure you have your flex container "deep selected" (right click on it, "deep select")
Is this possible only with image or can we do scripting? @nminchin @andrew.budaiev
Can you do what via scripting exactly? Create a label with a circle background and border and place it on the page? You'll have to be more specific as I don't understand what you're trying to do. What is your end goal?
The samples show are not images. They are labels. No scripting is needed.
The labels are made to look like circles with the style properties below.
"style": {
"border-radius": "50%",
To view in both PC and mobile, I'm trying to align the circle to resize in both views and also to make below background color in red and above in black background color same as in picture below...
Something like this? The only issue is that the red circle itself won't change size...
Red Circle.zip (5.7 KB)
I'm scratching my head at to how to make it resize and maintain its square (or circle) ratio
@victordcq or @cmallonee maybe?
Yeah, like this it should be but how about the background color, how can I change to double color as mentioned earlier.
There's no GUI support for this in the Designer.
Use this website, or similar, to create gradients:
Set it to the props.style.background property value.
Red Circle.zip (5.5 KB)
1 Like
Thanks a lot, Mr.Nick 
set the label basis to auto
and add style aspect-ratio:1/1
this does not seem to work in the designer but does in the browser
[
{
"type": "ia.display.label",
"version": 0,
"props": {
"text": "Fail",
"style": {
"backgroundColor": "#D14545",
"borderBottomLeftRadius": "50%",
"borderBottomRightRadius": "50%",
"borderColor": "#BB3838",
"borderStyle": "solid",
"borderTopLeftRadius": "50%",
"borderTopRightRadius": "50%",
"borderWidth": 10,
"color": "#fff",
"textAlign": "center",
"aspect-ratio": "1/1"
}
},
"meta": {
"name": "Label"
},
"position": {
"shrink": 0
},
"custom": {}
}
]
2 Likes
Wow, I didn't know about aspect-ratio. This makes me both happy and sad at the same time. Thanks!
1 Like
Note that you can also use containers instead of labels, which might be more flexible / easiest to work with in some situations:
Outer circle:
The width property is bound to the basis, adjust this to change the overall size.
Inner circle:
Adjust the margin to adjust the thickness of the outer circle,
justify and alignItems are set to centered so the label is in the middle.
Edit:
Actually @victordcq is right, using borders is much simpler than having 2 divs...
Not using the aspect-ratio property, as I don't like things that don't work in the designer (it always leads to headaches)
1 Like
Its not perfect though, depending if its the height or width that is the limiting factor it behaves differently
If you know which one it will always be you can do some more finetuning in a coordinate containter (width:100% height:unset or width:unset height:100% together with aspect ratio), but if you dont know, it gets a lot harder.
but always worth a try to see if it helps.
3 Likes
I set the aspect-ratio on both the flex container and the circle label itself, and it seems to work at all resolutions 
very cool!
Red Circle v2 Aspect Ratio.zip (5.2 KB)
3 Likes