ContextQMD
Back to Devexpress

Customization in Blazor Charts

blazor-405098-components-charts-customization.md

latest43.6 KB
Original Source

Customization in Blazor Charts

  • Jan 22, 2026
  • 14 minutes to read

DevExpress Charts for Blazor allow you to customize the appearance of nested/inner components and chart elements. This topic lists available options.

Palette

Blazor Chart components allow you to create a custom palette to colorize chart series or pie sectors. To apply a palette, assign it to the component’s Palette property.

The Palette 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.

When the number of series (for DxChart or DxPolarChart) or series points (for DxPieChart) exceeds the number of palette colors, you can use the component’s PaletteExtensionMode property to extend the palette. Alternate, Blend, and Extrapolate options are available.

The following code snippet applies a two-color palette to chart components and uses the drop-down menu to change the palette extension mode:

razor
<DxChart Data="@DataSource"
         Palette="@Palette"
         PaletteExtensionMode="@ExtensionMode">
    <DxChartBarSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                      ValueField="@((StatisticPoint v) => v.Population24)"
                      Name="2024" />
    <DxChartBarSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                      ValueField="@((StatisticPoint v) => v.Population23)"
                      Name="2023" />
    <DxChartBarSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                      ValueField="@((StatisticPoint v) => v.Population22)"
                      Name="2022" />
    <DxChartTitle Text="Population by European Country" />
    <DxChartLegend Position="RelativePosition.Outside"
                   Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Years" />
    </DxChartLegend>
</DxChart>

@code {
    IEnumerable<StatisticPoint> DataSource = Enumerable.Empty<StatisticPoint>();
    protected override void OnInitialized() {
        DataSource = GenerateData();
    }
}
razor
<DxPolarChart Data="@DataSource"
              Palette="@Palette"
              PaletteExtensionMode="@ExtensionMode">
    <DxPolarChartBarSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                           ValueField="@((StatisticPoint v) => v.Population24)"
                           Name="2024" />
    <DxPolarChartBarSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                           ValueField="@((StatisticPoint v) => v.Population23)"
                           Name="2023" />
    <DxPolarChartBarSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                           ValueField="@((StatisticPoint v) => v.Population23)"
                           Name="2022" />
    <DxChartTitle Text="Population by European Country" />
    <DxChartLegend Position="RelativePosition.Outside"
                   Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Years" />
    </DxChartLegend>
</DxPolarChart>

@code {
    IEnumerable<StatisticPoint> DataSource = Enumerable.Empty<StatisticPoint>();
    protected override void OnInitialized() {
        DataSource = GenerateData();
    }
}
razor
<DxPieChart Data="@DataSource" Width="500px"
            Palette="@Palette"
            PaletteExtensionMode="@ExtensionMode">
    <DxPieChartSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                      ValueField="@((StatisticPoint v) => v.Population24)"
                      Name="2024" />
    <DxChartTitle Text="Population by European Country" />
    <DxChartLegend Position="RelativePosition.Outside"
                   Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Countries" />
    </DxChartLegend>
</DxPieChart>
@code {
    IEnumerable<StatisticPoint> DataSource = Enumerable.Empty<StatisticPoint>();
    protected override void OnInitialized() {
        DataSource = GenerateData();
    }
}
razor
<b>Palette Extension Mode:</b>
<DxComboBox Data="Enum.GetValues<ChartPaletteExtensionMode>()"
            @bind-Value="@ExtensionMode" />
@code {
    ChartPaletteExtensionMode ExtensionMode { get; set; } = ChartPaletteExtensionMode.Alternate;

    string[] Palette => new string[] { "#5f368d", "#28a745"};
}
csharp
public static List<StatisticPoint> GenerateData() {
    return new List<StatisticPoint>() {
            new StatisticPoint("Germany", 84552242, 83294633, 83369843),
            new StatisticPoint("UK", 69138192, 67736802, 67508936),
            new StatisticPoint("France", 66548530, 64756584, 64626628),
            new StatisticPoint("Italy", 59342867, 58870763, 59037474),
            new StatisticPoint("Spain", 47910526, 47519628, 47558630),
            new StatisticPoint("Poland", 38539201, 41026068, 39857145),
    };
}
public class StatisticPoint {
    public string Country { get; set; }
    public int Population24 { get; set; }
    public int Population23 { get; set; }
    public int Population22 { get; set; }
    public StatisticPoint(string country, int population24, int population23, int population22) {
        Country = country;
        Population24 = population24;
        Population23 = population23;
        Population22 = population22;
    }
}

