ejSparkline

6 Oct 201724 minutes to read

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