- SpreadJS Overview
- Getting Started
- JavaScript Frameworks
- Best Practices
- Features
- Workbook
- Worksheet
- Rows and Columns
- Headers
- Cells
- Data Binding
- TableSheet
- GanttSheet
- ReportSheet
- Data Charts
- JSON Schema with SpreadJS
- SpreadJS File Format
- Data Validation
- Conditional Formatting
- Sort
- Group
- Formulas
- Serialization
- Keyboard Actions
- Shapes
- Floating Objects
- Barcodes
- Charts
- Sparklines
- Column, Line, and Winloss Sparklines with Methods
- Markers and Points
- Horizontal and Vertical Axes
- Column, Line, and Winloss Sparklines with Formulas
- Area Sparkline
- Pie Sparkline
- Scatter Sparkline
- Bullet Sparkline
- Spread Sparkline
- Stacked Sparkline
- Hbar Sparkline
- Vbar Sparkline
- Box Plot Sparkline
- Vari Sparkline
- Cascade Sparkline
- Pareto Sparkline
- Month Sparkline
- Year Sparkline
- Custom Sparkline
- Rangeblock Sparkline
- Image Sparkline
- Histogram Sparkline
- Gauge KPI Sparkline
- Lollipop Variance Sparkline
- Tables
- Pivot Table
- Slicer
- Theme
- Culture
- AI Assistant
- SpreadJS Designer
- Tutorials
- SpreadJS Designer Component
- SpreadJS Collaboration Server
- Touch Support
- Formula Reference
- Import and Export Reference
- Frequently Used Events
- API Documentation
- Release Notes
Stacked Sparkline
You can create a stacked sparkline using the STACKEDSPARKLINE formula and cell values.
The stacked sparkline formula has the following options:
Option | Description |
|---|---|
Points | A reference that represents a range of cells that contains the values, such as "A1:A4". |
ColorRange | A reference that represents a range of cells that contains all colors, such as "B1:B4". This setting is optional. The default value is generated by color. |
LabelRange | A reference that represents a cell range that contains all labels, such as "C1:C4". This setting is optional. The default value is empty. |
Maximum | A number that represents the maximum value of the sparkline. This setting is optional. The default value is the summary of all positive values. |
TargetRed | A number that represents the location of the red line. This setting is optional. The default value is empty. |
TargetGreen | A number that represents the location of the green line. This setting is optional. The default value is empty. |
TargetBlue | A number that represents the location of the blue line. This setting is optional. The default value is empty. |
TargetYellow | A number that represents the location of the yellow line. This setting is optional. The default value is empty |
Color | A string that represents the color if |
HighlightPosition | A number that represents the index of the highlighted area. This setting is optional. The default value is empty. |
Vertical | A boolean that represents whether to display the sparkline vertically. This setting is optional. The default value is false. |
TextOrientation | A number that represents the label text orientation. This setting is optional. The default value is 0 (horizontal). The vertical setting is 1. |
TextSize | A number that represents the size of the label text. This setting is optional. The default value is 10. The unit is px. |
The stacked sparkline formula uses the following format:
=STACKEDSPARKLINE(points, colorRange?, labelRange?, maximum?, targetRed?, targetGreen?, targetBlue?, tragetYellow?, color?, highlightPosition?, vertical?, textOrientation?, textSize?)
The following code sample creates a stacked sparkline.
activeSheet.addSpan(0, 0, 1, 5); activeSheet.getCell(0, 0, GC.Spread.Sheets.SheetArea.viewport).value("Sales by State").font("20px Arial").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); var table1 = activeSheet.tables.add("table1", 1, 0, 6, 5, GC.Spread.Sheets.Tables.TableThemes.light12); table1.filterButtonVisible(false); activeSheet.setValue(1, 0, "State"); activeSheet.setValue(1, 1, "Product 1"); activeSheet.setValue(1, 2, "Product 2"); activeSheet.setValue(1, 3, "Product 3"); activeSheet.setValue(1, 4, "Diagram"); activeSheet.setValue(2, 0, "Idaho"); activeSheet.setValue(2, 1, 10000); activeSheet.setValue(2, 2, 12000); activeSheet.setValue(2, 3, 15000); activeSheet.setValue(3, 0, "Montana"); activeSheet.setValue(3, 1, 11000); activeSheet.setValue(3, 2, 10000); activeSheet.setValue(3, 3, 15000); activeSheet.setValue(4, 0, "Oregon"); activeSheet.setValue(4, 1, 10000); activeSheet.setValue(4, 2, 17000); activeSheet.setValue(4, 3, 12000); activeSheet.setValue(5, 0, "Washington"); activeSheet.setValue(5, 1, 15000); activeSheet.setValue(5, 2, 10000); activeSheet.setValue(5, 3, 15000); activeSheet.setValue(6, 0, "Utah"); activeSheet.setValue(6, 1, 10000); activeSheet.setValue(6, 2, 15000); activeSheet.setValue(6, 3, 12000); activeSheet.setValue(7, 1, "orange"); activeSheet.setValue(7, 2, "purple"); activeSheet.setValue(7, 3, "yellowgreen"); activeSheet.getRange(-1, 1, -1, 1).formatter("$#,##0"); activeSheet.getRange(-1, 2, -1, 1).formatter("$#,##0"); activeSheet.getRange(-1, 3, -1, 1).formatter("$#,##0"); activeSheet.setFormula(2, 4, '=STACKEDSPARKLINE(B3:D3,B8:D8,B2:D2,40000)'); activeSheet.setFormula(3, 4, '=STACKEDSPARKLINE(B4:D4,B8:D8,B2:D2,40000)'); activeSheet.setFormula(4, 4, '=STACKEDSPARKLINE(B5:D5,B8:D8,B2:D2,40000)'); activeSheet.setFormula(5, 4, '=STACKEDSPARKLINE(B6:D6,B8:D8,B2:D2,40000)'); activeSheet.setFormula(6, 4, '=STACKEDSPARKLINE(B7:D7,B8:D8,B2:D2,40000)'); activeSheet.setRowHeight(0, 50); activeSheet.setRowHeight(1, 25); for (var i = 2; i < 7; i++) { activeSheet.setRowHeight(i, 45); } activeSheet.setRowHeight(7, 0); activeSheet.setColumnWidth(0, 100); activeSheet.setColumnWidth(1, 120); activeSheet.setColumnWidth(2, 120); activeSheet.setColumnWidth(3, 120); activeSheet.setColumnWidth(4, 200);