SpreadJS 13
SpreadJS Documentation / Developer's Guide / Features / Manage Data Visualization and Objects / Sparklines / Hbar Sparkline
In This Topic
    Hbar Sparkline
    In This Topic

    You can create an hbar sparkline using the HBARSPARKLINE formula and cell values.

    Hbar sparkline

    The sparkline starts at the left of the cell for positive values and right of the cell for negative values. If the value is greater than 100% or smaller than -100%, an arrow is displayed.

    The hbar sparkline has the following options:

    Option Description
    value A number or reference that represents the length of the bar. The value should be between 100% and -100%.
    colorScheme A string that represents the color of the bar. This setting is optional. The default value is "grey".
    axisVisible A Boolean value that indicates whether or not to show the axis. Its default value is true.
    barHeight A number greater than 0 and less than or equal to 1, which indicates the percentage of bar height according to the cell height.

    The hbar sparkline formula has the following format:

    =HBARSPARKLINE(value, colorScheme, axisVisible, barHeight)

    Using Code

    The following code creates hbar sparklines.

    JavaScript
    Copy Code
    // initializing Spread
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
    // get the activesheet
    var activeSheet = spread.getSheet(0);
    
    activeSheet.setValue(0, 0, .3);
    activeSheet.setValue(1, 0, -0.3);
    activeSheet.setValue(2, 0, 2);
    
    activeSheet.setFormula(0, 1, '=HBARSPARKLINE(A1,"red", FALSE, 0.5)');
    activeSheet.setFormula(1, 1, '=HBARSPARKLINE(A2,"blue")');
    activeSheet.setFormula(2, 1, '=HBARSPARKLINE(A3,"green", TRUE, A3)');
    
    for (var i = 0; i < 4; i++) {
        activeSheet.setRowHeight(i, 40);
    }
    activeSheet.setColumnWidth(0, 80);
    activeSheet.setColumnWidth(1, 200);
    
    See Also