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

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<dx:BootstrapSparkline runat="server"  ArgumentField="date" ValueField="sales" DataSourceUrl="~/jsondata/simple.json"
    LineColor="Orange">
</dx:BootstrapSparkline>

Point Color

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<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.

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<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

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<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.

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<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.

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<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.

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<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