Font Customization

Blazor Charts allow you to customize font setting of multiple chart elements. The table below lists these elements and their corresponding objects.

Chart ElementDxChart ObjectDxPolarChart ObjectDxPieChart Object
Axis titleDxChartAxisTitleN/AN/A
Axis labelDxChartAxisLabelDxPolarChartAxisLabelN/A
Axis strip labelDxChartAxisStripLabelN/AN/A
Constant line labelDxChartConstantLineLabelDxChartConstantLineLabelN/A
Series labelDxChartSeriesLabelDxChartSeriesLabelDxChartSeriesLabel
AnnotationDxChartAnnotationN/ADxPieChartAnnotation

Add a DxChartFont object to the target component’s markup to access and configure the element’s font settings. The following properties are available:

Color | OpacitySpecify the text color and its opacity.Family | WeightSpecify font style settings.SizeSpecifies font size.

The following code snippet applies font customizations to several chart elements:

  • <DxChart> - argument axis title
  • <DxPolarChart> - argument axis labels
  • <DxPieChart> - series labels

razor
<DxChart Data="@DataSource">
    <DxChartBarSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                      ValueField="@((StatisticPoint v) => v.Population24)"
                      Name="2024" />
    <DxChartBarSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                      ValueField="@((StatisticPoint v) => v.Population23)"
                      Name="2023" />
    <DxChartBarSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                      ValueField="@((StatisticPoint v) => v.Population22)"
                      Name="2022" />
    <DxChartArgumentAxis>
        <DxChartAxisTitle Text="Country">
            <DxChartFont Color="purple" Weight="700" Opacity="0.6"/>
        </DxChartAxisTitle>
    </DxChartArgumentAxis>
    <DxChartTitle Text="Population by European Country" />
    <DxChartLegend Position="RelativePosition.Outside"
                   Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Years" />
    </DxChartLegend>
</DxChart>
razor
<DxPolarChart Data="@DataSource">
    <DxPolarChartBarSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                           ValueField="@((StatisticPoint v) => v.Population24)"
                           Name="2024" />
    <DxPolarChartBarSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                           ValueField="@((StatisticPoint v) => v.Population23)"
                           Name="2023" />
    <DxPolarChartBarSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                           ValueField="@((StatisticPoint v) => v.Population23)"
                           Name="2022" />
    <DxPolarChartArgumentAxis>
        <DxPolarChartAxisLabel>
            <DxChartFont Color="purple" Weight="600" />
        </DxPolarChartAxisLabel>
    </DxPolarChartArgumentAxis>
    <DxChartTitle Text="Population by European Country" />
    <DxChartLegend Position="RelativePosition.Outside"
                   Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Years" />
    </DxChartLegend>
</DxPolarChart>
razor
<DxPieChart Data="@DataSource">
    <DxPieChartSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                      ValueField="@((StatisticPoint v) => v.Population24)"
                      Name="2024">
        <DxChartSeriesLabel Visible="true" ValueFormat="ChartElementFormat.Millions()">
            <DxChartFont Color="white" Weight="700"/>
        </DxChartSeriesLabel>
    </DxPieChartSeries>
    <DxChartTitle Text="Population by European Country" />
    <DxChartLegend Position="RelativePosition.Outside"
                   Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Countries" />
    </DxChartLegend>
</DxPieChart>

CSS Customization

You can change the appearance of certain chart elements by applying custom CSS classes to them. The table below lists all customizable chart elements and the API properties used for their customization.

Customizable ElementProperty
Chart componentDxChartBase.CssClass
LegendDxChartLegend.CssClass
Legend item iconDxChartSeriesLegendItem.IconCssClass
Chart titleDxChartTitle.CssClass
Chart subtitleDxChartSubtitle.CssClass
Axis titleDxChartAxisTitle.CssClass

The following code snippet uses CSS classes to customize chart elements:

  • <DxChart> - legend
  • <DxPolarChart> - chart title
  • <DxPieChart> - legend item icons

