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
Name |
Default value |
Derived value |
Computed value |
Comment |
|---|---|---|---|---|
| $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. |