ejSparkline
11 Jul 201824 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.
Syntax
$(element).ejSparkline();
Example
<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
$("#container").ejSparkline({
background : "gray"
});
Try it: JS Playground Sample
fill string
Fill color for the sparkline series.
Default Value
- “#33ccff”
Example
$("#container").ejSparkline({
fill : "green"
});
Try it: JS Playground
stroke string
Border color of the series.
Default Value
- null
Example
$("#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
$("#container").ejSparkline({
border: { color: "green" }
});
border.width number
Width of the Sparkline border.
Default Value
- 1
Example
$("#container").ejSparkline({
border: { width: 2 }
});
width number
Border width of the series.
Default Value
- 1
Example
$("#container").ejSparkline({
width : 2
});
opacity number
Opacity of the series.
Default Value
- 1
Example
$("#container").ejSparkline({
opacity : 2
});
highPointColor string
Color for series high point.
Default Value
- null
Example
$("#container").ejSparkline({
highPointColor : "green"
});
Try it: JS Playground
lowPointColor string
Color for series low point.
Default Value
- null
Example
$("#container").ejSparkline({
lowPointColor : "green"
});
Try it: JS Playground
startPointColor string
Color for series start point.
Default Value
- null
Example
$("#container").ejSparkline({
startPointColor : "green"
});
Try it: JS Playground
endPointColor string
Color for series end point.
Default Value
- null
Example
$("#container").ejSparkline({
endPointColor : "green"
});
Try it: JS Playground
negativePointColor string
Color for series negative point.
Default Value
- null
Example
$("#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
$("#container").ejSparkline({
rangeBandSettings:{
startRange : 2
}
});
rangeBandSettings.endRange number
End value of the range band.
Default Value
- null
Example
$("#container").ejSparkline({
rangeBandSettings:{
endRange : 2
}
});
rangeBandSettings.opacity number
Range band opacity of the series.
Default Value
- 1
Example
$("#container").ejSparkline({
rangeBandSettings:{
opacity : 2
}
});
rangeBandSettings.color string
Range band color of the series.
Default Value
- transparent
Example
$("#container").ejSparkline({
rangeBandSettings:{
color : 'purple'
}
});
locale string
Name of the culture based on which sparkline should be localized.
Default Value
- “en-US”
Example
$("#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
$("#container").ejSparkline({
palette : "ColorFieldName"
});
isResponsive boolean
Controls whether sparkline has to be responsive or not.
Default Value
- true
Example
$("#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
$("#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
$("#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
$("#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
$("#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
$("#container").ejSparkline({
yName: "YValue"
});
Try it: JS Playground Sample
padding number
Gap or padding for sparkline.
Default Value
- 8
Example
$("#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
$("#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
$("#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
$("#container").ejSparkline({
tooltip :{visible :true}
});
Try it: JS Playground Sample
tooltip.fill string
Fill color for the sparkline tooltip.
Default Value
- “white”
Example
$("#container").ejSparkline({
tooltip:{
fill : "green"
}
});
Try it: JS Playground
tooltip.template string
Custom template to the tooltip.
Default Value
- ””
Example
$("#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
$("#container").ejSparkline({
tooltip:{
border:{color : "green"}
}
});
tooltip.border.width number
Border width of the tooltip.
Default Value
- 1
Example
$("#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
$("#container").ejSparkline({
tooltip :{font :{color : "green"}}
});
tooltip.font.fontFamily string
Font Family for the tooltip.
Default Value
- “Segoe UI”
Example
$("#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
$("#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
$("#container").ejSparkline({
tooltip :{font :{fontWeight : "lighter"}}
});
tooltip.font.opacity number
Opacity for text in the tooltip.
Default Value
- 1
Example
$("#container").ejSparkline({
tooltip :{font :{opacity : 0.5}}
});
tooltip.font.size string
Font size for text in the tooltip.
Default Value
- “8px”
Example
$("#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
$("#container").ejSparkline({
markerSettings:{
opacity : 2
}
});
markerSettings.visible boolean
Controls the visibility of the marker shape.
Default Value
- false
Example
$("#container").ejSparkline({
markerSettings :{ visible : true}
});
markerSettings.width number
width of the marker shape.
Default Value
- 2
Example
$("#container").ejSparkline({
markerSettings :{width : 2}
});
markerSettings.fill string
Color of the marker shape.
Default Value
- “white”
Example
$("#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
$("#container").ejSparkline({
markerSettings:{
border:{color : "green"}
}
});
markerSettings.border.opacity number
Controls the opacity of the marker border.
Default Value
- 1
Example
$("#container").ejSparkline({
markerSettings:{
border:{opacity : 2}
}
});
markerSettings.border.width number
Border width of the marker shape.
Default Value
- null
Example
$("#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
$("#container").ejSparkline({
size :{height : '80%'}
});
size.width string
Width of the Sparkline. Width can be specified in either pixel or percentage.
Default Value
- ’’
Example
$("#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
$("#container").ejSparkline({
axisLineSettings : {visible:true}
});
axisLineSettings.color string
Color of the axis line.
Default Value
- ‘#111111’
Example
$("#container").ejSparkline({
axisLineSettings: { color: "green" }
});
axisLineSettings.width number
Width of the axis line.
Default Value
- 1
Example
$("#container").ejSparkline({
axisLineSettings: { width: 2 }
});
axisLineSettings.dashArray number
Dash array of the axis line.
Default Value
- 1
Example
$("#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
// Redraw Sparkline
var sparklineObj = $("#container").data("ejSparkline");
sparklineObj.redraw();
$("#container").ejSparkline("redraw");
Events
load
Fires before loading the sparkline.
Example
//load event for sparkline
$("#container").ejSparkline({
load: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the sparkline model object |
|
string | Name of the event |
loaded
Fires after loaded the sparkline.
Example
//loaded event for sparkline
$("#container").ejSparkline({
loaded: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the sparkline model object |
|
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
//ToolTip event for sparkline
$("#container").ejSparkline({
tooltipInitialize: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the sparkline model object |
|
string | Name of the event |
|
Object | X Location of the trackball tooltip in pixels |
|
Object | Y Location of the trackball tooltip in pixels |
|
number | Index of the point for which trackball tooltip is displayed |
|
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
//seriesRendering event for sparkline
$("#container").ejSparkline({
seriesRendering: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the sparkline model object |
|
string | Name of the event |
|
Object | Minimum x value of the data point |
|
Object | Minimum y value of the data point |
|
Object | Maximum x value of the data point |
|
Object | Maximum y value of the data point |
pointRegionMouseMove
Fires when mouse is moved over a point.
Example
//pointRegionMouseMove event for sparkline
$("#container").ejSparkline({
pointRegionMouseMove: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the sparkline model object |
|
string | Name of the event |
|
number | X-coordinate of point in pixel |
|
number | Y-coordinate of point in pixel |
|
number | Index of the point in series |
|
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
//pointRegionClick event for sparkline
$("#container").ejSparkline({
pointRegionMouseClick: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the sparkline model object |
|
string | Name of the event |
|
number | X-coordinate of point in pixel |
|
number | Y-coordinate of point in pixel |
|
number | Index of the point in series |
|
string | Type of the series |
sparklineMouseMove
Fires on moving mouse over the sparkline.
Example
//sparklineMouseMove event for sparkline
$("#container").ejSparkline({
sparklineMouseMove: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the sparkline model object |
|
string | Name of the event |
sparklineMouseLeave
Fires on moving mouse outside the sparkline.
Example
//sparklineMouseLeave event for sparkline
$("#container").ejSparkline({
sparklineMouseLeave: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the sparkline model object |
|
string | Name of the event |
Click
Fires, on clicking the sparkline.
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the sparkline model object |
|
string | Name of the event |
Example
//Click event for sparkline
$("#container").ejSparkline({
click: function (args) {
//Do something
}
});
doubleClick
Fires, on double clicking the sparkline.
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the sparkline model object |
|
string | Name of the event |
Example
//DoubleClick event for sparkline
$("#container").ejSparkline({
doubleClick: function (args) {
//Do something
}
});
rightClick
Fires, on right clicking the sparkline.
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the sparkline model object |
|
string | Name of the event |
Example
//RightClick event for sparkline
$("#container").ejSparkline({
rightClick: function (args) {
//Do something
}
});