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>

Tooltip Font

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>

Tooltip Customization

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>"
    };
}
Screen Size
Color Themes
Demo QR Code