This demo section provides information on the Sparkline control's customization capabilities.
You can customize colors of various sparkline elements using the following properties:
- LineColor - Sets a color for a line on a sparkline.
- PointColor - Sets a color for points on a sparkline.
- WinColor - Sets a color for the bars indicating the values that are greater than the win-loss threshold.
- LossColor - Sets a color for the bars indicating the values that are less than the win-loss threshold.
- BarNegativeColor - Sets a color for the bars indicating negative values.
- BarPositiveColor - Sets a color for the bars indicating positive values.
- LineColor - Sets a color for a line on a sparkline.
- MinColor - Sets a color for the boundary of the minimum point on a sparkline.
- MaxColor - Sets a color for the boundary of the maximum point on a sparkline.
- ShowMinMax - Specifies whether or not to indicate both the minimum and maximum values on a sparkline.
To customize the Sparkline control's tooltip, assign a callback function implementing the customization logic to the client SettingsTooltip.OnClientCustomizeTooltip property.
The PointSize and PointSymbol properties allow you to customize the size and shape of sparkline point markers.
Line Color
<dx:BootstrapSparkline runat="server" ArgumentField="date" ValueField="sales" DataSourceUrl="~/jsondata/simple.json"
LineColor="Orange">
</dx:BootstrapSparkline>
Point Color
<dx:BootstrapSparkline runat="server" PointSize="10" ArgumentField="date" ValueField="sales" DataSourceUrl="~/jsondata/simple.json"
PointColor="YellowGreen"
MinColor="Blue"
MaxColor="Red"
ShowMinMax="true">
</dx:BootstrapSparkline>
Win and Loss Color
In WinLoss mode, you can use different colors to display bars whose values are bigger or smaller than the value specified by the WinLossThreshold property.
<dx:BootstrapSparkline runat="server" Type="WinLoss" ArgumentField="date" ValueField="profit" DataSourceUrl="~/jsondata/sales.json"
LossColor="Red"
WinColor="Green"
WinLossThreshold="5" >
</dx:BootstrapSparkline>
Point Size And Symbol
<dx:BootstrapSparkline runat="server" PointSize="10" ShowMinMax="true" ArgumentField="date" ValueField="sales" DataSourceUrl="~/jsondata/simple.json"
PointSymbol="Circle" >
</dx:BootstrapSparkline>
<dx:BootstrapSparkline runat="server" PointSize="10" ShowMinMax="true" ArgumentField="date" ValueField="sales" DataSourceUrl="~/jsondata/simple.json"
PointSymbol="Cross">
</dx:BootstrapSparkline>
<dx:BootstrapSparkline runat="server" PointSize="10" ShowMinMax="true" ArgumentField="date" ValueField="sales" DataSourceUrl="~/jsondata/simple.json"
PointSymbol="Polygon" >
</dx:BootstrapSparkline>
<dx:BootstrapSparkline runat="server" PointSize="10" ShowMinMax="true" ArgumentField="date" ValueField="sales" DataSourceUrl="~/jsondata/simple.json"
PointSymbol="Square">
</dx:BootstrapSparkline>
<dx:BootstrapSparkline ID="Triangle" runat="server" PointSize="10" ShowMinMax="true" ArgumentField="date" ValueField="sales" DataSourceUrl="~/jsondata/simple.json"
PointSymbol="Triangle">
</dx:BootstrapSparkline>
Bar Color
The Sparkline control allows you to assign different colors to bars with negative and positive values using the BarNegativeColor and BarPositiveColor properties.
<dx:BootstrapSparkline runat="server" Type="Bar" BarNegativeColor="LightBlue" BarPositiveColor="OrangeRed" ArgumentField="date" ValueField="profit" DataSourceUrl="~/jsondata/profit.json">
</dx:BootstrapSparkline>
You can customize tooltip font settings using the SettingsToolTip.Font property. Hover the Sparkline to see a customized tooltip.
<dx:BootstrapSparkline runat="server" ArgumentField="date" ValueField="sales" DataSourceUrl="~/jsondata/simple.json">
<SettingsToolTip>
<Font Color="GrayText" Opacity="0.8" Size="12" Weight="500"></Font>
</SettingsToolTip>
</dx:BootstrapSparkline>
To customize the appearance of the Sparkline control's tooltips, use the OnClientCustomizeTooltip property. This property should be assigned a function returning an object containing customized settings, plain text, or fully custom HTML content. Hover the Sparkline to see a customized tooltip.
<dx:BootstrapSparkline runat="server" ArgumentField="date" ValueField="sales" DataSourceUrl="~/jsondata/simple.json">
<SettingsToolTip OnClientCustomizeTooltip="customizeTooltip"></SettingsToolTip>
</dx:BootstrapSparkline>
function customizeTooltip(args) {
return {
html: "<b>This is a custom tooltip content</b></br>"
+ "<i>Start value: </i>" + args.firstValue + "</br>"
+ "<i>End value: </i>" + args.lastValue + "</br>"
+ "<i style='color:green'>Max value: " + args.maxValue + "</i></br>"
+ "<i style='color:red'>Min value: " + args.minValue + "</i></br>"
};
}