XRSparkline Class

A control that displays a compact chart for report data.

Namespace: DevExpress.XtraReports.UI

Assembly: DevExpress.XtraReports.v22.1.dll

NuGet Package: DevExpress.Reporting.Core

Declaration

C#
VB.NET

public class XRSparkline :
    XRControl,
    ISparklineSettings,
    ISparklineData,
    IDataContainer,
    IDataSourceAssignable,
    IDataContainerBase,
    IEffectiveDataContainer,
    IXtraSupportCreateContentPropertyValue

Public Class XRSparkline
    Inherits XRControl
    Implements ISparklineSettings,
               ISparklineData,
               IDataContainer,
               IDataSourceAssignable,
               IDataContainerBase,
               IEffectiveDataContainer,
               IXtraSupportCreateContentPropertyValue

Remarks

Watch Video: Sparklines in a Report to Visually Show a Trend and Better Understand Data

To add a sparkline to a report, drag the XRSparkline item from the DX:22.1: Report Controls Toolbox tab and drop the item onto the report.

report-control-sparkline-0

Customize Appearance

Use the sparkline’s View property to specify a chart’s view. Click the sparkline’s smart tag, expand the View drop-down list, and select a view.

report-control-sparkline-1

View	Example	View Options
Line		LineSparklineView
Area		AreaSparklineView
Bar		BarSparklineView
WinLoss		WinLossSparklineView

Use the view’s properties to customize the sparkline’s appearance. Each of the sparkline’s view has properties that define the visibility of extreme values:

HighlightStartPoint and HighlightEndPoint;
HighlightMinPoint and HighlightMaxPoint.

The following image illustrates a table report that contains sparklines with maximum and minimum value indicators for each data range:

sparkline-report

Bind to Data

To connect a sparkline to a data source, click the sparklines’s smart tag, expand the DataSource drop-down list, and select a data source.

report-control-sparkline-2

Then, specify the DataMember property and set the ValueMember property to a data field that supplies point values.

Note

If you do not specify the DataSource property, a sparkline uses the report’s data source.

Create a Sparkline in Code

The following example shows how to create a sparkline, customize it, and bind to data in code.

C#
VB.NET

using DevExpress.DataAccess.Json;
using DevExpress.XtraReports.UI;
using DevExpress.Sparkline;
//...

string temperatures = "[{\"t\": 17}, {\"t\": 20}, {\"t\": 19}, {\"t\": 14}]";

// Create a sparkline and customize it.
var sparkline = new XRSparkline() {
    View = new LineSparklineView() {
        HighlightStartPoint = true,
        HighlightEndPoint = true,
        StartPointColor = System.Drawing.Color.Blue,
        EndPointColor = System.Drawing.Color.Blue
    }
};

// Bind the sparkline to a data source.
sparkline.DataSource = new JsonDataSource() {
    JsonSource = new CustomJsonSource(temperatures)
};
sparkline.ValueMember = "t";

Imports DevExpress.DataAccess.Json
Imports DevExpress.XtraReports.UI
Imports DevExpress.Sparkline
'...

Private temperatures As String = "[{""t"": 17}, {""t"": 20}, {""t"": 19}, {""t"": 14}]"

' Create a sparkline and customize it.
Private sparkline = New XRSparkline() With {
    .View = New LineSparklineView() With {
        .HighlightStartPoint = True,
        .HighlightEndPoint = True,
        .StartPointColor = System.Drawing.Color.Blue,
        .EndPointColor = System.Drawing.Color.Blue
    }
}

' Bind the sparkline to a data source.
sparkline.DataSource = New JsonDataSource() With {.JsonSource = New CustomJsonSource(temperatures)}
sparkline.ValueMember = "t"