razor
<DxChart Data="@DataSource">
    <DxChartBarSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                      ValueField="@((StatisticPoint v) => v.Population24)"
                      Name="2024" />
    <DxChartBarSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                      ValueField="@((StatisticPoint v) => v.Population23)"
                      Name="2023" />
    <DxChartBarSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                      ValueField="@((StatisticPoint v) => v.Population22)"
                      Name="2022" />
    <DxChartTitle Text="Population by European Country" />
    <DxChartLegend Position="RelativePosition.Outside"
                   Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right"
                   CssClass="chart-legend" >
        <DxChartTitle Text="Years" />
    </DxChartLegend>
</DxChart>
razor
<DxPolarChart Data="@DataSource">
    <DxPolarChartBarSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                           ValueField="@((StatisticPoint v) => v.Population24)"
                           Name="2024" />
    <DxPolarChartBarSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                           ValueField="@((StatisticPoint v) => v.Population23)"
                           Name="2023" />
    <DxPolarChartBarSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                           ValueField="@((StatisticPoint v) => v.Population23)"
                           Name="2022" />
    <DxChartTitle Text="Population by European Country"
                  CssClass="polar-title" />
    <DxChartLegend Position="RelativePosition.Outside"
                   Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Years" />
    </DxChartLegend>
</DxPolarChart>
razor
<DxPieChart Data="@DataSource">
    <DxPieChartSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                      ValueField="@((StatisticPoint v) => v.Population24)"
                      Name="2024">
        <DxChartSeriesLegendItem IconCssClass="pie-icon-country" />
    </DxPieChartSeries>
    <DxChartTitle Text="Population by European Country" />
    <DxChartLegend Position="RelativePosition.Outside"
                   Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Countries" />
    </DxChartLegend>
</DxPieChart>
css
.pie-icon-country {
    mask-image: url(/images/citizenship.png);
    mask-repeat: no-repeat;
    mask-size: 100%;
    background-color: currentColor;
}

.chart-legend {
    border: 1px double #5f368d;
}

.polar-title {
    background-color: rgba(145, 104, 191, 0.5);
}

Customize Individual Series Points and Point Labels

Handle the CustomizeSeriesPoint event to customize individual series points or point labels. This event fires for each series point or pie sector in all chart series.

Use the event’s Point argument property to obtain information about the current series point. The following properties are available:

Point.Argument | Point.ValueReturn the point’s argument and value.Point.SeriesNameReturns the name of the point’s series.Point.DataItemsReturns the point’s data source object.

csharp
void OnCustomizeSeriesPoint(ChartSeriesPointCustomizationSettings args) {
    var countryName = args.Point.Argument.ToString();
    var population = string.Format("{0:#,0,, M}", args.Point.Value);
    var seriesName = args.Point.SeriesName;
    var dataItems = args.Point.DataItems;
}

In a CustomizeSeriesPoint event handler, you can also use the following argument properties:

Refer to the sections below for additional information and examples.

Customize Point Appearance

Handle the CustomizeSeriesPoint event and use its PointAppearance argument property to access and modify appearance settings of individual series points. The following properties are available:

ColorSpecifies the point’s color.Symbol | SizeSpecify the shape and size of the point’s marker.ImageAllows you to access and modify the point’s image settings.VisibleSpecifies the point’s visibility.

Note

The PointAppearance.Color argument property affects chart series of all types. Other argument properties do not affect bar-based and pie series.

PointAppearance settings override common point settings defined for all points in a series at the DxChartSeriesPoint component level (for DxChart and DxPolarChart).

Run Demo: Charts - Series Point Customization

The following code snippet changes appearance for points that match the specified condition:

  • <DxChart> - point marker shape and color
  • <DxPolarChart>, <DxPieChart> - pie sector or bar color

razor
<DxChart Data="@DataSource" 
         CustomizeSeriesPoint="@OnCustomizeSeriesPoint">
    <DxChartLineSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                       ValueField="@((StatisticPoint v) => v.Population24)"
                       Name="2024">
        <DxChartSeriesPoint Symbol="ChartPointSymbol.Polygon"
                            Color="@System.Drawing.Color.FromArgb(255, 40, 167, 69)" />
    </DxChartLineSeries>
    <DxChartTitle Text="Population by European Country" />
    <DxChartLegend Position="RelativePosition.Outside"
                   Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Years" />
    </DxChartLegend>
