Sparkline
The Sparkline is a compact and simple data visualization that displays a trend
or pattern of data in a small, condensed format. It typically consists of a
single line or area graph, without axes or labels, that represents the variation
of data points over time.
SparklineProps
, , , | Name | Type | Default | Description |
|---|---|---|---|
data | | [] | | Data to show |
color? | | Sparkline color | |
variant? | | Sparkline variant (line, area) | |
showTicks? | | Whether Sparkline shows X Axis ticks or not | |
loading? | | When true: Sets an overlay with default loader | |
gapPolicy? | | Gap policy | |
curve? | 'linear' | Curve shape of the series | |
showContextValues? | | Whether Sparkline shows min/max values or not | |
labelsAlignment? | | Whether Sparkline aligns labels to left or right Curve shape of the series | |
labelsFixedWidth? | | When Sparkline labels have a fixed width | |
width? | | | | Width of the sparkline component Accepts string values (e.g., '100%', '200px') or numeric values (rendered as pixels) |
height? | | | | Height of the sparkline component Accepts string values (e.g., '50px', '100%') or numeric values (rendered as pixels) |
SparklineYAxisProps
| Name | Type | Default | Description |
|---|---|---|---|
max? | | | 'data-max' | Maximal value on the y-axis. |
min? | | | 'data-min' | Minimal value on the y-axis. |
scale? | 'linear' | The scale of the Y axis values. Is only applied to the bar variant. | |
formatter? | | <, > | | Sparkline Y tick formatter |
SparklineThresholdProps
Use Sparkline.ThresholdIndicatorProps instead.
| Name | Type | Default | Description |
|---|---|---|---|
data | | The threshold data to be graphed by the component | |
color | | The unique color picked for this timeseries representation in HEX, RGB, Color Token or HSL. | |
strokeOnly? | | Whereas to show the threshold ranges filled or only the strokes |
Sparkline.ThresholdIndicator
Sparkline.ThresholdIndicator provides a slot for defining thresholds in the
chart.
SparklineThresholdIndicatorProps
| Name | Type | Default | Description |
|---|---|---|---|
data | | The threshold data to be graphed by the component | |
color | | The unique color picked for this timeseries representation in HEX, RGB, Color Token or HSL. | |
strokeOnly? | | Whereas to show the threshold ranges filled or only the strokes |