Skip to main content
All docs
V24.1

DxSparkline Class

A component that visualizes value trends as an inline graph.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxSparkline :
    ClientComponentJSInterop,
    IModelProvider<MarginSettingsModel>,
    IModelProvider<TooltipSettingsModel>

Remarks

DevExpress Sparkline for Blazor (<DxSparkline>) can display value trends in a compact manner. You can use DxSparkline as a standalone component or embed it into other UI controls. The component supports multiple series types and allows you to configure all sparkline settings at the root component level.

Sparklines in DxGrid

Run Demo: Sparklines

Add a Sparkline to a Project

Follow the steps below to add a Sparkline component to an application:

  1. Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If you use a Microsoft project template or already have a Blazor project, configure your project to incorporate DevExpress Blazor components.
  2. Add the following markup to a .razor file: <DxSparkline></DxSparkline>.
  3. Bind the component to data.
  4. Specify the sparkline series type and configure other options (see sections below).

Bind to Data

Use the Data property to bind the Sparkline component to an IEnumerable<T> data source. Specify ArgumentFieldName and ValueFieldName properties to obtain arguments and values for series points from data source fields.

<DxSparkline Data="@DataSource"
             Type="SparklineType.Bar"
             ArgumentFieldName="Month"
             ValueFieldName="VisitorCount"
             Height="50px"
             Width="200px" />

@code {
    IEnumerable<SparklineDataPoint> DataSource = Enumerable.Empty<SparklineDataPoint>();
    protected override void OnInitialized() {
        DataSource = GenerateData();
    }
}

To track the moment when the sparkline rendering is finished and the component is completely loaded, handle the Rendered event.

Scale Range

The minimum and maximum values from the data source define the sparkline scale range. You can specify MinValue and MaxValue properties in any combination to adjust the visible scale range.

The following code snippet explicitly sets the range of visible values and renders a line series based on the range:

Sparkline - Min and Max Values

<DxSparkline Data="@DataSource"
             ArgumentFieldName="Month"
             ValueFieldName="VisitorCount"
             MinValue="2000"
             MaxValue="2150"
             Height="50px"
             Width="200px" />

@code {
    IEnumerable<SparklineDataPoint> DataSource = Enumerable.Empty<SparklineDataPoint>();
    protected override void OnInitialized() {
        DataSource = GenerateData();
    }
}

Series

DxSparkline supports multiple series types. The default type is Line. To define the sparkline series type, specify the component’s Type property. The table below lists available types:

Type

Description

Image

Line

A line series.

Sparkline - Line Series

Spline

A spline series.

Sparkline - Spline Series

StepLine

A step line series.

Sparkline - Step Line Series

Area

An area series.

Sparkline - Area Series

SplineArea

A spline area series.

Sparkline - Spline Area Series

StepArea

A step area series.

Sparkline - Step Area Series

Bar

A bar series.

Sparkline - Bar Series

WinLoss

A win-loss series.

Sparkline - WinLoss Series

The following code snippet renders a bar series:

<DxSparkline Data="@DataSource"
             Type="SparklineType.Bar"
             ArgumentFieldName="Month"
             ValueFieldName="VisitorCount"
             Height="50px"
             Width="200px" />

@code {
    IEnumerable<SparklineDataPoint> DataSource = Enumerable.Empty<SparklineDataPoint>();
    protected override void OnInitialized() {
        DataSource = GenerateData();
    }
}

Series Settings

DxSparkline allows you to configure series-specific settings at the root component level. The table below lists available options:

Series Types

Properties

Description

Line
Spline
StepLine
Area
SplineArea
StepArea

LineColor
LineWidth

Specify series color and line width.

Bar

BarPositiveColor
BarNegativeColor

Specify colors of positive and negative values.

WinLoss

WinLossThreshold

Specifies the threshold value.

WinColor
LossColor

Specify colors of bars that indicate values above and below the WinLossThreshold property value.

The following code snippet sets the threshold value for a win-loss series and customizes bars that indicate high and low values:

win-loss-customization

<DxSparkline Data="@DataSource"
             Type="SparklineType.WinLoss"
             ArgumentFieldName="Month"
             ValueFieldName="VisitorCount"
             WinLossThreshold="2000"
             WinColor="purple"
             LossColor="orange"
             Height="50px"
             Width="200px" />

@code {
    IEnumerable<SparklineDataPoint> DataSource = Enumerable.Empty<SparklineDataPoint>();
    protected override void OnInitialized() {
        DataSource = GenerateData();
    }
}

Series Points

The DxSparkline component allows you to customize series points at the root component level. You can configure common and series-specific settings.

Common Point Settings

DxSparkline allows you to highlight series points or bars that indicate extreme values:

  • The ShowFirstLast property specifies whether the component highlights first and last series points. To customize the color of such points, use the FirstLastColor property.

  • The enabled ShowMinMax property highlights series points that indicate minimum and maximum values. MaxColor and MinColor properties specify colors of such points.

Note

For Bar and WinLoss series types, FirstLastColor, MaxColor, and MinColor properties apply to entire points (bars). For other series types, these properties apply to point borders only. To specify the inner color of such points, use the PointColor property.

The following code snippet highlights and customizes bars with maximum and minimum values and sets the color for the first and last points in a bar series:

Sparkline - Highlight Series Points

<DxSparkline Data="@DataSource"
             Type="SparklineType.Bar"
             ArgumentFieldName="Month"
             ValueFieldName="VisitorCount"
             FirstLastColor="orange"
             ShowMinMax="true"
             MinColor="#c7fc92"
             MaxColor="#fc032c"
             Height="50px"
             Width="200px" />

