Document Solutions for Excel, .NET Edition | Document Solutions
File Operations / Import and Export SpreadJS Files / SpreadJS Sparklines
In This Topic
    SpreadJS Sparklines
    In This Topic

    SpreadJS supports sparklines in addition to the standard sparklines supported by MS Excel. DsExcel supports import and export of SpreadJS files containing sparklines to JSON I/O, HTML, image, and PDF formats. The following discusses about these extended sparklines and how to create them in DsExcel:

    Cascade Sparkline

    A cascade sparkline is generally used to analyze a value over time like yearly sales, total profit, net tax etc. It is used widely in finance, sales, legal and construction sectors, to name a few. For example, you can use cascade sparkline to compare expenses and earnings of a salesman.

    Syntax: CASCADESPARKLINE(pointsRange, pointIndex, labelsRange, minimum, maximum, colorPositive, colorNegative, vertical)

    Parameters

    Parameter Name Description
    pointsRange(Required) A reference that represents the range of cells that contains values, such as "B2:B8".
    pointIndex (Required) A number or reference that represents the points index. The pointIndex is >= 1 such as 1 or "D2".
    LabelsRange (Optional) A reference that represents the range of cells that contains the labels, such as "A2:A8". The default value is no label.
    Minimum (Optional) A number or reference that represents the minimum values of the display area. The default value is the minimum of the sum (the sum of the points' value), such as -2000. The minimum you set must be less than the default minimum; otherwise, the default minimum is used.
    maximum (Optional) A number or reference that represents the maximum values of the display area. The default value is the maximum of the sum (the sum of the points' value), such as 6000. The maximum you set must be greater than the default maximum; otherwise, the default maximum is used.
    colorPositive(Optional) A string that represents the color of the first or last positive sparkline's box (this point's value is positive). The default value is "#8CBF64". If the first or last box represents a positive value, the box's color is set to colorPositive. The middle positive box is set to a lighter color than colorPositive.
    colorNegative (Optional) A string that represents the color of the first or last negative sparkline's box (this point's value is negative). The default value is "#D6604D". If the first or last box represents the negative value, the box's color is set to colorNegative. The middle negative box is set to a lighter color than colorNegative.
    vertical (Optional) A boolean that represents whether the box's direction is vertical or horizontal. The default value is FALSE. You must set vertical to true or false for a group of formulas, because all the formulas represent the entire sparkline.
    itemTypeRange (Optional) An array or reference that represents all the item types of the data range. The values should be {"-", "+", "="} or "A1:A7" that reference the value of {"+", "-", "="}, where "+" indicates positive change, "-" indicates negative change and "=" indicates total columns.
    colorTotal (Optional) A string that either represents the color of the last sparkline's box when itemTypeRange does not exist or represents the color of the resulting sparkline's box when itemTypeRange exists.

    Refer to the following example code to add cascade sparkline using formula:

    C#
    Copy Code
    // Add cascade sparklines with horizontal bars. 
    
    for (int i = 1; i < 8; i++) 
    { 
        worksheet.Range[i, 2].Formula = "=CASCADESPARKLINE(B2:B8, ROW() - 1, A2:A8, , , \"#8CBF64\", \"#D6604D\", FALSE)"; 
    } 

    Line Sparkline

    A line sparkline shows the trend of any expenses or data, emphasizing the changes and fluctuations.

    Syntax: LINESPARKLINE(data,dataOrientation,[dateAxisData],[dateAxisOrientation],[setting])

    The formula has the following parameters:

    Parameter Name Description
    data A range reference that represents sparkline data, such as "A1:C3".
    dataOrientation A number that represents the sparkline data orientation. One of the following:
    • vertical: 0 (default).
    • horizontal: 1.
    dateAxisData A range reference that represents the sparkline date axis data, such as "D1:F3". If there is no dateAxisOrientation, then dateAxisData is invalid.
    dateAxisOrientation A number that represents the sparkline date axis orientation. One of the following:
    • vertical - 0
    • horizontal - 1
    setting A string in JSON format. format: FullName (abbreviation) [default value]: Description

    The setting parameter provides the following case-sensitive properties to set:

    Parameter Name Description
    showFirst(sf)[False] To check whether the first data point is formatted differently for Sparkline.
    showHigh(sh)[False] To check whether the data points with the highest value are formatted differently for Sparkline.
    showLast(slast)[False] To check whether the last data point is formatted differently for Sparkline.
    showLow(slow)[False] To check whether the data points with the lowest value are formatted differently for Sparkline.
    showNegative(sn)[False] To check whether the negative data points are formatted differently for Sparkline.
    showMarkers(sm)[False] To check whether data markers are displayed for Sparkline.
    axisColor(ac)[#000000] The color of the axis.
    firstMarkerColor(fmc)[#95B3D7] The color of the first data point for Sparkline.
    highMarkerColor(hmc)[#0000FF] The color of the highest data point for Sparkline.
    lastMarkerColor(lastmc)[#95B3D7] The color of the last data point for Sparkline.
    lowMarkerColor(lowmc)[#0000FF] The color of the lowest data point for Sparkline.
    markersColor(mc)[#244062] The color of the data markers for Sparkline.
    negativeColor(nc)[#A52A2A] The color of the negative data points for Sparkline.
    seriesColor(sc)[#244062] The color for Sparkline.
    lineWeight(lw)[1.0] Indicates the line weight for sparkline, where the line weight is measured in points. The weight must be greater than or equal to zero.
    displayXAxis(dxa)[False] Indicates whether the horizontal axis is displayed for Sparkline.
    displayEmptyCellsAs(deca)[0] Indicates how to display the empty cells.
    • gaps: 0
      Leaves gaps for empty values in a data series, which results in a segmented line.
    • zero: 1
      Handles empty values in a data series as zero values, so that the line drops to zero for zero-value data points.
    • connect: 2
      Fills gaps with a connecting element instead of leaving gaps for empty values in a data series.
    displayHidden(dh)[False] Indicates whether data in hidden cells is plotted for the Sparklines.
    manualMax(mmax)[0] Indicates the maximum value for the vertical axis of the sparklines. The axis is set to zero if maxAxisType is not equal to 'custom(2)'.
    manualMin(mmin)[0] Indicates the minimum value for the vertical axis of the sparklines. The axis is set to zero if minAxisType is not equal to 'custom(2)'.
    maxAxisType(maxat)[0] Indicates how the vertical axis maximum is calculated.
    • individual: 0
      Specifies that the vertical axis minimum or maximum for sparkline is calculated automatically such that the data point with the minimum or maximum value can be displayed in the plot area.
    • custom: 2
      Specifies that the vertical axis minimum or maximum for sparkline is specified by the manualMin attribute or the manualMax attribute.
    minAxisType(minat)[0] Indicates how the vertical axis minimum is calculated, similar to the maxAxisType type.
    rightToLeft(rtl)[False] Indicates whether each sparkline in the sparkline group is displayed in a right-to-left manner.

    Refer to the following example code to add line sparkline using formula:

    C#
    Copy Code
    // Create a new workbook.
    var workbook = new Workbook();
    
    // Get active sheet.
    var worksheet = workbook.ActiveSheet;
    
    // Add values to the table.
    worksheet.Range["A1"].Value = "Sales by Country";
    worksheet.Range["A2:F5"].Value = new object[,]
    {
    {"Countries",2016,2017,2018,2019,2020},
    {"China",243000,291000,465000,282000,213000},
    {"India",448000,358000,332000,489000,302000},
    {"UnitedStates",439000,276000,413000,396000,392000}
    };
    worksheet.Range["G2"].Value = "SparkLine";
    
    // Add line sparkline formula.
    worksheet.Range["G3:G5"].Formula = "=LINESPARKLINE(B3:F3,1,,,\"{showMarkers:TRUE,lineWeight:1.5,markersColor:#7030a0}\")";
    
    worksheet.Range["A1:G1"].Merge();
    worksheet.Range["A1"].Interior.Color = System.Drawing.Color.Purple;
    worksheet.Range["A1"].Font.Color = System.Drawing.Color.White;
    worksheet.Range["A1"].HorizontalAlignment = HorizontalAlignment.Center;
    worksheet.Range["A1:G5"].Borders.LineStyle = BorderLineStyle.Thin;
    
    worksheet.Range["B3:F5"].NumberFormat = "$#,##0";
    worksheet.Range["A1:G2"].Font.Bold = true;
    worksheet.Range["A1"].Font.Size = 15;
    worksheet.Range["A2:G5"].Font.Size = 13;
    
    worksheet.Range["A:F"].AutoFit();
    worksheet.Range["1:5"].RowHeight = 25;
    worksheet.Range["G1"].ColumnWidth = 30;
    
    
    // Save as a PDF document.
    workbook.Save("LineSparkline.pdf");
    
    // Save as a .sjs file.
    workbook.Save("LineSparkline.sjs");

    Column Sparkline

    A column sparkline utilizes bar charts for visualizing the distribution and changes in the data. The positive data points will lie above the x-axis, and the negative data points will be below the x-axis.

    Syntax: COLUMNSPARKLINE(data,dataOrientation,[dateAxisData],[dateAxisOrientation],[setting])

    The formula has the following parameters:

    Parameter Name Description
    data A range reference that represents sparkline data, such as "A1:C3".
    dataOrientation A number that represents the sparkline data orientation. One of the following:
    • vertical: 0 (default).
    • horizontal: 1.
    dateAxisData A range reference that represents the sparkline date axis data, such as "D1:F3". If there is no dateAxisOrientation, then dateAxisData is invalid.
    dateAxisOrientation A number that represents the sparkline date axis orientation. One of the following:
    • vertical - 0
    • horizontal - 1
    setting A string in JSON format. format: FullName (abbreviation) [default value]: Description

    The setting parameter provides the following case-sensitive properties to set:

    Parameter Name Description
    showFirst(sf)[False] To check whether the first data point is formatted differently for Sparkline.
    showHigh(sh)[False] To check whether the data points with the highest value are formatted differently for Sparkline.
    showLast(slast)[False] To check whether the last data point is formatted differently for Sparkline.
    showLow(slow)[False] To check whether the data points with the lowest value are formatted differently for Sparkline.
    showNegative(sn)[False] To check whether the negative data points are formatted differently for Sparkline.
    showMarkers(sm)[False] To check whether data markers are displayed for Sparkline.
    axisColor(ac)[#000000] The color of the axis.
    firstMarkerColor(fmc)[#95B3D7] The color of the first data point for Sparkline.
    highMarkerColor(hmc)[#0000FF] The color of the highest data point for Sparkline.
    lastMarkerColor(lastmc)[#95B3D7] The color of the last data point for Sparkline.
    lowMarkerColor(lowmc)[#0000FF] The color of the lowest data point for Sparkline.
    markersColor(mc)[#244062] The color of the data markers for Sparkline.
    negativeColor(nc)[#A52A2A] The color of the negative data points for Sparkline.
    seriesColor(sc)[#244062] The color for Sparkline.
    lineWeight(lw)[1.0] Indicates the line weight for sparkline, where the line weight is measured in points. The weight must be greater than or equal to zero.
    displayXAxis(dxa)[False] Indicates whether the horizontal axis is displayed for Sparkline.
    displayEmptyCellsAs(deca)[0] Indicates how to display the empty cells.
    • gaps: 0
      Leaves gaps for empty values in a data series, which results in a segmented line.
    • zero: 1
      Handles empty values in a data series as zero values, so that the line drops to zero for zero-value data points.
    • connect: 2
      Fills gaps with a connecting element instead of leaving gaps for empty values in a data series.
    displayHidden(dh)[False] Indicates whether data in hidden cells is plotted for the Sparklines.
    manualMax(mmax)[0] Indicates the maximum value for the vertical axis of the sparklines. The axis is set to zero if maxAxisType is not equal to 'custom(2)'.
    manualMin(mmin)[0] Indicates the minimum value for the vertical axis of the sparklines. The axis is set to zero if minAxisType is not equal to 'custom(2)'.
    maxAxisType(maxat)[0] Indicates how the vertical axis maximum is calculated.
    • individual: 0
      Specifies that the vertical axis minimum or maximum for sparkline is calculated automatically such that the data point with the minimum or maximum value can be displayed in the plot area.
    • custom: 2
      Specifies that the vertical axis minimum or maximum for sparkline is specified by the manualMin attribute or the manualMax attribute.
    minAxisType(minat)[0] Indicates how the vertical axis minimum is calculated, similar to the maxAxisType type.
    rightToLeft(rtl)[False] Indicates whether each sparkline in the sparkline group is displayed in a right-to-left manner.

    Refer to the following example code to add column sparkline using formula:

    C#
    Copy Code
    // Create a new workbook.
    var workbook = new Workbook();
    
    // Get active sheet.
    var worksheet = workbook.ActiveSheet;
    
    // Add values to the table.
    worksheet.Range["A1"].Value = "Sales Data";
    worksheet.Range["A2:F6"].Value = new object[,]
    {
    {"Salesperson","Jan","Feb","Mar","Apr","May"},
    {"Courtney Graves",76000,68250,72000,99750,45500},
    {"Crystal Cross",118750,89250,121250,92500,60750},
    {"Jodi Hall",75500,56500,65500,62750,77500},
    {"Andrew James",76750,108500,88000,55750,106000}
    };
    worksheet.Range["G2"].Value = "SparkLine";
    
    // Add column sparkline formula.
    worksheet.Range["G3:G6"].Formula = "=COLUMNSPARKLINE(B3:F3,1,,,\"{showMarkers:TRUE}\")";
    
    worksheet.Range["A1:G1"].Merge();
    worksheet.Range["A1"].Interior.Color = System.Drawing.Color.Purple;
    worksheet.Range["A1"].Font.Color = System.Drawing.Color.White;
    worksheet.Range["A1"].HorizontalAlignment = HorizontalAlignment.Center;
    worksheet.Range["A1:G6"].Borders.LineStyle = BorderLineStyle.Thin;
    
    worksheet.Range["B3:F6"].NumberFormat = "$#,##0";
    worksheet.Range["A1:G2"].Font.Bold = true;
    worksheet.Range["A1"].Font.Size = 15;
    worksheet.Range["A2:G6"].Font.Size = 13;
    
    worksheet.Range["A:F"].AutoFit();
    worksheet.Range["1:6"].RowHeight = 25;
    worksheet.Range["G1"].ColumnWidth = 30;
    
    // Save as a PDF document.
    workbook.Save("ColumnSparkline.pdf");
    
    // Save as a .sjs file.
    workbook.Save("ColumnSparkline.sjs");

    Win-Loss Sparkline

    A win-loss sparkline utilizes bar charts to provide a visual representation of positive and negative values. The positive values (wins) lie above the x-axis, and the negative values (losses) lie below the x-axis. This sparkline supports values with two states, such as true or false or 1 or -1. For example, game results where 1's represent wins and -1's represent defeats.

    Syntax: WINLOSSSPARKLINE(data,dataOrientation,[dateAxisData],[dateAxisOrientation],[setting])

    The formula has the following parameters:

    Parameter Name Description
    data A range reference that represents sparkline data, such as "A1:C3".
    dataOrientation A number that represents the sparkline data orientation. One of the following:
    • vertical: 0 (default).
    • horizontal: 1.
    dateAxisData A range reference that represents the sparkline date axis data, such as "D1:F3". If there is no dateAxisOrientation, then dateAxisData is invalid.
    dateAxisOrientation A number that represents the sparkline date axis orientation. One of the following:
    • vertical - 0
    • horizontal - 1
    setting A string in JSON format. format: FullName (abbreviation) [default value]: Description

    The setting parameter provides the following case-sensitive properties to set:

    Parameter Name Description
    showFirst(sf)[False] To check whether the first data point is formatted differently for Sparkline.
    showHigh(sh)[False] To check whether the data points with the highest value are formatted differently for Sparkline.
    showLast(slast)[False] To check whether the last data point is formatted differently for Sparkline.
    showLow(slow)[False] To check whether the data points with the lowest value are formatted differently for Sparkline.
    showNegative(sn)[False] To check whether the negative data points are formatted differently for Sparkline.
    showMarkers(sm)[False] To check whether data markers are displayed for Sparkline.
    axisColor(ac)[#000000] The color of the axis.
    firstMarkerColor(fmc)[#95B3D7] The color of the first data point for Sparkline.
    highMarkerColor(hmc)[#0000FF] The color of the highest data point for Sparkline.
    lastMarkerColor(lastmc)[#95B3D7] The color of the last data point for Sparkline.
    lowMarkerColor(lowmc)[#0000FF] The color of the lowest data point for Sparkline.
    markersColor(mc)[#244062] The color of the data markers for Sparkline.
    negativeColor(nc)[#A52A2A] The color of the negative data points for Sparkline.
    seriesColor(sc)[#244062] The color for Sparkline.
    lineWeight(lw)[1.0] Indicates the line weight for sparkline, where the line weight is measured in points. The weight must be greater than or equal to zero.
    displayXAxis(dxa)[False] Indicates whether the horizontal axis is displayed for Sparkline.
    displayEmptyCellsAs(deca)[0] Indicates how to display the empty cells.
    • gaps: 0
      Leaves gaps for empty values in a data series, which results in a segmented line.
    • zero: 1
      Handles empty values in a data series as zero values, so that the line drops to zero for zero-value data points.
    • connect: 2
      Fills gaps with a connecting element instead of leaving gaps for empty values in a data series.
    displayHidden(dh)[False] Indicates whether data in hidden cells is plotted for the Sparklines.
    manualMax(mmax)[0] Indicates the maximum value for the vertical axis of the sparklines. The axis is set to zero if maxAxisType is not equal to 'custom(2)'.
    manualMin(mmin)[0] Indicates the minimum value for the vertical axis of the sparklines. The axis is set to zero if minAxisType is not equal to 'custom(2)'.
    maxAxisType(maxat)[0] Indicates how the vertical axis maximum is calculated.
    • individual: 0
      Specifies that the vertical axis minimum or maximum for sparkline is calculated automatically such that the data point with the minimum or maximum value can be displayed in the plot area.
    • custom: 2
      Specifies that the vertical axis minimum or maximum for sparkline is specified by the manualMin attribute or the manualMax attribute.
    minAxisType(minat)[0] Indicates how the vertical axis minimum is calculated, similar to the maxAxisType type.
    rightToLeft(rtl)[False] Indicates whether each sparkline in the sparkline group is displayed in a right-to-left manner.

    Refer to the following example code to add win-loss sparkline using formula:

    C#
    Copy Code
    // Create a new workbook.
    var workbook = new Workbook();
    
    // Get active sheet.
    var worksheet = workbook.ActiveSheet;
    
    // Add values to the table.
    worksheet.Range["A1"].Value = "Employee Performance";
    worksheet.Range["A2:F5"].Value = new object[,]
    {
    {"Team Member","Wk1","Wk2","Wk3","Wk4","Wk5"},
    {"Pamela Nelson",5,1,7,5,8},
    {"Gabriel Reed",1,2,4,2,9},
    {"Christina Robbins",4,10,8,5,10}
    };
    worksheet.Range["H2"].Value = "Target (tasks per week):";
    worksheet.Range["I2"].Value = 5;
    worksheet.Range["G2"].Value = "SparkLine";
    
    
    // Add win-loss sparkline formula. Use Formula2 as the formula contains a dynamic array formula (B3:F3-$I$2).
    worksheet.Range["G3:G5"].Formula2 = "=WINLOSSSPARKLINE(B3:F3-$I$2,1,,,\"{showNegative:TRUE}\")";
    
    worksheet.Range["A1:G1"].Merge();
    worksheet.Range["A1"].Interior.Color = System.Drawing.Color.Purple;
    worksheet.Range["A1"].Font.Color = System.Drawing.Color.White;
    worksheet.Range["A1"].HorizontalAlignment = HorizontalAlignment.Center;
    worksheet.Range["A1:G5"].Borders.LineStyle = BorderLineStyle.Thin;
    
    worksheet.Range["A1:G2"].Font.Bold = true;
    worksheet.Range["A1"].Font.Size = 15;
    worksheet.Range["A2:G5"].Font.Size = 13;
    worksheet.Range["H2:I2"].Font.Bold = true;
    worksheet.Range["H2:I2"].Font.Size = 13;
    
    worksheet.Range["A:F"].AutoFit();
    worksheet.Range["1:5"].RowHeight = 25;
    worksheet.Range["G1:H1"].ColumnWidth = 30;
    
    // Save as a PDF document.
    workbook.Save("WinLossSparkline.pdf");
    
    // Save as a .sjs file.
    workbook.Save("WinLossSparkline.sjs");

    Image Sparkline

    An image sparkline adds an image to the cells of a worksheet for importing and exporting files containing SpreadJS IMAGE sparkline formula(s). You can display the image in different sizes by using various parameters of the image sparkline formula.

    Syntax: IMAGE(source, [alt_text], [sizing], [height], [width], [clipY], [clipX], [clipHeight], [clipWidth], [vAlign], [hAlign])

    The formula has the following parameters:

    Parameter Name Description
    source The URL path, using an "https" protocol, of the image file or Base64 string. DsExcel supports BMP, JPG/JPEG, GIF, TIFF, PNG, and ICO file formats.
    alt_text Alternative text that describes the image for accessibility.
    sizing Specifies the image dimensions. The following are the possible values:
    • 0: Fits the image in the cell and maintain its aspect ratio.
    • 1: Fills the cell with the image and ignore its aspect ratio.
    • 2: Maintains the original image size, which may exceed the cell boundary.
    • 3: Customizes the image size by using the height and width arguments.
    height The custom height of the image in pixels.
    width The custom width of the image in pixels.
    clipY The Y-axis coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
    clipX The X-axis coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
    clipHeight The height of the sub-rectangle of the source image to draw into the destination context.
    clipWidth The width of the sub-rectangle of the source image to draw into the destination context.
    vAlign This value indicates the vertical alignment of the image. The following are the possible values:
    • 0: Top
    • 1: Center
    • 2: Bottom
    hAlign This value indicates the horizontal alignment of the image. The following are the possible values:
    • 0: Left
    • 1: Center
    • 2: Right

    DsExcel retains all the parameters when exporting to .sjs and .ssjson; however, when exporting to Excel, DsExcel truncates the formula to be consistent with SpreadJS. Furthermore, the IMAGE sparkline formula parameters work effectively when exporting to PDF or image formats.

    Note: DsExcel does not recommend exporting to Excel (xlsx format), as doing so may result in the following issues:

    • Excessively long Excel formula, resulting in an Excel file error when using Base64 as a parameter
    • Parameters unique to Image Sparkline will be truncated, resulting in improper functioning of the exported Excel

    Refer to the following example code to add an image sparkline using formula:

    C#
    Copy Code
    // Create a new workbook.
    var workbook = new Workbook();
    
    // Get active worksheet.
    var ws = workbook.ActiveSheet;
    
    // Add base64 image string.
    var base64Img =
        "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/" +
        "2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBc" +
        "UFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/" +
        "2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCg" +
        "oKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/" +
        "wAARCABtAG8DAREAAhEBAxEB/8QAHAAAAQUBAQEAAAAAAAAAAA" +
        "" +
        "AAAAECBAUGAwgH/8QAOhAAAQMCAwUGAggGAwAAAAAAA" +
        "QACAwQRBRIhBhMxQVEHFCJhcYEysSNCUlNikZLBFRYkJTThM3Kh/" +
        "8QAGwEAAQUBAQAAAAAAAAAAAAAAAAECAwQFBgf/xAAsEQACAgEEAQMEAg" +
        "EFAAAAAAAAAQIDEQQSITEFEyJBBhQyURUkUiMzQmFx/9oA" +
        "DAMBAAIRAxEAPwD1SgAuEieegAlGUAlwk3LAESqrYafV7tfLis/" +
        "UeRop/KRLGmc+kdIKqGZt45Gn3Umn19Ny9shJVSj2jsHC/FWXbD9jMMa"
        + "+VjRdzwPVNs1Nday2KoSfSIf8Upu9CEyC9r5uSzl5bTOzbuJPQnjOCc17" +
        "SLhwIWpXbGxZiyJprsddSCBdD4ALpE88oASgCAEJsNUmP0BX4l" +
        "iUVHu2vPjkNmjzWT5LysPHrGMsmrqcmUdZX1kxcN" +
        "5u28g1chqfNajUv2vCNGrTQXJXxl8gIlcS/" +
        "mSsa65t+55ZYcFHoe3eRmzZLn0sleougvYxPSTXJI" +
        "jkmdGS+Qg30GY6re0ulvt07tlMrOMN205GSZ3xA" +
        "W63usC6+2FmyUuCaNcUco2OLiXWN9B5J3qLP/" +
        "ZJ7cE2GpngsY5HDy4q1V5TUaf8JcEU6YTLWjxlr" +
        "" +
        "nhlQMrjwcOC6jxv1ArWoWlC3TuPRbteHNuDcdV1MZJrP7" +
        "KrWBwS9CCpQAlAEWtqmU0LnuPoOqoa/Vx0le5vkkrrlN8GPxEurQ/" +
        "eE3doPLovONZrJ6q31Js2a64xjgfDL3inZKLjMLqmll" +
        "5YPjoHDW4TpSSHfA5rm380xuUhG2xwe9o8L7C+otdW46+6uHproh9" +
        "JJ7hpBIOuhKrSSm9z7JUhBpySNprHTF2p9iuN" +
        "m3sh4x+wxjoY5pLdEtcpJ+3gXh8MtMDxAseKee+U/" +
        "CTyK7bwnk/WXpXPlGbqaWuUaPmF1WSkuhUoDJH" +
        "BjC48AorrVVHcxYrc8GVxKqNVObGzBwH7rzvzXkJ6mzbHo" +
        "1dPXtRDPwlYspJLBcEof+KSMfUcR7JyI5HZ1gLlAqGOZf1RkGxLEIygfKHC/" +
        "MpjljkEKhNSWRRHXKVCMeRZDTa4GsYQTqFZpvlTNTj8BOO+ODQ4JXd4j3Up" +
        "+lZ/6F6T47XQ1dSa7Me2vYy1WiREDFY5ZKUiE8DqOoWV5W" +
        "uydElAlpaU02Zcg5zcWI0svN5RlXNqXZrwkn0NI42UEo85l2SfIyiNqqoHK4KdDnhCSQ" +
        "+rnbA5peCczwwEa2J4J8YOecfA3ckiuxeurYnvgwuhkq" +
        "5xHvPAMwYQ5ujulw5x9lq6Lx09VXvrWUQWWqPLOlBioqoax" +
        "5pqmnNLI+N0c7N245QDmANtDra6q6rQ2U2KEkPrsU1lFYMfrG1EdQ/" +
        "C61mFPp2vEpgcHNkc4AtceAAFjfhpxWjLw1vo7" +
        "9pH9xBy255NAydjpBGCS4tzjzHX0WF6W1FhS+DpxIU" +
        "a5eBzHcSeqkjlMRDToUL9As5ObJnw1DHxEl4I0HNdd9O" +
        "ae6t5x7SjqpQa47NrA8vjY4tLS4XI6LsjPHngmyxjkCqxPDt5eWHSTmOv" +
        "+1zfmPCR1EXOrss1XuPBROjJNnDKQdQVxL01tL9OS5" +
        "NKFqayRacDvM5HQIdUoS9ywPUtxxxOrbDNGzJJI8Xk" +
        "s21rDiUUVbG22CivkrMR24ptldln176US1BIe8s" +
        "+GRpuQ4EakAae69F8HGqdajFYMPXSlCWfg5naygx6D" +
        "BMVip5xvHgVwbGHgQ2vmd+G9vO11Prq9NG5ep2Nqt" +
        "lKGYkij7UsMqtsajZ19I9sLWH6S12uFyPSx6LRsohXS2" +
        "+iKFm6ePkkUNZCKqWIRSRsEjhC54A8BNwPLy9F5h5aMXZmr" +
        "o3q1iPuLJxs8FZihl7V2TPo6tIdYtcNVNPR214yRKa6Och" +
        "" +
        "Idu4xmkOgC3vE+GlfJTsXBXu1G3hF5g2EiACao8" +
        "Up1A+yu4qphWkomdKe95LsKUQSyAAhJjIIgYhh0dY3W7H/" +
        "AGm8fdVJ6Gqc97Q9WNcFFU0cdHUGOMl3hFyVx/1GowtUYI" +
        "0NPJtZINVA2ZhJA3gBDXcOK5yviSyW+0fO+y7ajCMVwqTBto" +
        "aeKrrqciJ0c2XM4tuAW5jrp068LL0KjUrSRU0vaZ+podvDRsqygdLNO+gpqajp" +
        "+692jhtzBJu4j1WB5Xy8dZbF9YCqhVRwiNjlZsxgd" +
        "LPiGI4bHS1roDG6WzQHOtxBJuT0XRfycdTUqk+yGOkcZ7" +
        "0UXZrjv82MxGumaAyOZkUYv4nNaNHO93XXKeYo+2cYxNKL" +
        "z2bt/K/BZFP+9GQ+zLjwWuDUUVXhlpG2dmIDhxC9N" +
        "+xqthFyMh2vJY4bhUVGS7WSQ/WPJW4QUVtSwiKT3d" +
        "liBqpBBUACAAoAQ6IEZnMXP9e//qFwP1G/7JqaX8Srnz" +
        "CGTICXZTYBc58otN4R5Y7TcOfhe101XTsdDS1gFRTva7UXAzgHiLOHyXo/" +
        "jra79OoS5ES3Iu8O7Ue5YXg9M2hrXTUkjTVSnE5" +
        "D3qPKQWWI8NyQbjopZaGiXDiRyg8mJ2lxufGsTqq" +
        "l0lSKaSV0kMEs7pRECSQ0X6Xt1U9VNNUXLHQ+Kwehex/" +
        "Z1uC7Nwyufeadgke22rS4AjX0suF8zrVqLcL4HKPOTeSHQLIpfuX/AKL/AMWX" +
        "+yxvRPHR69bq/CJhPtl0pBAQAIAEABQAjkj6EZmc" +
        "YP8AcZPQLz36hlnUs1dKvaQdbLn8lpLPBiO07ZOkx/B" +
        "4ZJSIn0T99doAzMHxM8gdNeoXQeB1coT2sEnngx1T2b" +
        "4BNHDuoZaV4c1zssrjmHNviPProu5jc2ui5CtNZJdD2dYGcbw/u1M" +
        "+MMfvXl0hdmynhY6a8fZZfktS6a3ggthg+tRsbGw" +
        "Na1rWgWAaLaLz2djnJtkaEcLkBJV+SEfEWXmypvBOPxr" +
        "1vTtSqi0YcliTyXqmGggAQAIAEAIeSBGZbFj/AHCX2+QXm/n3/aka" +
        "+lXsId1ixxnksrs4YhSx11DUUst93NG6N1uNiLJ2mul" +
        "VbuQdGXp8MxaGQ088DZ4mNAFQyQDPbqw8Cu10/mq9uJdk0" +
        "bWidgmH1jMTkqKxgiijaWRsDg4vvbxm3uFk+V8nG5YQyc" +
        "22aFc3HlNjfgQj5qWnsbPoudlD9HUj8Q+S9W0T/" +
        "wBGJi3fkXytEYIAEACABADSkl0BlcU/z5fUfJea+el/" +
        "bkbGmftIqxiwCXpCAkUfnIYE5oxnsXgcEc5wgY08E6t4Y" +
        "2fRb7KaCpHO4/deq+PlmiODFu/I0CukYIAEACABADXaJsnhAZXE/" +
        "wDOl9V5p5tp6yRsaZe0irKb5LAJMMARhgCMMUAUdCM" +
        "OKWDy0JLottl9JKoeY/dep+Na+3iY135GgV8hBAAgAQAIAa7" +
        "VI1lYFM1isEsVS+R7CWPddpaFxXlPEX3aiVkI8M0Kboxjhsgl4H" +
        "1T+SzZeE1OeIkn3MP2JnHQ/kk/hdX/AIi/cQ/Ym8bb/" +
        "SP4XV/4h9xD9hvG8/kj+F1f+IfcQ/YmdvIH8kv8Jqn3EHqIf" +
        "saHHNox35J8fBanj2iS1UGuy52YDt/Uktc0G3EWXdaOl1VKMuzNsl" +
        "ullGhVsYCABAAUANSYDCFQ+EGBCLjVCwxOhu6YTqxp9kbEODcx/ds/Sk2oTIbiL7tn6QjagyG5j+7Z" +
        "+lG1BkNzH92z9KNqDIu6Z9hv5IUUgHBoHAAegTgFQAIAEAf/2Q==";
    
    // Add alternative text that describes the image for accessibility.
    var altText = "altText";
    
    // Customize the image size.
    var sizing = 3;
    
    // Customize height of the image in pixels.
    var height = 60;
    
    // Customize width of the image in pixels.
    var width = 60;
    
    // Customize the Y-axis coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
    var clipY = 0;
    
    // Customize the X-axis coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
    var clipX = 0;
    
    // Customize the height of the sub-rectangle of the source image to draw into the destination context.
    var clipH = 50;
    
    // Customize the width of the sub-rectangle of the source image to draw into the destination context.
    var clipW = 50;
    
    // Customize the vertical alignment of the image.
    var vAlign = 1;
    
    // Customize the horizontal alignment of the image.
    var hAlign = 1;
    
    // Add headers for the images.
    ws.Range["A1"].Value = "Original Image";
    ws.Range["B1"].Value = "Resized Image";
    
    // Add IMAGE formula.
    ws.Range["A2"].Formula = $"=IMAGE(\"{base64Img}\",\"{altText}\",{sizing},{height},{width})";
    
    // Add IMAGE sparkline formula.
    ws.Range["B2"].Formula =
        $"=IMAGE(\"{base64Img}\",\"{altText}\",{sizing},{height},{width},{clipY},{clipX},{clipH},{clipW},{vAlign},{hAlign})";
    
    ws.Range["A2:B2"].RowHeightInPixel = 120;
    ws.Range["A2:B2"].ColumnWidthInPixel = 120;
    ws.PageSetup.PrintGridlines = true;
    
    // Save workbook to a PDF document.
    workbook.Save("ImageSparkline.pdf");
    
    // Save workbook to a .sjs document.
    workbook.Save("ImageSparkline.sjs");

    Note:

    • Using Value property of IRange interface to get the formula result will return the ISparkLineObject representing the Sparkline object. ToJson method of ISparkLineObject interface can return the JSON string corresponding to the object.
    • Using Text property of IRange interface to get the formula result will return an empty string.
    • MS Excel does not support the SPARKLINE formula, so the result of this formula will be "#NAME?".
    • A user can import and export JSON or .sjs files containing sparkline.
    • DsExcel supports exporting the sparkline formula to PDF, HTML, or Image.
    • If the formula is incorrect, the result will be CalcError.Value.
    See Also