Select theme:

Material 3
warning

You are viewing the legacy Radzen documentation.

Radzen Blazor Studio has replaced Radzen as the primary RAD tool for Blazor applications.

Radzen Blazor Studio offers a modern UI, enhanced features, and improved performance to streamline your development process.

The latest documentation for Radzen Blazor Studio is available here: https://www.radzen.com/blazor-studio/documentation/

Open Radzen Blazor Studio docs

Sparkline (Angular)link

This guide demonstrates how to use the Sparkline component.

Sparklinelink

NameTypeDefaultDescription
Namestring'sparkline' + index suffixUnique name of the Sparkline.
DataarraynullSparkline data.
ColorstringnullSparkline color.
ValuePropertystringnullSparkline data value property.

Configurationlink

Simple configurationlink

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:

  1. Create a property and set its value. Use an array of some numbers: [1,5,3,5,3,2]. image
  2. Drag and drop a Sparkline component.
  3. Set its Data to the newly created property. image

That's it! The Sparkline will look like this.

image

Data-binding the Sparklinelink

Often you would need to data-bind the Sparkline to data coming from a Radzen data-source (database or REST API).

  1. Invoke the data-source method and set a property with the result. image
  2. Set the Data property of the Sparkline to the result.
  3. Set ValueProperty to the name of the property which represents the Sparkline data. image

Get started today

Radzen is free to use. You can also test the premium features for 15 days.

Start Free
© 2016-2025 Radzen Ltd. All Rights Reserved.
Designed and developed with ❤️ in Radzen Blazor Studio.

Select theme:

Material 3