@code {
    IEnumerable<SparklineDataPoint> DataSource = Enumerable.Empty<SparklineDataPoint>();
    protected override void OnInitialized() {
        DataSource = GenerateData();
    }
}

Series-Specific Point Settings

DxSparkline allows you to configure additional point settings for line and area series:

PointColor
Customizes a point’s inner color.
PointSize
Sets the point size.
PointSymbol
Specifies the shape of point markers.

Note

The properties above do not apply to Bar and WinLoss series types.

The following code snippet customizes points in an area series:

Sparkline - Point Settings

<DxSparkline Data="@DataSource"
             Type="SparklineType.Area"
             ArgumentFieldName="Month"
             ValueFieldName="VisitorCount"
             PointColor="Violet"
             PointSize="10"
             PointSymbol="ChartPointSymbol.Polygon"
             Height="10%"
             Width="200px" />

@code {
    IEnumerable<SparklineDataPoint> DataSource = Enumerable.Empty<SparklineDataPoint>();
    protected override void OnInitialized() {
        DataSource = GenerateData();
    }
}

Component Customization

This section describes settings that allow you to customize the appearance of the component’s container.

Size

Use Height and Width properties to specify the size of the component container. You can also use a DxMarginSettings object to add margins between the widget and container borders.

The following code snippet sets the component size and configures margin settings:

Sparkline - Size and Margins

<DxSparkline Data="@DataSource"
             CssClass="myCssClass"
             Type="SparklineType.Bar"
             ArgumentFieldName="Month"
             ValueFieldName="VisitorCount"
             Height="50px"
             Width="200px">
    <DxMarginSettings Top="10" Right="20" Bottom="10" Left="20"/>
</DxSparkline>

@code {
    IEnumerable<SparklineDataPoint> DataSource = Enumerable.Empty<SparklineDataPoint>();
    protected override void OnInitialized() {
        DataSource = GenerateData();
    }
}

CSS Customization

Use the CssClass property to customize the appearance of the component’s container. The following code snippet adds borders to the sparkline container and sets its background color:

Sparkline - CSS Class

<DxSparkline Data="@DataSource"
             CssClass="myCssClass"
             Type="SparklineType.Bar"
             ArgumentFieldName="Month"
             ValueFieldName="VisitorCount"
             Height="50px"
             Width="200px" />

@code {
    IEnumerable<SparklineDataPoint> DataSource = Enumerable.Empty<SparklineDataPoint>();
    protected override void OnInitialized() {
        DataSource = GenerateData();
    }
}

Refer to the following topic for more information: CSS Classes.

Tooltips

The DxSparkline component displays a tooltip when a user hovers a mouse pointer over a sparkline. To create a tooltip, follow the steps below:

  1. Add a DxTooltipSettings object to sparkline markup.
  2. Set the DxTooltipSettings.Enabled property to true.
  3. Optional. Configure tooltip settings. You can specify root-level properties (for example, Color or CornerRadius ) or add and configure the following objects:

The following code snippet changes tooltip visibility and customizes tooltip settings:

Sparkline - Tooltip

<DxSparkline Data="@DataSource"
             Type="SparklineType.Bar"
             ArgumentFieldName="Month"
             ValueFieldName="VisitorCount"
             FirstLastColor="orange"
             ShowMinMax="true"
             MinColor="#c7fc92"
             MaxColor="#fc032c"
             Height="50px"
             Width="200px">
    <DxTooltipSettings Enabled="true" CornerRadius="5" >
        <DxTextFormatSettings LdmlString=",###" />
        <DxFontSettings Size="16" Weight="600" />
        <DxBorderSettings LineStyle="LineStyle.DashDotDot" />
        <DxShadowSettings Color="Purple" HorizontalOffset="7" />
    </DxTooltipSettings>
</DxSparkline>

@code {
    IEnumerable<SparklineDataPoint> DataSource = Enumerable.Empty<SparklineDataPoint>();
    protected override void OnInitialized() {
        DataSource = GenerateData();
    }
}

Export and Printing

The DxSparkline component allows you to export and print its data. Call the PrintAsync() method to invoke the browser’s Print dialog.

To export sparkline data, call the ExportToAsync(String, DataExportFormat) method. After the file is exported, the component raises the Exported event.

DxSparkline also allows you to get its SVG markup on a GetSvgMarkupAsync() method call.

The following code snippet displays a custom Export to PDF button that exports component data to a PDF file. The Exported event is handled to show information about the exported file:

Sparkline - Export Data

@inject IJSRuntime JSRuntime

<DxSparkline Data="@DataSource"
             @ref=@Sparkline
             ArgumentFieldName="Month"
             ValueFieldName="VisitorCount"
             Exported="OnExported"
             Height="50px"
             Width="200px">
</DxSparkline>


<DxButton Text="Export to PDF" Click="ExportToPdf" />

@code {
    DxSparkline Sparkline;
    string fileName = "Custom PDF";

    async Task ExportToPdf() {
        await Sparkline.ExportToAsync(fileName, DataExportFormat.Pdf);
    }
    async Task OnExported() {
        await JSRuntime.InvokeVoidAsync("alert", $"The Sparkline is exported to the {fileName} file.");
    }

    IEnumerable<SparklineDataPoint> DataSource = Enumerable.Empty<SparklineDataPoint>();
    protected override void OnInitialized() {
        DataSource = GenerateData();
    }
}

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxAsyncDisposableComponent
DevExpress.Blazor.Base.DxDecoratedComponent
DxComponentBase
DevExpress.Blazor.ClientComponents.Internal.ClientComponentBase
DevExpress.Blazor.ClientComponents.Internal.ClientComponentJSInterop
DxSparkline
See Also