</DxChart>
razor
<DxPolarChart Data="@DataSource"
              CustomizeSeriesPoint="@OnCustomizeSeriesPoint">
    <DxPolarChartBarSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                           ValueField="@((StatisticPoint v) => v.Population24)"
                           Color="@System.Drawing.Color.FromArgb(255, 40, 167, 69)"
                           Name="2024">
    <DxChartTitle Text="Population by European Country" />
    <DxChartLegend Position="RelativePosition.Outside"
                   Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Years" />
    </DxChartLegend>
</DxPolarChart>
razor
<DxPieChart Data="@DataSource"
            CustomizeSeriesPoint="@OnCustomizeSeriesPoint" >
    <DxPieChartSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                      ValueField="@((StatisticPoint v) => v.Population24)"
                      Name="2024" />
    <DxChartTitle Text="Population by Eutopean Country" />
    <DxChartLegend Position="RelativePosition.Outside"
                   Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Countries" />
    </DxChartLegend>
</DxPieChart>
csharp
void OnCustomizeSeriesPoint(ChartSeriesPointCustomizationSettings args) {
    var population = (int)args.Point.Value;
    if (population > 50000000) {
        args.PointAppearance.Color = System.Drawing.Color.PaleVioletRed;
        args.PointAppearance.Symbol = ChartPointSymbol.TriangleDown;
        args.PointAppearance.Size = 20;
    }
}

Customize Point Images

DxChartSeriesPointImage class configures image settings for all points in a series. Use the PointAppearance.Image argument property in a CustomizeSeriesPoint event handler to access and modify image settings for individual series points. You can change image url, height, and width.

Run Demo: Charts - Series Point Images

The following code snippet assigns images to series points based on point arguments. Images with the corresponding names are stored in the project’s wwwroot/images folder.

razor
<DxChart Data="@DataSource" 
         CustomizeSeriesPoint="@OnCustomizeSeriesPoint">
    <DxChartAreaSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                       ValueField="@((StatisticPoint v) => v.Population24)"
                       Name="2024">
        <DxChartSeriesPoint Visible="true">
            <DxChartSeriesPointImage Height="25" Width="25" />
        </DxChartSeriesPoint>
    </DxChartAreaSeries>
    <DxChartTitle Text="Population by European Country" />
    <DxChartLegend Position="RelativePosition.Outside"
                   Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Years" />
    </DxChartLegend>
</DxChart>
razor
<DxPolarChart Data="@DataSource"
              CustomizeSeriesPoint="@OnCustomizeSeriesPoint">
    <DxPolarChartLineSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                            ValueField="@((StatisticPoint v) => v.Population24)"
                            Name="2024">
        <DxChartSeriesPoint>
            <DxChartSeriesPointImage Height="25" Width="25" />
        </DxChartSeriesPoint>
    </DxPolarChartLineSeries>
    <DxPolarChartArgumentAxis>
        <DxPolarChartAxisLabel IndentFromAxis="20" />
    </DxPolarChartArgumentAxis>
    <DxChartTitle Text="Population by European Country" />
    <DxChartLegend Position="RelativePosition.Outside"
                   Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Years" />
    </DxChartLegend>
</DxPolarChart>
csharp
void OnCustomizeSeriesPoint(ChartSeriesPointCustomizationSettings args) {
    var countryName = args.Point.Argument.ToString();
    args.PointAppearance.Image.Url = $"images/{countryName}.svg";
}

Customize Point Labels

DxChartSeriesLabel class configures settings of all labels in a series. Use the PointLabel argument property in a CustomizeSeriesPoint event handler to access and modify settings of individual point labels.

Note

Individual label settings have priority over common label settings.

Run Demo: Charts - Series Label Customization

You can modify the following label settings:

VisibleSpecifies whether series labels are visible.ShowForZeroValuesSpecifies whether to show labels for series points with zero values (for bar-based series only).BackgroundColorSpecifies the label’s background color.Alignment | Position | HorizontalOffset | VerticalOffsetSpecify series label location.RotationAngleSpecifies the rotation angle of series labels.Texts | FormatPatternSpecify label text and its format.

The following code snippet customizes labels for series points that match the specified criterion and hides the remaining point labels:

