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.

Example

  • html
  • <ej-sparkline id="sparklinecontainer">    
    
    </ej-sparkline>

    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

  • html
  • <ej-sparkline id="sparklinecontainer" background="gray">    
    
    </ej-sparkline>

    fill string

    Fill color for the sparkline series.

    Default Value

    • “#33ccff”

    Example

  • html
  • <ej-sparkline id="sparklinecontainer"  fill="green">          
                                   
    </ej-sparkline>

    stroke string

    Border color of the series.

    Default Value

    • null

    Example

  • html
  • <ej-sparkline id="sparklinecontainer" stroke="green">          
                                   
    </ej-sparkline>

    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

  • html
  • <ej-sparkline id="sparklinecontainer" border.color="green">    
    
    </ej-sparkline>

    border.width number

    Width of the Sparkline border.

    Default Value

    • 1

    Example

  • html
  • <ej-sparkline id="sparklinecontainer" border.width="2">    
    
    </ej-sparkline>

    width number

    Border width of the series.

    Default Value

    • 1

    Example

  • html
  • <ej-sparkline id="sparklinecontainer" width="140px">          
                                   
    </ej-sparkline>

    opacity number

    Opacity of the series.

    Default Value

    • 1

    Example

  • html
  • <ej-sparkline id="sparklinecontainer" [opacity]=0.5 >          
                                   
    </ej-sparkline>

    highPointColor string

    Color for series high point.

    Default Value

    • null

    Example

  • html
  • <ej-sparkline id="sparklinecontainer"  highPointColor="green">          
                                   
    </ej-sparkline>

    lowPointColor string

    Color for series low point.

    Default Value

    • null

    Example

  • html
  • <ej-sparkline id="sparklinecontainer" lowPointColor="green">          
                                   
    </ej-sparkline>

    startPointColor string

    Color for series start point.

    Default Value

    • null

    Example

  • html
  • <ej-sparkline id="sparklinecontainer" startPointColor="green">          
                                   
    </ej-sparkline>

    endPointColor string

    Color for series end point.

    Default Value

    • null

    Example

  • html
  • <ej-sparkline id="sparklinecontainer"  endPointColor="green">          
                                   
    </ej-sparkline>

    negativePointColor string

    Color for series negative point.

    Default Value

    • null

    Example

  • html
  • <ej-sparkline id="sparklinecontainer" negativePointColor="green" >          
                                   
    </ej-sparkline>

    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

  • ts
  • this.rangeBandSettings = {
        startRange: 4,
    };
  • html
  • <ej-sparkline id="sparklinecontainer" [rangeBandSettings]="rangeBandSettings">          
                                   
    </ej-sparkline>

    rangeBandSettings.endRange number

    End value of the range band.

    Default Value

    • null

    Example

  • ts
  • this.rangeBandSettings = {    
        endRange: 30,        
    };
  • html
  • <ej-sparkline id="sparklinecontainer" [rangeBandSettings]="rangeBandSettings">          
                                   
    </ej-sparkline>

    rangeBandSettings.opacity number

    Range band opacity of the series.

    Default Value

    • 1

    Example

  • ts
  • this.rangeBandSettings = {    
        opacity: 0.4
    };
  • html
  • <ej-sparkline id="sparklinecontainer" [rangeBandSettings]="rangeBandSettings">          
                                   
    </ej-sparkline>

    rangeBandSettings.color string

    Range band color of the series.

    Default Value

    • transparent

    Example

  • ts
  • this.rangeBandSettings = {    
        color: "#ff14ae",    
    };
  • html
  • <ej-sparkline id="sparklinecontainer" [rangeBandSettings]="rangeBandSettings">          
                                   
    </ej-sparkline>

    palette string

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

    Default Value

    • ””

    Example

  • html
  • <ej-sparkline id="sparklinecontainer" palette="colorFieldName" >          
                                   
    </ej-sparkline>

    isResponsive boolean

    Controls whether sparkline has to be responsive or not.

    Default Value

    • true

    Example

  • html
  • <ej-sparkline id="sparklinecontainer"  [isResponsive]="true">          
                                   
    </ej-sparkline>

    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

  • html
  • <ej-sparkline id="sparklinecontainer"  [enableCanvasRendering]="true">          
                                   
    </ej-sparkline>

    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

  • ts
  • this.sparklinedata = [
    { employeeId: 1, sales: 25 },
    { employeeId: 2, sales: 28 },
    { employeeId: 3, sales: 34 },
    { employeeId: 4, sales: 32 },
    { employeeId: 5, sales: 40 },
    { employeeId: 6, sales: 32 },
    { employeeId: 7, sales: 35 },
    { employeeId: 8, sales: 55 },
    { employeeId: 9, sales: 38 },
    { employeeId: 10, sales: 30 }];
  • html
  • <ej-sparkline id="sparklinecontainer"  [dataSource]="sparklinedata">          
                                   
    </ej-sparkline>

    xName string

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

    Default Value

    • null

    Example

  • ts
  • this.sparklinedata = [
    { employeeId: 1, sales: 25 },
    { employeeId: 2, sales: 28 },
    { employeeId: 3, sales: 34 },
    { employeeId: 4, sales: 32 },
    { employeeId: 5, sales: 40 },
    { employeeId: 6, sales: 32 },
    { employeeId: 7, sales: 35 },
    { employeeId: 8, sales: 55 },
    { employeeId: 9, sales: 38 },
    { employeeId: 10, sales: 30 }];
  • html
  • <ej-sparkline id="sparklinecontainer"  [dataSource]="sparklinedata" xName="employeeId" >          
                                   
    </ej-sparkline>

    yName string

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

    Default Value

    • null

    Example

  • ts
  • this.sparklinedata = [
    { employeeId: 1, sales: 25 },
    { employeeId: 2, sales: 28 },
    { employeeId: 3, sales: 34 },
    { employeeId: 4, sales: 32 },
    { employeeId: 5, sales: 40 },
    { employeeId: 6, sales: 32 },
    { employeeId: 7, sales: 35 },
    { employeeId: 8, sales: 55 },
    { employeeId: 9, sales: 38 },
    { employeeId: 10, sales: 30 }];
  • html
  • <ej-sparkline id="sparklinecontainer"  [dataSource]="sparklinedata"  yName="sales">          
                                   
    </ej-sparkline>

    padding number

    Gap or padding for sparkline.

    Default Value

    • 8

    Example

  • html
  • <ej-sparkline id="sparklinecontainer" [padding]=5 >          
                                   
    </ej-sparkline>

    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

  • html
  • <ej-sparkline id="sparklinecontainer" type="column">          
                                   
    </ej-sparkline>

    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

  • html
  • <ej-sparkline id="sparklinecontainer" theme="flatdark">          
                                   
    </ej-sparkline>

    tooltip object

    Options to customize the tooltip.

    tooltip.visible boolean

    Show/hides the tooltip visibility.

    Default Value

    • false

    Example

  • html
  • <ej-sparkline id="sparklinecontainer" tooltip.visible="true">          
                                   
    </ej-sparkline>

    tooltip.fill string

    Fill color for the sparkline tooltip.

    Default Value

    • “white”

    Example

  • html
  • <ej-sparkline id="sparklinecontainer" tooltip.fill="red">          
                                   
    </ej-sparkline>

    tooltip.template string

    Custom template to the tooltip.

    Default Value

    • ””

    Example

  • html
  • <div id="item" style="display: none;">
        <div>
            <div>#point.x#</div>
            <div>#point.y#</div>
        </div>
    </div>
    
    <ej-sparkline id="sparklinecontainer" tooltip.template="item">          
                                   
    </ej-sparkline>

    tooltip.border object

    Options for customizing the border of the tooltip.

    tooltip.border.color string

    Border color of the tooltip.

    Default Value

    • “transparent”

    Example

  • html
  • <ej-sparkline id="sparklinecontainer" tooltip.border.color="green">          
                                   
    </ej-sparkline>

    tooltip.border.width number

    Border width of the tooltip.

    Default Value

    • 1

    Example

  • html
  • <ej-sparkline id="sparklinecontainer" tooltip.border.width="2">          
                                   
    </ej-sparkline>

    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

  • html
  • <ej-sparkline id="sparklinecontainer" tooltip.font.color="green">          
                                   
    </ej-sparkline>

    tooltip.font.fontFamily string

    Font Family for the tooltip.

    Default Value

    • “Segoe UI”

    Example

  • html
  • <ej-sparkline id="sparklinecontainer" tooltip.font.fontFamily="Arial">          
                                   
    </ej-sparkline>

    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

  • html
  • <ej-sparkline id="sparklinecontainer" tooltip.font.fontStyle="Bold">          
                                   
    </ej-sparkline>

    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

  • html
  • <ej-sparkline id="sparklinecontainer" tooltip.font.fontWeight="lighter">          
                                   
    </ej-sparkline>

    tooltip.font.opacity number

    Opacity for text in the tooltip.

    Default Value

    • 1

    Example

  • html
  • <ej-sparkline id="sparklinecontainer" tooltip.font.opacity="0.5">          
                                   
    </ej-sparkline>

    tooltip.font.size string

    Font size for text in the tooltip.

    Default Value

    • “8px”

    Example

  • html
  • <ej-sparkline id="sparklinecontainer" tooltip.font.size="12px">          
                                   
    </ej-sparkline>

    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

  • html
  • <ej-sparkline id="sparklinecontainer" [markerSettings.opacity]=0.5 >          
                                   
    </ej-sparkline>

    markerSettings.visible boolean

    Controls the visibility of the marker shape.

    Default Value

    • false

    Example

  • html
  • <ej-sparkline id="sparklinecontainer" [markerSettings.visible]="true">          
                                   
    </ej-sparkline>

    markerSettings.width number

    width of the marker shape.

    Default Value

    • 2

    Example

  • html
  • <ej-sparkline id="sparklinecontainer" [markerSettings.width]=2 >          
                                   
    </ej-sparkline>

    markerSettings.fill string

    Color of the marker shape.

    Default Value

    • “white”

    Example

  • html
  • <ej-sparkline id="sparklinecontainer"  markerSettings.fill="green">          
                                   
    </ej-sparkline>

    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

  • html
  • <ej-sparkline id="sparklinecontainer"  markerSettings.border.color="green">          
                                   
    </ej-sparkline>

    markerSettings.border.opacity number

    Controls the opacity of the marker border.

    Default Value

    • 1

    Example

  • html
  • <ej-sparkline id="sparklinecontainer" [markerSettings.border.opacity]=0.5 >          
                                   
    </ej-sparkline>

    markerSettings.border.width number

    Border width of the marker shape.

    Default Value

    • null

    Example

  • html
  • <ej-sparkline id="sparklinecontainer"  [markerSettings.border.width]=1>          
                                   
    </ej-sparkline>

    size object

    Options to customize the Sparkline size.

    size.height string

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

    Default Value

    • ’’

    Example

  • html
  • <ej-sparkline id="sparklinecontainer" size.height="40px">          
                                   
    </ej-sparkline>

    size.width string

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

    Default Value

    • ’’

    Example

  • html
  • <ej-sparkline id="sparklinecontainer" size.width="170px">          
                                   
    </ej-sparkline>

    axisLineSettings object

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

    axisLineSettings.visible boolean

    Controls the visibility of the axis.

    Default Value

    • false

    Example

  • html
  • <ej-sparkline id="sparklinecontainer" [axisLineSettings.visible]="true">    
    
    </ej-sparkline>

    axisLineSettings.color string

    Color of the axis line.

    Default Value

    • ‘#111111’

    Example

  • html
  • <ej-sparkline id="sparklinecontainer" axisLineSettings.color="#ff14ae">    
    
    </ej-sparkline>

    axisLineSettings.width number

    Width of the axis line.

    Default Value

    • 1

    Example

  • html
  • <ej-sparkline id="sparklinecontainer" [axisLineSettings.width]="2">    
    
    </ej-sparkline>

    axisLineSettings.dashArray number

    Dash array of the axis line.

    Default Value

    • 1

    Example

  • html
  • <ej-sparkline id="sparklinecontainer" [axisLineSettings.dashArray]='2,3'>    
    
    </ej-sparkline>

    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

  • ts
  • export class AppComponent {
    
    destroy(){
              
         this.sparkline.widget.destroy();
    
    }
    
    // Create sparkline instance
    @ViewChild('line') sparkline: EJComponents<any, any>;
    
    }

    Events

    load

    Fires before loading the sparkline.

    Example

  • ts
  • onload(sender){
         
         //Do something
    
    }
  • html
  • <ej-sparkline id="events" (load)="onload($event)">
    </ej-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

    loaded

    Fires after loaded the sparkline.

    Example

  • ts
  • ondrawbarpointers(sender){
         
         //Do something
    
    }
  • html
  • <ej-sparkline id="events" (loaded)="onloaded($event)">
    </ej-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

    tooltipInitialize

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

    Example

  • ts
  • ontooltipinitialize(sender){
         
         //Do something
    
    }
  • html
  • <ej-sparkline id="events" (tooltipInitialize)="ontooltipinitialize($event)">
    </ej-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
  • 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

  • ts
  • onseriesrendering(sender){
         
         //Do something
    
    }
  • html
  • <ej-sparkline id="events" (seriesRendering)="onseriesrendering($event)">
    </ej-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
  • 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

  • ts
  • onpointregionmousemove(sender){
         
         //Do something
    
    }
  • html
  • <ej-sparkline id="events" (pointRegionMouseMove)="onpointregionmousemove($event)">
    </ej-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
  • 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

  • ts
  • onpointregionmouseclick(sender){
         
         //Do something
    
    }
  • html
  • <ej-sparkline id="events" (pointRegionMouseClick)="onpointregionmouseclick($event)">
    </ej-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
  • 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

  • ts
  • onsparklinemousemove(sender){
         
         //Do something
    
    }
  • html
  • <ej-sparkline id="events" (sparklineMouseMove)="onsparklinemousemove($event)">
    </ej-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

    sparklineMouseLeave

    Fires on moving mouse outside the sparkline.

    Example

  • ts
  • onsparklinemouseleave(sender){
         
         //Do something
    
    }
  • html
  • <ej-sparkline id="events" (sparklineMouseLeave)="onsparklinemouseleave($event)">
    </ej-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