DxSparkline.FirstLastColor Property

Specifies the color of the first and last series points. This applies if the ShowFirstLast property is enabled.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue("#666666")]
[Parameter]
public string FirstLastColor { get; set; }

Property Value

Type	Default	Description
String	"#666666"	The point color.

Remarks

The FirstLastColor property accepts the following formats:

• Longhand and shorthand hexadecimal color values: #ffff00, #ff0.
• RGB and RGBA color codes: rgb(255, 0, 0), rgba(0, 230, 0, 0.3).
• HTML color name (case-insensitive): red, DarkGreen.

DxSparkline highlights the first and last series points. Use the FirstLastColor property to specify the color of such points.

Note

For Bar and WinLoss series types, the FirstLastColor property applies to entire points (bars). For other series types, this property applies to point borders only. To specify the inner color for such points, use the PointColor property.

The following code snippet highlights first and last points:

Razor

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

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

DataSource

public List<SparklineDataPoint> GenerateData() {
    return new List<SparklineDataPoint>() {
        new SparklineDataPoint( 01, 2210),
        new SparklineDataPoint( 02, 2103),
        new SparklineDataPoint( 03, 2132),
        new SparklineDataPoint( 04, 2000),
        new SparklineDataPoint( 05, -2062),
        new SparklineDataPoint( 06, 1954),
        new SparklineDataPoint( 07, 2112),
        new SparklineDataPoint( 08, 1967),
        new SparklineDataPoint( 09, -2009),
        new SparklineDataPoint( 10, 2087),
        new SparklineDataPoint( 11, 2112),
        new SparklineDataPoint( 12, 2038),
    };
}
public class SparklineDataPoint {
    public int Month { get; set; }
    public int VisitorCount { get; set; }
    public SparklineDataPoint(int month, int visitorCount) {
        Month = month;
        VisitorCount = visitorCount;
    }
}