ChartSeriesLabelModel.FormatPattern Property

Specifies a string pattern that formats series label text.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public string FormatPattern { get; set; }

Property Value

Type	Description
String	A string that formats series label text.

Remarks

Format patterns can include placeholders in braces with format specifiers separated by a colon, and plain text. For example, “{argument:MMMM}: {value:#.##} °F” where:

• {argument}, {value} - placeholders
• MMMM, #.## - format specifiers
• °F - plain text

The following tables list placeholders you can use in patterns:

Common Placeholders

Placeholder	Description
{argument}	The originalArgument after type cast.
{argumentText}	The string that is the argument with an applied format.
{originalArgument}	The raw point argument.
{originalValue}	The raw point value.
{seriesName}	The name of the series to which the point belongs.
{value}	The originalValue after type cast.
{valueText}	The string that is the value with an applied format.

Range Series Placeholders

Placeholder	Description
{index}	0 - if the point is minimum; 1 - if the point is maximum.

Bubble Series Placeholders

Placeholder	Description
{size}	The bubble point’s size value.

Stacked Series Placeholders

Placeholder	Description
{percent}	The point’s percentage value.
{percentText}	The percentage value with an applied format, and converted to a string.
{total}	The sum of all values shown for the argument.
{totalText}	The string that is the total with an applied format.

Financial Series Placeholders

Placeholder	Description
{closeValue}	The originalCloseValue after type cast.
{closeValueText}	The string that is the closeValue with an applied format.
{highValue}	The originalHighValue after type cast.
{highValueText}	The string that is the highValue with an applied format.
{lowValue}	The originalLowValue after type cast.
{lowValueText}	The string that is the lowValue with an applied format.
{openValue}	The originalOpenValue after type cast.
{openValueText}	The string that is the openValue with an applied format.
{originalCloseValue}	The point’s raw close value.
{originalHighValue}	The point’s raw high value.
{originalLowValue}	The point’s raw low value.
{originalOpenValue}	The point’s raw open value.
{reductionValue}	The reduction value.
{reductionValueText}	The string that is the reductionValue with an applied format.

Note

You can specify the DxChartSeriesLabel.ArgumentFormat and DxChartSeriesLabel.ValueFormat properties to format arguments and values, and then use the {argumentText} and {~valueText} placeholders to refer to resulting formatted arguments and values.

Refer to the following topic for the list of format specifiers for date-time and numeric values: LDML patterns.

Example

The following example shows how to format series label text:

Razor

@page "/"

<DxChart Data="@dataPoints"
         Width=600 Height=360 
         CustomizeSeriesPoint="@PreparePointLabel">
    <DxChartScatterSeries ArgumentField="@((DataPoint i) => i.Arg)"
                          ValueField="@((DataPoint i) => i.Value1)"
                          Name="Series 1">
        <DxChartSeriesPoint Size=20 />
        <DxChartSeriesLabel/>
    </DxChartScatterSeries>
    <DxChartLegend Position=RelativePosition.Outside />
</DxChart>

@code {
    private DataPoint[] dataPoints;
    protected override void OnInitialized() {
        dataPoints = GetDataPoints();
    }
    protected void PreparePointLabel(ChartSeriesPointCustomizationSettings pointSettings) {
        double value = (double)pointSettings.Point.Value;
        if (value > 26) {
            pointSettings.PointLabel.Visible = true;
            pointSettings.PointLabel.FormatPattern = "{value:#.##}";
        }
    }
    public class DataPoint {
        public DateTime Arg { get; set; }
        public double Value1 { get; set; }
    }
    public DataPoint[] GetDataPoints() {
        DataPoint[] dataPoints = new DataPoint[] {
            new DataPoint() { Arg = new DateTime(2021, 1, 1), Value1 = 26.54561 },
            new DataPoint() { Arg = new DateTime(2021, 1, 2), Value1 = 24.4521 },
            new DataPoint() { Arg = new DateTime(2021, 1, 3), Value1 = 25.3645 },
            new DataPoint() { Arg = new DateTime(2021, 1, 4), Value1 = 27.4874 },
            new DataPoint() { Arg = new DateTime(2021, 1, 5), Value1 = 28.9654 },
        };
        return dataPoints;
    }
}