Range Band in Blazor Sparkline component

22 Jul 2021 / 1 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 the 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>

Sparkline Charts with multiple range band

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!