razor
<DxChart Data="@DataSource" 
         CustomizeSeriesPoint="@OnCustomizeSeriesPoint">
    <DxChartLineSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                       ValueField="@((StatisticPoint v) => v.Population24)"
                       Name="2024">
        <DxChartSeriesLabel Visible="true" />
    </DxChartLineSeries>
    <DxChartTitle Text="Population by European Country" />
    <DxChartLegend Position="RelativePosition.Outside"
                   Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Years" />
    </DxChartLegend>
</DxChart>
razor
<DxPolarChart Data="@DataSource"
              CustomizeSeriesPoint="@OnCustomizeSeriesPoint">
    <DxPolarChartBarSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                           ValueField="@((StatisticPoint v) => v.Population24)"
                           Name="2024">
        <DxChartSeriesLabel Visible="true" />
    </DxPolarChartBarSeries>
    <DxChartTitle Text="Population by European Country" />
    <DxChartLegend Position="RelativePosition.Outside"
                   Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Years" />
    </DxChartLegend>
</DxPolarChart>
razor
<DxPieChart Data="@DataSource"
            CustomizeSeriesPoint="@OnCustomizeSeriesPoint" >
    <DxPieChartSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                      ValueField="@((StatisticPoint v) => v.Population24)"
                      Name="2024">
        <DxChartSeriesLabel Visible="true" />
    </DxPieChartSeries>
    <DxChartTitle Text="Population by Eutopean Country" />
    <DxChartLegend Position="RelativePosition.Outside"
                   Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Countries" />
    </DxChartLegend>
