Sparkline Types
25 May 2017 / 3 minutes to read
Line Type
To render a Line type Sparkline, set the type
as line. To change the color and width of the line, you can use the fill
and width
property.
"use strict";
var 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 }];
ReactDOM.render(
<EJ.Sparkline id="sparkline1" dataSource = {sparklinedata} type = 'line' fill = "#33ccff"
xName = "employeeId" yName = "sales" ></EJ.Sparkline>,
document.getElementById('sparkline')
);
Column Type
To render a Column Sparkline, set the type as column To change the color of the column, you can use the fill
property.
"use strict";
ReactDOM.render(
<EJ.Sparkline id="sparkline1" dataSource = {sparklinedata} type = 'column' fill = "#33ccff"
xName = "employeeId" yName = "sales" ></EJ.Sparkline>,
document.getElementById('sparkline')
);
Area Type
To render an Area Sparkline, you can specify the type as area. To change the Area color, you can use the fill
property
"use strict";
ReactDOM.render(
<EJ.Sparkline id="sparkline1" dataSource = {sparklinedata} type = 'area'
fill = "#33ccff" xName = "employeeId" yName = "sales" ></EJ.Sparkline>,
document.getElementById('sparkline')
);
WinLoss Type
WinLoss Sparkline render as a column segment and it show the positive, negative and neutral values. You can customize the positive and negative color of the win-loss type.
"use strict";
ReactDOM.render(
<EJ.Sparkline id="sparkline1" dataSource = {sparklinedata} type = 'winloss'
fill = "#33ccff" xName = "employeeId" yName = "sales" ></EJ.Sparkline>,
document.getElementById('sparkline')
);
Pie Type
You can create a pie type sparkline by setting the type as pie. Colors for the pie can be customize using palette
property.
"use strict";
ReactDOM.render(
<EJ.Sparkline id="sparkline1" dataSource = {sparklinedata} type = 'pie' fill = "#33ccff"
xName = "employeeId" yName = "sales" ></EJ.Sparkline>,
document.getElementById('sparkline')
);
Was this page helpful?
Yes
No
Thank you for your feedback!
Thank you for your feedback and comments. We will rectify this as soon as possible!
An unknown error has occurred. Please try again.
Help us improve this page