ejSparkline

Essential sparkline can be easily configured to the DOM element, such as div. You can create a Sparkline with highly customizable look and feel.

Syntax

  • js
  • $(element).ejSparkline();

    Example

  • html
  • <div id="container"></div> 
     
    <script>
    // Create Sparkline
    $('#container').ejSparkline();      
    </script>

    Requires

    • module:jQuery.js

    • module:ej.core.js

    • module:ej.data.js

    • module:ej.sparkline.js

    • module:ej.globalize.js

    Members

    background string

    Background color of the plot area.

    Default Value

    • transparent

    Example

  • js
  • $("#container").ejSparkline({
    
        background : "gray" 
                              
    });

    Try it: JS Playground Sample

    fill string

    Fill color for the sparkline series.

    Default Value

    • “#33ccff”

    Example

  • js
  • $("#container").ejSparkline({
        fill : "green"                  
    });

    Try it: JS Playground

    stroke string

    Border color of the series.

    Default Value

    • null

    Example

  • js
  • $("#container").ejSparkline({
        stroke: "green"                   
    });

    border object

    Options for customizing the color, opacity and width of the sparkline border.

    border.color string

    Border color of the sparkline.

    Default Value

    • transparent

    Example

  • js
  • $("#container").ejSparkline({
    
       border: { color: "green" }                      
    
    });

    border.width number

    Width of the Sparkline border.

    Default Value

    • 1

    Example

  • js
  • $("#container").ejSparkline({
    
       border: { width: 2 }                      
    
    });

    width number

    Border width of the series.

    Default Value

    • 1

    Example

  • js
  • $("#container").ejSparkline({
        width : 2                   
    });

    opacity number

    Opacity of the series.

    Default Value

    • 1

    Example

  • js
  • $("#container").ejSparkline({
        opacity : 2                  
    });

    highPointColor string

    Color for series high point.

    Default Value

    • null

    Example

  • js
  • $("#container").ejSparkline({
        highPointColor : "green"                  
    });

    Try it: JS Playground

    lowPointColor string

    Color for series low point.

    Default Value

    • null

    Example

  • js
  • $("#container").ejSparkline({
        lowPointColor : "green"                  
    });

    Try it: JS Playground

    startPointColor string

    Color for series start point.

    Default Value

    • null

    Example

  • js
  • $("#container").ejSparkline({
        startPointColor : "green"                  
    });

    Try it: JS Playground

    endPointColor string

    Color for series end point.

    Default Value

    • null

    Example

  • js
  • $("#container").ejSparkline({
        endPointColor : "green"                  
    });

    Try it: JS Playground

    negativePointColor string

    Color for series negative point.

    Default Value

    • null

    Example

  • js
  • $("#container").ejSparkline({
        negativePointColor : "green"                  
    });

    Try it: JS Playground

    rangeBandSettings object

    Options for customizing the color, opacity of the sparkline start and end range.

    rangeBandSettings.startRange number

    Start value of the range band.

    Default Value

    • null

    Example

  • js
  • $("#container").ejSparkline({
         rangeBandSettings:{
            startRange : 2
        }                  
    });

    rangeBandSettings.endRange number

    End value of the range band.

    Default Value

    • null

    Example

  • js
  • $("#container").ejSparkline({
        rangeBandSettings:{
            endRange : 2
        }                  
    });

    rangeBandSettings.opacity number

    Range band opacity of the series.

    Default Value

    • 1

    Example

  • js
  • $("#container").ejSparkline({
         rangeBandSettings:{
            opacity : 2
        }                  
    });

    rangeBandSettings.color string

    Range band color of the series.

    Default Value

    • transparent

    Example

  • js
  • $("#container").ejSparkline({
        rangeBandSettings:{
            color : 'purple'
        }                  
    });

    locale string

    Name of the culture based on which sparkline should be localized.

    Default Value

    • “en-US”

    Example

  • js
  • $("#container").ejSparkline({
        locale : "en-US"
    });

    palette string

    Name of a field in data source, where the fill color for all the data points is generated.

    Default Value

    • ””

    Example

  • js
  • $("#container").ejSparkline({
        palette : "ColorFieldName"                  
    });

    isResponsive boolean

    Controls whether sparkline has to be responsive or not.

    Default Value

    • true

    Example

  • js
  • $("#container").ejSparkline({
    
       isResponsive : true             
    
    });

    enableCanvasRendering boolean

    Controls whether Sparkline has to be rendered as Canvas or SVG.Canvas rendering supports all functionalities in SVG rendering.

    Default Value

    • false

    Example

  • js
  • $("#container").ejSparkline({
    
        enableCanvasRendering : true             
    
    });

    Try it: JS Playground Sample

    enableGroupSeparator boolean

    Specify to convert the date object to string, using locale settings.

    Default Value

    • false

    Example

  • js
  • $("#container").ejSparkline({
    
        enableGroupSeparator : true
    
    });

    dataSource object

    Specifies the dataSource for the series. It can be an array of JSON objects or an instance of ej.DataManager.

    Default Value

    • null

    Example

  • js
  • $("#container").ejSparkline({
        
        dataSource: data
                           
    });

    Try it : JS Playground Sample

    xName string

    Name of the property in the datasource that contains x value for the series.

    Default Value

    • null

    Example

  • js
  • $("#container").ejSparkline({
        
        xName: "XValue"
                           
    });

    Try it: JS Playground Sample

    yName string

    Name of the property in the datasource that contains y value for the series.

    Default Value

    • null

    Example

  • js
  • $("#container").ejSparkline({
        
        yName: "YValue"
                           
    });

    Try it: JS Playground Sample

    padding number

    Gap or padding for sparkline.

    Default Value

    • 8

    Example

  • js
  • $("#container").ejSparkline({
    
        padding : 5                     
    
    });

    type enum

    Specifies the type of the series to render in sparkline.

    Name Type Description
    Area string Specifies the series type as area.
    Line string Specifies the series type as line.
    Column string Specifies the series type as column.
    Pie string Specifies the series type as pie.
    WinLoss string Specifies the series type as WinLoss.

    Default Value

    • “line”. See Type

    Example

  • js
  • $("#container").ejSparkline({
        type : "area"                  
    });

    Try it: JS Playground Sample

    theme enum

    Specifies the theme for Sparkline.

    Name Type Description
    Azure string The Sparkline will be displayed in azure theme
    FlatLight string The Sparkline will be displayed in light flat theme
    FlatDark string The Sparkline will be displayed in dark flat theme
    Azuredark string The Sparkline will be displayed in dark azure theme
    Lime string The Sparkline will be displayed in lime theme
    LimeDark string The Sparkline will be displayed in dark lime theme
    Saffron string The Sparkline will be displayed in saffron theme
    SaffronDark string The Sparkline will be displayed in dark saffron theme
    GradientLight string The Sparkline will be displayed in light gradient theme
    GradientDark string The Sparkline will be displayed in dark gradient theme

    Default Value

    • “Flatlight”. See Theme

    Example

  • js
  • $("#container").ejSparkline({
    
       theme : "flatdark"            
    
    });

    Try it: JS Playground Sample

    tooltip object

    Options to customize the tooltip.

    tooltip.visible boolean

    Show/hides the tooltip visibility.

    Default Value

    • false

    Example

  • js
  • $("#container").ejSparkline({
    
       tooltip :{visible :true}              
    
    });

    Try it: JS Playground Sample

    tooltip.fill string

    Fill color for the sparkline tooltip.

    Default Value

    • “white”

    Example

  • js
  • $("#container").ejSparkline({
        tooltip:{
            fill : "green"
        }                  
    });

    Try it: JS Playground

    tooltip.template string

    Custom template to the tooltip.

    Default Value

    • ””

    Example

  • js
  • $("#container").ejSparkline({
        tooltip :{template : "item"}                  
    });

    Try it: JS Playground Sample

    tooltip.border object

    Options for customizing the border of the tooltip.

    tooltip.border.color string

    Border color of the tooltip.

    Default Value

    • “transparent”

    Example

  • js
  • $("#container").ejSparkline({
        tooltip:{
            border:{color : "green"}
        }                  
    });

    tooltip.border.width number

    Border width of the tooltip.

    Default Value

    • 1

    Example

  • js
  • $("#container").ejSparkline({
        tooltip :{border :{width : 2}}                  
    });

    tooltip.font object

    Options for customizing the font of the tooltip.

    tooltip.font.color string

    Font color of the text in the tooltip.

    Default Value

    • “#111111”

    Example

  • js
  • $("#container").ejSparkline({
    tooltip :{font :{color : "green"}}                 
    });

    tooltip.font.fontFamily string

    Font Family for the tooltip.

    Default Value

    • “Segoe UI”

    Example

  • js
  • $("#container").ejSparkline({
    tooltip :{ font : { fontFamily : "Algerian"}}                 
    });

    tooltip.font.fontStyle enum

    Specifies the font Style for the tooltip.

    Name Type Description
    Normal string Specifies the fontStyle as normal.
    Italic string Specifies the fontStyle as italic.

    Default Value

    • “Normal”

    Example

  • js
  • $("#container").ejSparkline({
    tooltip : {font :{fontStyle : "italic"}}                 
    });

    tooltip.font.fontWeight enum

    Specifies the font weight for the tooltip.

    Name Type Description
    Regular string Specifies the font weight as regular.
    Bold string Specifies the font weight as bold.
    Lighter string Specifies the font weight as lighter.

    Default Value

    • “Regular”

    Example

  • js
  • $("#container").ejSparkline({
    tooltip :{font :{fontWeight : "lighter"}}                 
    });

    tooltip.font.opacity number

    Opacity for text in the tooltip.

    Default Value

    • 1

    Example

  • js
  • $("#container").ejSparkline({
    tooltip :{font :{opacity : 0.5}}                 
    });

    tooltip.font.size string

    Font size for text in the tooltip.

    Default Value

    • “8px”

    Example

  • js
  • $("#container").ejSparkline({
    tooltip :{font :{size : "14px"}}                 
    });

    markerSettings object

    Options for displaying and customizing marker for a data point.

    markerSettings.opacity number

    Controls the opacity of the marker.

    Default Value

    • 1

    Example

  • js
  • $("#container").ejSparkline({
        markerSettings:{
            opacity : 2
        }                  
    });

    markerSettings.visible boolean

    Controls the visibility of the marker shape.

    Default Value

    • false

    Example

  • js
  • $("#container").ejSparkline({
        markerSettings :{ visible : true}                  
    });

    markerSettings.width number

    width of the marker shape.

    Default Value

    • 2

    Example

  • js
  • $("#container").ejSparkline({
        markerSettings :{width : 2}                  
    });

    markerSettings.fill string

    Color of the marker shape.

    Default Value

    • “white”

    Example

  • js
  • $("#container").ejSparkline({
        markerSettings : { fill : "green" }                  
    });

    markerSettings.border object

    Options for customizing the border of the marker shape.

    markerSettings.border.color string

    Border color of the marker shape.

    Default Value

    • “transparent”

    Example

  • js
  • $("#container").ejSparkline({
        markerSettings:{
            border:{color : "green"}
        }                  
    });

    markerSettings.border.opacity number

    Controls the opacity of the marker border.

    Default Value

    • 1

    Example

  • js
  • $("#container").ejSparkline({
        markerSettings:{
            border:{opacity : 2}
        }                  
    });

    markerSettings.border.width number

    Border width of the marker shape.

    Default Value

    • null

    Example

  • js
  • $("#container").ejSparkline({
        markerSettings :{border :{width : 2}}                  
    });

    Try it: JS Playground Sample

    size object

    Options to customize the Sparkline size.

    Try it: JS Playground Sample

    size.height string

    Height of the Sparkline. Height can be specified in either pixel or percentage.

    Default Value

    • ’’

    Example

  • js
  • $("#container").ejSparkline({
    
       size :{height : '80%'}          
    
    });

    size.width string

    Width of the Sparkline. Width can be specified in either pixel or percentage.

    Default Value

    • ’’

    Example

  • js
  • $("#container").ejSparkline({
    
       size :{width : '80%'}          
    
    });

    axisLineSettings object

    Options for customizing the color,dashArray and width of the axisLine.

    Try it: JS Playground Sample

    axisLineSettings.visible boolean

    Controls the visibility of the axis.

    Default Value

    • false

    Example

  • js
  • $("#container").ejSparkline({
        axisLineSettings : {visible:true}                  
    });

    axisLineSettings.color string

    Color of the axis line.

    Default Value

    • ‘#111111’

    Example

  • js
  • $("#container").ejSparkline({
    
       axisLineSettings: { color: "green" }                      
    
    });

    axisLineSettings.width number

    Width of the axis line.

    Default Value

    • 1

    Example

  • js
  • $("#container").ejSparkline({
    
       axisLineSettings: { width: 2 }                      
    
    });

    axisLineSettings.dashArray number

    Dash array of the axis line.

    Default Value

    • 1

    Example

  • js
  • $("#container").ejSparkline({
    
       axisLineSettings: { dashArray: 2 }                      
    
    });

    Methods

    redraw()

    Redraws the entire sparkline. You can call this method whenever you update, add or remove points from the data source or whenever you want to refresh the UI.

    Returns: void

    Example

  • js
  • // Redraw Sparkline
    var sparklineObj = $("#container").data("ejSparkline");
    sparklineObj.redraw();
  • js
  • $("#container").ejSparkline("redraw");

    Events

    load

    Fires before loading the sparkline.

    Example

  • js
  • //load event for sparkline
    
    $("#container").ejSparkline({
    
        load: function (args) {
                 //Do something
        }
        
    });
    Name Type Description
  • js
  • cancel
    boolean Set this option to true to cancel the event
  • js
  • model
    object Instance of the sparkline model object
  • js
  • type
    string Name of the event

    loaded

    Fires after loaded the sparkline.

    Example

  • js
  • //loaded event for sparkline
    
    $("#container").ejSparkline({
    
        loaded: function (args) {
                 //Do something
        }
        
    });
    Name Type Description
  • js
  • cancel
    boolean Set this option to true to cancel the event
  • js
  • model
    object Instance of the sparkline model object
  • js
  • type
    string Name of the event

    tooltipInitialize

    Fires before rendering trackball tooltip. You can use this event to customize the text displayed in trackball tooltip.

    Example

  • js
  • //ToolTip event for sparkline
    
    $("#container").ejSparkline({
    
        tooltipInitialize: function (args) {
                  //Do something
        }
       
    });
    Name Type Description
  • js
  • cancel
    boolean Set this option to true to cancel the event
  • js
  • model
    object Instance of the sparkline model object
  • js
  • type
    string Name of the event
  • js
  • locationX
    Object X Location of the trackball tooltip in pixels
  • js
  • locationY
    Object Y Location of the trackball tooltip in pixels
  • js
  • pointIndex
    number Index of the point for which trackball tooltip is displayed
  • js
  • currentText
    string Text to be displayed in trackball tooltip. Use this option to add custom text in trackball tooltip

    seriesRendering

    Fires before rendering a series. This event is fired for each series in Sparkline.

    Example

  • js
  • //seriesRendering event for sparkline
    
    $("#container").ejSparkline({
    
        seriesRendering: function (args) {
                  //Do something
        }
        
    });
    Name Type Description
  • js
  • cancel
    boolean Set this option to true to cancel the event
  • js
  • model
    object Instance of the sparkline model object
  • js
  • type
    string Name of the event
  • js
  • minX
    Object Minimum x value of the data point
  • js
  • minY
    Object Minimum y value of the data point
  • js
  • maxX
    Object Maximum x value of the data point
  • js
  • maxY
    Object Maximum y value of the data point

    pointRegionMouseMove

    Fires when mouse is moved over a point.

    Example

  • js
  • //pointRegionMouseMove event for sparkline
    
    $("#container").ejSparkline({
    
        pointRegionMouseMove: function (args) {
                      //Do something
        }
       
    });
    Name Type Description
  • js
  • cancel
    boolean Set this option to true to cancel the event
  • js
  • model
    object Instance of the sparkline model object
  • js
  • type
    string Name of the event
  • js
  • locationX
    number X-coordinate of point in pixel
  • js
  • locationY
    number Y-coordinate of point in pixel
  • js
  • pointIndex
    number Index of the point in series
  • js
  • seriesType
    string Type of the series

    pointRegionMouseClick

    Fires on clicking a point in sparkline. You can use this event to handle clicks made on points.

    Example

  • js
  • //pointRegionClick event for sparkline
    
    $("#container").ejSparkline({
    
        pointRegionMouseClick: function (args) {
                 //Do something
        }
        
    });
    Name Type Description
  • js
  • cancel
    boolean Set this option to true to cancel the event
  • js
  • model
    object Instance of the sparkline model object
  • js
  • type
    string Name of the event
  • js
  • locationX
    number X-coordinate of point in pixel
  • js
  • locationY
    number Y-coordinate of point in pixel
  • js
  • pointIndex
    number Index of the point in series
  • js
  • seriesType
    string Type of the series

    sparklineMouseMove

    Fires on moving mouse over the sparkline.

    Example

  • js
  • //sparklineMouseMove event for sparkline
    
    $("#container").ejSparkline({
    
        sparklineMouseMove: function (args) {
                  //Do something
        }
       
    });
    Name Type Description
  • js
  • cancel
    boolean Set this option to true to cancel the event
  • js
  • model
    object Instance of the sparkline model object
  • js
  • type
    string Name of the event

    sparklineMouseLeave

    Fires on moving mouse outside the sparkline.

    Example

  • js
  • //sparklineMouseLeave event for sparkline
    
    $("#container").ejSparkline({
    
        sparklineMouseLeave: function (args) {
                  //Do something
        }
       
    });
    Name Type Description
  • js
  • cancel
    boolean Set this option to true to cancel the event
  • js
  • model
    object Instance of the sparkline model object
  • js
  • type
    string Name of the event

    Click

    Fires, on clicking the sparkline.

    Name Type Description
  • js
  • cancel
    boolean Set this option to true to cancel the event
  • js
  • model
    object Instance of the sparkline model object
  • js
  • type
    string Name of the event

    Example

  • js
  • //Click event for sparkline
    
     $("#container").ejSparkline({
    
    
        click: function (args) {
                  //Do something
        }
       
    });

    doubleClick

    Fires, on double clicking the sparkline.

    Name Type Description
  • js
  • cancel
    boolean Set this option to true to cancel the event
  • js
  • model
    object Instance of the sparkline model object
  • js
  • type
    string Name of the event

    Example

  • js
  • //DoubleClick event for sparkline
    
     $("#container").ejSparkline({
    
    
        doubleClick: function (args) {
                  //Do something
        }
       
    });

    rightClick

    Fires, on right clicking the sparkline.

    Name Type Description
  • js
  • cancel
    boolean Set this option to true to cancel the event
  • js
  • model
    object Instance of the sparkline model object
  • js
  • type
    string Name of the event

    Example

  • js
  • //RightClick event for sparkline
    
     $("#container").ejSparkline({
    
        rightClick: function (args) {
                  //Do something
        }
       
    });