SpreadJS offers 182 built-in shape types. Built-in shapes can be customised to different styles.
The shape's fill color, border (color and line width) and text (color, font, size, horizontal & vertical alignment) is configurable.
You can add a autoShape and change the shape style using the shape API
var heart = sheet.shapes.add('autoShape', GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 50, 100, 150); heart.text('My Shape'); var heartStyle = heart.style(); heartStyle.fill.color = 'pink'; heartStyle.fill.transparency = 0.5; heartStyle.line.color = 'green'; heartStyle.line.lineStyle = GC.Spread.Sheets.Shapes.PresetLineDashStyle.dashDot; heartStyle.line.width = 5; heartStyle.line.capType = GC.Spread.Sheets.Shapes.LineCapStyle.square; heartStyle.line.joinType = GC.Spread.Sheets.Shapes.LineJoinStyle.miter; heartStyle.line.transparency = 0.5; heartStyle.textEffect.font = 'bold 15px Georgia'; heartStyle.textEffect.color = 'yellow'; heartStyle.textEffect.transparency = 0.5; heartStyle.textFrame.vAlign = GC.Spread.Sheets.VerticalAlign.center; heartStyle.textFrame.hAlign = GC.Spread.Sheets.HorizontalAlign.center; heart.style(heartStyle);