</DxPieChart>
csharp
void OnCustomizeSeriesPoint(ChartSeriesPointCustomizationSettings args) {
    var countryName = args.Point.Argument.ToString();
    var population = (int)args.Point.Value;
    if (population < 50000000) {
        args.PointLabel.Texts = new string[] { $"{countryName}: {string.Format("{0:#,0,,M}", population)}" };
    } else {
        args.PointLabel.Visible = false;
    }
}

You can also use PointLabel.Border, PointLabel.Connector, and PointLabel.Font argument properties to access and modify border, connector, and font settings of individual series labels.

Customize Label Borders

DxChartSeriesLabelBorder class configures borders for all labels in a series. Use the PointLabel.Border argument property in a CustomizeSeriesPoint event handler to access and modify border settings of individual labels. You can change the border color, width, line style, and visibility.

The following code snippet adds borders to series labels and customizes the border style for points that match the specified condition:

razor
<DxChart Data="@DataSource" 
         CustomizeSeriesPoint="@OnCustomizeSeriesPoint">
    <DxChartLineSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                       ValueField="@((StatisticPoint v) => v.Population24)"
                       Name="2024">
        <DxChartSeriesLabel Visible="true"
                            ValueFormat="ChartElementFormat.Thousands()">
            <DxChartSeriesLabelBorder Visible="true" />
        </DxChartSeriesLabel>
    </DxChartLineSeries>
    <DxChartTitle Text="Population by European Country" />
    <DxChartLegend Position="RelativePosition.Outside"
                   Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Years" />
    </DxChartLegend>
</DxChart>
razor
<DxPolarChart Data="@DataSource"
              CustomizeSeriesPoint="@OnCustomizeSeriesPoint">
    <DxPolarChartBarSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                           ValueField="@((StatisticPoint v) => v.Population24)"
                           Name="2024">
        <DxChartSeriesLabel Visible="true"
                            ValueFormat="ChartElementFormat.Thousands()"
                            Position="RelativePosition.Inside">
            <DxChartSeriesLabelBorder Visible="true" />
        </DxChartSeriesLabel>
    </DxPolarChartBarSeries>
    <DxChartTitle Text="Population by European Country" />
    <DxChartLegend Position="RelativePosition.Outside"
                   Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Years" />
    </DxChartLegend>
</DxPolarChart>
razor
<DxPieChart Data="@DataSource"
            CustomizeSeriesPoint="@OnCustomizeSeriesPoint" >
    <DxPieChartSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                      ValueField="@((StatisticPoint v) => v.Population24)"
                      Name="2024">
        <DxChartSeriesLabel Visible="true"
                            ValueFormat="ChartElementFormat.Thousands()">
            <DxChartSeriesLabelBorder Visible="true" />
        </DxChartSeriesLabel>
    </DxPieChartSeries>
    <DxChartTitle Text="Population by Eutopean Country" />
    <DxChartLegend Position="RelativePosition.Outside"
                   Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Countries" />
    </DxChartLegend>
</DxPieChart>
csharp
void OnCustomizeSeriesPoint(ChartSeriesPointCustomizationSettings args) {
    var population = (int)args.Point.Value;
    if(population > 50000000) {
        args.PointLabel.Border.Color = "#28a745";
        args.PointLabel.Border.Width = 5;
    }
}

Customize Label Connectors

DxChartSeriesLabelConnector class configures connectors for all labels in a series. Use the PointLabel.Connector argument property in a CustomizeSeriesPoint event handler to access and modify connector settings of individual labels. You can change connector color, width, and visibility.

The following code snippet adds connectors to series labels and customizes the connector style based on a condition:

razor
<DxChart Data="@DataSource" 
         CustomizeSeriesPoint="@OnCustomizeSeriesPoint">
    <DxChartLineSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                       ValueField="@((StatisticPoint v) => v.Population24)"
                       Name="2024">
        <DxChartSeriesLabel Visible="true"
                            ValueFormat="ChartElementFormat.Thousands()">
            <DxChartSeriesLabelConnector Visible="true" />
        </DxChartSeriesLabel>
    </DxChartLineSeries>
    <DxChartTitle Text="Population by European Country" />
    <DxChartLegend Position="RelativePosition.Outside"
                   Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Years" />
    </DxChartLegend>
</DxChart>
razor
<DxPolarChart Data="@DataSource"
              CustomizeSeriesPoint="@OnCustomizeSeriesPoint">
    <DxPolarChartBarSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                           ValueField="@((StatisticPoint v) => v.Population24)"
                           Name="2024">
        <DxChartSeriesLabel Visible="true"
                            ValueFormat="ChartElementFormat.Thousands()">
            <DxChartSeriesLabelConnector Visible="true" />
        </DxChartSeriesLabel>
    </DxPolarChartBarSeries>
    <DxPolarChartArgumentAxis>
        <DxPolarChartAxisLabel IndentFromAxis="20" />
    </DxPolarChartArgumentAxis>
    <DxChartTitle Text="Population by European Country" />
    <DxChartLegend Position="RelativePosition.Outside"
                   Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Years" />
    </DxChartLegend>
</DxPolarChart>
razor
<DxPieChart Data="@DataSource"
            CustomizeSeriesPoint="@OnCustomizeSeriesPoint" >
    <DxPieChartSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                      ValueField="@((StatisticPoint v) => v.Population24)"
                      Name="2024">
        <DxChartSeriesLabel Visible="true"
                            ValueFormat="ChartElementFormat.Thousands()">
            <DxChartSeriesLabelConnector Visible="true" />
        </DxChartSeriesLabel>
    </DxPieChartSeries>
    <DxChartTitle Text="Population by Eutopean Country" />
    <DxChartLegend Position="RelativePosition.Outside"
                   Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Countries" />
    </DxChartLegend>
</DxPieChart>
csharp
void OnCustomizeSeriesPoint(ChartSeriesPointCustomizationSettings args) {
    var population = (int)args.Point.Value;
    if (population > 50000000) {
        args.PointLabel.Connector.Visible = false;
    } else {
        args.PointLabel.Connector.Color = System.Drawing.Color.FromArgb(255, 40, 167, 69);
        args.PointLabel.Connector.Width = 3;
    }
}

Customize Label Font Settings

DxChartFont class configures font settings for all labels in a series. Use the PointLabel.Font argument property in a CustomizeSeriesPoint event handler to access and modify font settings of individual labels. The following properties are available:

Color | OpacitySpecify the text color and its opacity.Family | WeightSpecify font style settings.SizeSpecifies font size.

The following code snippet configures label font settings at the DxChartFont component level and customizes label text for points that match the specified criterion:

razor
<DxChart Data="@DataSource" 
         CustomizeSeriesPoint="@OnCustomizeSeriesPoint">
    <DxChartLineSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                       ValueField="@((StatisticPoint v) => v.Population24)"
                       Name="2024">
        <DxChartSeriesLabel Visible="true"
                            ValueFormat="ChartElementFormat.Thousands()">
            <DxChartFont Size="14" Weight="400" />
        </DxChartSeriesLabel>
    </DxChartLineSeries>
    <DxChartTitle Text="Population by European Country" />
    <DxChartLegend Position="RelativePosition.Outside"
                   Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Years" />
    </DxChartLegend>
</DxChart>
razor
<DxPolarChart Data="@DataSource"
              CustomizeSeriesPoint="@OnCustomizeSeriesPoint">
    <DxPolarChartBarSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                           ValueField="@((StatisticPoint v) => v.Population24)"
                           Name="2024">
        <DxChartSeriesLabel Visible="true"
                            ValueFormat="ChartElementFormat.Thousands()">
            <DxChartFont Size="14" Weight="400" />
        </DxChartSeriesLabel>
    </DxPolarChartBarSeries>
    <DxPolarChartArgumentAxis>
        <DxPolarChartAxisLabel IndentFromAxis="20" />
    </DxPolarChartArgumentAxis>
    <DxChartTitle Text="Population by European Country" />
    <DxChartLegend Position="RelativePosition.Outside"
                   Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Years" />
    </DxChartLegend>
</DxPolarChart>
razor
<DxPieChart Data="@DataSource"
            CustomizeSeriesPoint="@OnCustomizeSeriesPoint" >
    <DxPieChartSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                      ValueField="@((StatisticPoint v) => v.Population24)"
                      Name="2024">
        <DxChartSeriesLabel Visible="true"
                            ValueFormat="ChartElementFormat.Thousands()">
            <DxChartFont Size="14" Weight="400" />
        </DxChartSeriesLabel>
    </DxPieChartSeries>
    <DxChartTitle Text="Population by Eutopean Country" />
    <DxChartLegend Position="RelativePosition.Outside"
                   Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Countries" />
    </DxChartLegend>
</DxPieChart>
csharp
void OnCustomizeSeriesPoint(ChartSeriesPointCustomizationSettings args) {
    var population = (int)args.Point.Value;
    if (population > 70000000) {
        args.PointLabel.Font.Size = 16;
        args.PointLabel.Font.Family = "fantasy";
    }
}

Task-Based Examples

This section contains code samples that demonstrate customization options.

Display TimeSpan Values in Pie Chart Labels

You have a pie chart that renders TimeSpan values in Ticks. The chart automatically displays numbers of ticks in series labels. You want to display series label text in a custom {HH:mm:ss} format.

To complete this task, follow the steps below:

  1. Handle the CustomizeSeriesPoint event.
  2. In the handler, use the event’s Point.Value argument property to obtain the point’s value from a data source.
  3. Cast the point’s value to the DateTime type.
  4. Assign the new value in the specified format to the PointLabel.Texts argument property.
razor
<DxPieChart T="DataItem"
            CustomizeSeriesPoint="@OnCustomizeSeriesPoint">
    <DxPieChartSeries Data="@Data"
                      ValueField="si => si.TimeSpent.Ticks"
                      ArgumentField="si => si.Activity"
                      SummaryMethod="Enumerable.Sum" >
        <DxChartLegend VerticalAlignment="VerticalEdge.Bottom"
                       Position="RelativePosition.Outside"/>
        <DxChartSeriesLabel Visible="true" >
            <DxChartSeriesLabelConnector Visible="true" />
        </DxChartSeriesLabel>
    </DxPieChartSeries>
</DxPieChart>

@code {
    void OnCustomizeSeriesPoint(ChartSeriesPointCustomizationSettings args) {
        var value = (long)args.Point.Value;
        var dateTime = new DateTime(value);
        args.PointLabel.Texts = new string[] { $"{dateTime.ToString("HH:mm:ss")}" };
    }

    List<DataItem> Data = new List<DataItem>();

    protected override async Task OnInitializedAsync() {
        var list = new List<TimeSpan>();
        var random = new Random();
        for (int i = 1; i < 100; i++) {
            var firstDate = DateTime.Now;
            Data.Add(new DataItem() {
                Activity = "Activity " + ((i / 20) + 1),
                TimeSpent = DateTime.Today.AddMinutes(i) - DateTime.Today
            });
        }
    }

    public class DataItem {
        public string Activity { get; set; }
        public TimeSpan TimeSpent { get; set; }
    }
}