SpreadJS 12

New major feature: Shapes

The biggest news from SpreadJS 12 is the arrival of shapes. Draw shapes, create interactions, and change them with data—it's up you.

  • Create a visual, interactive floor plan that allows users to see who sits at a desk, or add information about amenities
  • Create a production floor plan for a manufacturing facility, and highlight areas experiencing slowdowns or problems
  • Create an interactive, touch-based map of a car so users can highlight damage for insurance claims
  • Create Gantt charts and org charts

Custom JavaScript shapes in SpreadJS

Shapes, like those in the car example, can be free-form, and 60+ built-in shapes are also included in the feature. Built-in shapes include everything from basic rectangles to arrows, balloons, and action buttons:

Built-in JavaScript shapes in SpreadJS

You can also add action items to your shapes, including:

  • Rotate shape
  • Adjust to change shape layout
  • Connect two shapes' connection points with a line
  • Resize the handle of the shape
  • Include text with the shape
  • Customize the shape's border


Include different formatting in a single cell with rich text formatting

With rich text formatting, users can now add bold, italics, font, and all basic formatting to a single cell! It's a popular request from customers and a valuable feature for new users.

Rich text spreadsheet

The Spread Web Designer will also include a rich text editor.


Animated charts

SpreadJS column, bar, line, and pie chart now include seamless loading and updating animation.

JavaScript chart animation


New Charts: Radar, Sunburst, and Treemap Charts

These new charts (also available in Excel) have full Designer support.

Radar charts displays multivariate observations with an arbitrary number of variables; it's often used to show personality traits. Documentation

JavaScript radar chart

A sunburst chart visualizes hierarchical data from a root node (center) outward to lower hierarchies. A segment of the inner circle is a parent to the segments of the outer circle which lie within the angular sweep of the parent.

JavaScript sunburst chart

A treemap chart displays hierarchical information combined with relative quantity.

JavaScript treemap chart

Excel-like Precision Selection

Excel's new feature allows users to select a large range, and then deselect specific cells. SpreadJS has added this as a feature. Here's how it looks in Excel:

Excel precision selection


Additional enhancements

Barcode sparklines are implemented as a rendered formula, and can be used in order forms, for tracking purposes, and as website links (QR Codes).


For a detailed listing of fixed issues, please see the Release Notes for each platform.