Search results

Special Points Customization in Blazor Sparkline component

28 Jul 2021 / 2 minutes to read

Add custom color for special points

The color of special points can be changed by specifying the corresponding property, and it is applicable for Line, Column and Area chart types in the Sparkline. The following properties are used to customize the special points.

Copied to clipboard
@using Syncfusion.Blazor.Charts

<SfSparkline XName="CarName" YName="Rating" Width="130px" Height="150px" TValue="CarRating" DataSource="CarRatings" Type="SparklineType.Column" ValueType="SparklineValueType.Category"
         HighPointColor="blue" LowPointColor="orange" StartPointColor="green" EndPointColor="green" NegativePointColor="red">
</SfSparkline>

@code {
public class CarRating
{
    public string CarName { get; set; }
    public double Rating { get; set; }
};
public List<CarRating> CarRatings = new List<CarRating> {
    new CarRating { CarName= "AUDI", Rating= 1 },
    new CarRating { CarName= "BMW", Rating= 5 },
    new CarRating { CarName= "BUICK", Rating= -1 },
    new CarRating { CarName= "CETROEN", Rating= -6 },
    new CarRating { CarName= "CHEVROLET", Rating= 0.01 },
    new CarRating { CarName= "FIAT", Rating= 1 },
    new CarRating { CarName= "FORD", Rating= -2 },
    new CarRating { CarName= "HONDA", Rating= 7 },
    new CarRating { CarName= "HYUNDAI", Rating= -9 },
    new CarRating { CarName= "JEEP", Rating= 0.01 },
    new CarRating { CarName= "KIA", Rating= -10 },
    new CarRating { CarName= "MAZDA", Rating= 3 }
};
}

Sparkline with point customization

Tie point color

To highlight the tie area of the Y-axis value, use the TiePointColor property that is only applicable to the WinLoss type.

Copied to clipboard
@using Syncfusion.Blazor.Charts

<SfSparkline Width="130px" Height="150px" Type="SparklineType.WinLoss" TiePointColor="blue" DataSource="new int[]{12, 15, -10, 13, 15, 6, -12, 17, 13, 0, 8, -10}">
</SfSparkline>

Sparkline with tie point color