Range Band in Blazor Sparkline Component

13 Oct 20211 minute to read

Range band represents the quality or improves the readability of a specific range for the Sparkline y-axis by specifying the StartRange and EndRange properties in the SparklineRangeBand in the SparklineRangeBandSettings.

The following properties are used for the customization of the range band:

• Color - Specifies the color of the range band.
• Opacity - Specifies the opacity of Color in the range band.

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="new int[]{ 0, 6, 4, 1, 3, 2, 5 }" Height="150px" Width="150px" LineWidth="2" Fill="#0d3c9b">
    <SparklineAxisSettings MinX="-1" MaxX="7" MaxY="7" MinY="-1">
    </SparklineAxisSettings>
    <SparklineRangeBandSettings>
        <SparklineRangeBand StartRange="1" EndRange="2" Color="#bfd4fc" Opacity="0.4">
        </SparklineRangeBand>
        <SparklineRangeBand StartRange="4" EndRange="5" Color="red" Opacity="0.4">
        </SparklineRangeBand>
    </SparklineRangeBandSettings>
</SfSparkline>