Sparkline Complex component


The sparkline component is a simplified chart component. Use the sparkline component to visualize numeric data on a chart. These charts can later be reused as a list grid column or dashboard panel.

The component is not intended to visualize complex or large-scale charts and has a limited range of settings. The component’s main purpose is to to provide an overview of a small amount of data or to visualize trends.

Supported events:

Show, Hide, Animations, Click, MouseEvents, Touch, Drag&Drop

Style customization


Default value

Derived value

Computed value


$sparkline-tooltip-bg-color rgba($body-color, 0.85) $sparkline-tooltip-bg-color-->rgba($body-color, 0.85)-->rgba($gray-900, 0.85)-->rgba( #212529, 0.85) rgba( #212529, 0.85) Sparkline tooltip background color.
$sparkline-tooltip-color $white $sparkline-tooltip-color-->$white-->#fff #fff Sparkline tooltip font color.
$sparkline-tooltip-padding $spacer * 0.35 0.35rem Sparkline tooltip padding.
$sparkline-tooltip-min-height $font-size-base * 1.8 1.8 Sparkline tooltip minimum height.
$sparkline-tooltip-border-radius $border-radius $sparkline-tooltip-border-radius-->$border-radius-->0.25rem .25rem Sparkline tooltip rounding radius.
$sparkline-border solid 1px $border-color $sparkline-border-->solid 1px $border-color-->solid 1px $gray-200-->solid 1px #e9ecef solid 1px #e9ecef Sparkline frame.

Related pages