Sparkline (Angular)
This guide demonstrates how to use the Sparkline component.
Sparkline
| Name | Type | Default | Description |
|---|---|---|---|
| Name | string | ‘sparkline’ + index suffix | Unique name of the Sparkline. |
| Data | array | null | Sparkline data. |
| Color | string | null | Sparkline color. |
| ValueProperty | string | null | Sparkline data value property. |
Configuration
Simple configuration
The only required property of the Sparkline component is Data. It specifies the values that the Sparkline displays.
In the simplest configuration the Data is an array of numbers. Here is a quick example:
- Create a property and set its value. Use an array of some numbers:
[1,5,3,5,3,2].
- Drag and drop a Sparkline component.
- Set its Data to the newly created property.
That’s it! The Sparkline will look like this.
Data-binding the Sparkline
Often you would need to data-bind the Sparkline to data coming from a Radzen data-source (database or REST API).
- Invoke the data-source method and set a property with the result.
- Set the
Dataproperty of the Sparkline to the result. - Set
ValuePropertyto the name of the property which represents the Sparkline data.