[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

Sparklines

A sparkline is a small chart that can be applied to quickly visualize data and transform it into a compact form in a cell. It uses data from a range of cells to help you easily analyze data at the cell level.

You can set the sparkline type to column, line, or winloss by using setSparkline method or use type-specific formulas to create different sparklines available in SpreadJS.

You can also implement your logic to define a custom sparkline formula with provided dataset and settings; add that custom sparkline using the addSparklineEx method.

Note: Sparklines created using formulas cannot be exported to an Excel file.

The image below shows the Vbar sparkline in action. It shows the trends in the temperature levels across a year in different cities and helps to quickly understand the high and low data points.

SpreadJS worksheet displays Vbar sparklines that compactly visualize yearly temperature highs and lows across multiple cities.

Types of Sparklines

You can use the following sparkline types in your spreadsheet. Click on the images to visit the corresponding topics.

Types of Sparklines

**SpreadJS worksheet cell contains a Column Sparkline that represents source-range values as compact vertical bars for comparison.

Column Sparkline

SpreadJS worksheet cell contains a Line Sparkline connecting source-range values to reveal a compact trend over time.

Line Sparkline

SpreadJS worksheet cell contains a Winloss Sparkline that summarizes positive and negative source values for rapid result analysis.

Winloss Sparkline

SpreadJS worksheet cell contains an Area Sparkline that fills the region beneath a data trend for compact visual analysis.

Area Sparkline

SpreadJS worksheet cell contains a Pie Sparkline that summarizes source-range proportions in a compact circular visualization.Pie Sparkline

: SpreadJS worksheet cell contains a Scatter Sparkline that plots source values as points for compact relationship analysis.

Scatter Sparkline

SpreadJS worksheet cell contains a Bullet Sparkline that compares a measured value with target or reference ranges.

Bullet Sparkline

SpreadJS worksheet cell contains a Spread Sparkline that visualizes value distribution and spread across a source data range.

Spread Sparkline

SpreadJS worksheet cell contains a Stacked Sparkline that separates source values into compact stacked visual segments.

Stacked Sparkline

SpreadJS worksheet cell contains an Hbar Sparkline that visualizes source-range values with compact horizontal bars.

Hbar Sparkline

SpreadJS worksheet cell contains a Vbar Sparkline that compares source-range values using compact vertical bar columns.

Vbar Sparkline

SpreadJS worksheet cell contains a Box Plot Sparkline summarizing distribution, quartiles, and variation within source data.

Box Plot Sparkline

SpreadJS worksheet cell contains a Vari Sparkline that communicates variance or deviation among values in the source range.

Vari Sparkline

SpreadJS worksheet cell contains a Cascade Sparkline that visualizes cumulative increases and decreases across a data sequence.

Cascade Sparkline

SpreadJS worksheet cell contains a Month Sparkline that summarizes activity or values across monthly calendar periods.

Month Sparkline

SpreadJS worksheet cell contains a Year Sparkline that summarizes annual values or trends within a compact cell visualization.

Year Sparkline

SpreadJS worksheet cell contains a Pareto Sparkline that ranks category contributions and communicates cumulative distribution behavior.

Pareto Sparkline

SpreadJS worksheet cell contains a RangeBlock Sparkline that represents intervals or bounded ranges from source data.

RangeBlock Sparkline

SpreadJS worksheet cell contains a Histogram Sparkline that summarizes source-value frequency across compact distribution bins.

Histogram Sparkline

SpreadJS worksheet cell contains a Gauge KPI Sparkline that communicates performance against configured indicator or threshold values.

Gauge KPI Sparkline

SpreadJS worksheet cell contains an Image Sparkline that embeds visual content as a compact spreadsheet-level data representation.

Image Sparkline

SpreadJS worksheet cell contains a Lollipop Variance Sparkline that highlights variation using compact lollipop markers.

Lollipop Variance Sparkline

SpreadJS worksheet cell contains a Progress Sparkline that communicates completion status or percentage through a compact progress indicator.

Progress Sparkline

SpreadJS worksheet cell contains a custom Sparkline generated from developer-defined formula logic through the addSparklineEx API.

Custom Sparkline

Grouping Sparklines

You can group and ungroup sparklines by using groupSparkline and ungroupSparkline methods.


Grouping enables you to apply changes to several sparklines all at once and saves time in the process. Grouping also helps to easily compare sparklines by using the same type of sparkline and axis in a group.

var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
var sheet = spread.getActiveSheet();

var s1=  sheet.setSparkline(13, 0, data
        , GC.Spread.Sheets.Sparklines.DataOrientation.vertical
        , GC.Spread.Sheets.Sparklines.SparklineType.line
        , setting
        );
var s2 =sheet.setSparkline(13, 3, data
        , GC.Spread.Sheets.Sparklines.DataOrientation.vertical
        , GC.Spread.Sheets.Sparklines.SparklineType.column
        , setting
        );
var s3=  sheet.setSparkline(13, 6, data
        , GC.Spread.Sheets.Sparklines.DataOrientation.vertical
        , GC.Spread.Sheets.Sparklines.SparklineType.winloss
        , setting
        );

// group sparklines
var group = sheet.groupSparkline([s1,s2,s3]);

group.sparklineType = GC.Spread.Sheets.Sparklines.SparklineType.column;

// ungroup sparklines
sheet.ungroupSparkline(group);

Exporting Sparklines as Images

Microsoft Excel does not natively support SpreadJS Sparkline formulas. By default, exported Excel files contain the formulas, but the sparklines are not visually rendered.

To display sparklines in Excel, set the saveAsView option to true when exporting:

saveOptions.saveAsView = true;

When enabled:

  • Sparklines are rendered as static images in the exported file.

  • The original formulas are preserved.

  • Updating data in Excel does not update the images.

SpreadJS exports worksheet sparklines as static images in Excel when saveAsView is enabled while preserving the original formulas.

If needed, you can exclude formulas using the includeFormulas option.

Performance: Enabling this option increases export time and file size, especially when many sparklines are present.

Supported in: Worksheet, TableSheet, GanttSheet, and ReportSheet.