Search results

Appearance in Blazor Sparkline component

03 Aug 2021 / 2 minutes to read

The rendering direction, padding, border, and the background appearance of the Sparkline can all be customized.

Right-to-left (RTL)

The Sparkline supports the right-to-left (RTL) rendering that can be enabled by setting the EnableRtl property to true.

Copied to clipboard
@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="new double[]{ 300.00, 600.00, 400.21, 100.20, 300.70, 200.04, 500.00 }" Height="200px" Width="350px" Format="c2" EnableRtl="true">
    <SparklineDataLabelSettings Visible="new List<VisibleType> { VisibleType.All }" EdgeLabelMode="EdgeLabelMode.Shift"></SparklineDataLabelSettings>
    <SparklinePadding Top="25"></SparklinePadding>
</SfSparkline>

Sparkline with RTL

Border

The border can be enabled and customized by specifying the Color and the Width properties of the SparklineContainerAreaBorder.

Copied to clipboard
@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="new int[]{ 3, 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Area" Height="200px" Width="350px" Fill="#b2cfff" LineWidth="1">
    <SparklineContainerArea>
        <SparklineContainerAreaBorder Color="#033e96" Width="1"></SparklineContainerAreaBorder>
    </SparklineContainerArea>
</SfSparkline>

Sparkline with border

Padding

The Sparkline supports padding between the container and the component using the SparklinePadding. The code example in the following shows the Sparkline Chart with overall padding set to 20.

Copied to clipboard
@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="new int[]{ 3, 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Area" Height="200px" Width="350px" Fill="#b2cfff" LineWidth="1">
<SparklineContainerArea>
    <SparklineContainerAreaBorder Color="#033e96" Width="2"></SparklineContainerAreaBorder>
</SparklineContainerArea>
<SparklineBorder Color="#033e96" Width="1"></SparklineBorder>
<SparklinePadding Left="20" Right="20" Bottom="20" Top="20"></SparklinePadding>
</SfSparkline>

Sparkline with padding

Background

The background color of the Sparkline area can be changed using the Background property of the SparklineContainerArea. By default, the Sparkline background color is Transparent.

Copied to clipboard
@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="new int[]{ 3, 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Area" Height="200px" Width="350px" Fill="#b2cfff" LineWidth="1">
<SparklineContainerArea Background="#eff1f4">
    <SparklineContainerAreaBorder Color="#033e96" Width="2">
    </SparklineContainerAreaBorder>
</SparklineContainerArea>
<SparklineBorder Color="#033e96" Width="1"></SparklineBorder>
<SparklinePadding Left="20" Right="20" Bottom="20" Top="20"></SparklinePadding>
</SfSparkline>

Sparkline with background customization