Objects and Properties
The documentation of PixelStack’s objects and their properties.
Rectangle
To render a rectangle (or a square), can also have rounded corners.
Top
top Usage example
my-rectangle . top = 100 Left
left Usage example
my-rectangle . left = 100 Width
width Usage example
my-rectangle . width = 100 Height
height Usage example
my-rectangle . height = 100 Corner Radius
cornerRadius Usage example
my-rectangle . cornerRadius = 16 Fill
fill Usage example
my-rectangle . fill = #0000FF Gradient Angle
gradientAngle Usage example
my-rectangle . gradientAngle Gradient Color Stops
gradientColorStops Usage example
my-rectangle . gradientColorStops Stroke Color
strokeColor Usage example
my-rectangle . strokeColor = #0000FF Stroke Width
strokeWidth Usage example
my-rectangle . strokeWidth = 2 Ellipse
To render ellipse (or a circle).
Top
top Usage example
my-ellipse . top = 100 Left
left Usage example
my-ellipse . left = 100 Width
width Usage example
my-ellipse . width = 100 Height
height Usage example
my-ellipse . height = 100 Fill
fill Usage example
my-ellipse . fill = #0000FF Gradient Angle
gradientAngle Usage example
my-ellipse . gradientAngle Gradient Color Stops
gradientColorStops Usage example
my-ellipse . gradientColorStops Stroke Color
strokeColor Usage example
my-ellipse . strokeColor = #0000FF Stroke Width
strokeWidth Usage example
my-ellipse . strokeWidth = 2 Text
To render static or dynamic text.
Top
top Usage example
my-text . top = 100 Left
left Usage example
my-text . left = 100 Text
text Usage example
my-text . text = Hello World Fill
fill Usage example
my-text . fill = #0000FF Font Family
fontFamily Usage example
my-text . fontFamily = Playfair Display Font Size
fontSize Usage example
my-text . fontSize = 32 Text Align
textAlign Usage example
my-text . textAlign = center Underline
underline Usage example
my-text . underline = true Linethrough
linethrough Usage example
my-text . linethrough = true Overline
overline Usage example
my-text . overline = true Image
To render an image via URl, or via an integration.
Top
top Usage example
my-image . top = 100 Left
left Usage example
my-image . left = 100 Width
width Usage example
my-image . width = 100 Height
height Usage example
my-image . height = 100 Source
src Usage example
my-image . src = https://picsum.photos/id/150/512/512 Stroke Color
strokeColor Usage example
my-image . strokeColor = #0000FF Stroke Width
strokeWidth Usage example
my-image . strokeWidth = 2 Chart
To render a chart to visualize data. Supports most common charts, such as bar chart, pie chart, etc.
Top
top Usage example
my-chart . top = 100 Left
left Usage example
my-chart . left = 100 Width
width Usage example
my-chart . width = 100 Height
height Usage example
my-chart . height = 100 Chart Type
chartType Usage example
my-chart . chartType = pie Chart Data
chartData Usage example
my-chart . chartData = {} View
The view/artboard where your design is rendered. PixelStack only supports one view per design at the moment. You do not need to specify the ID of the view when overriding its property values.
Width
width Usage example
width = 100 Height
height Usage example
height = 100 Fill
fill Usage example
fill = #0000FF