DxChartBase<T>.CustomizeSeriesPoint Event

Enables you to customize series points and labels.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.dll

Declaration

[Parameter]
public Action<ChartSeriesPointCustomizationSettings> CustomizeSeriesPoint { get; set; }

Parameters

Type Description
ChartSeriesPointCustomizationSettings

An argument that provides information for to this event.

Remarks

The CustomizeSeriesPoint event occurs for each data point in all chart series.

Use the event argument's Point property to access the current point's settings. The Point.Value and Point.Argument properties define the actual value and argument, and the Point.SeriesName property identifies the series to which the point belongs. The Point.DataItems property returns all the items from the chart's data source.

Customize Series Points

Handle the CustomizeSeriesPoint event to customize individual points in a line series. Use the event argument's PointAppearance property to specify points' color, size, symbol, and visibility state.

To specify appearance settings that apply to all the points in a series, use the DxChartSeriesPoint component.

TIP

Individual point settings have a priority over the common point settings.

The following example demonstrates how to:

  • use the DxChartSeriesPoint component to define the common point appearance;
  • handle the CustomizeSeriesPoint event to change the color of points whose values are greater than 75 or less than 25.
<DxChart Data="@WeatherForecasts" CustomizeSeriesPoint="@PreparePointColor">
    <DxChartLineSeries AggregationMethod="@(i => (int)i.Average())"
                       Color="@System.Drawing.Color.Gray"
                       ValueField="@((WeatherForecast i) => i.TemperatureF)"
                       ArgumentField="@(i => i.Date.Date)"
                       Name="Temperature, F">
        <DxChartSeriesPoint Symbol="ChartPointSymbol.Polygon" Color="@System.Drawing.Color.Gray" Size="25"/>
    </DxChartLineSeries>
    <DxChartLegend Position="@RelativePosition.Outside" />
</DxChart>

@code {
    WeatherForecast[] WeatherForecasts;
    ...
    protected void PreparePointColor(ChartSeriesPointCustomizationSettings pointSettings) {
        double value = (double)pointSettings.Point.Value;
        if(value > 75)
            pointSettings.PointAppearance.Color = System.Drawing.Color.Red;
        else if(value < 25)
            pointSettings.PointAppearance.Color = System.Drawing.Color.Blue;
    }
}

Chart Series Point

You can also provide custom images for series points. The following example illustrates how to:

Point images are specified based on CloudCover field value that comes from the chart's data source. Images with the corresponding names are stored in the wwwroot/images folder.

<DxChart Data="@WeatherForecasts" CustomizeSeriesPoint="@PreparePointImage">
    <DxChartLineSeries AggregationMethod="@(i => (int)i.Average())"
                       ValueField="@((WeatherForecast i) => i.TemperatureF)"
                       ArgumentField="@(i => i.Date.Date)"
                       Name="Temperature, F">
        <DxChartSeriesPoint>
            <DxChartSeriesPointImage Width="50" Height="50" />
        </DxChartSeriesPoint>
    </DxChartLineSeries>
    <DxChartLegend Position="@RelativePosition.Outside" />
</DxChart>

@code {
    WeatherForecast[] WeatherForecasts;
    ...
    protected void PreparePointImage(ChartSeriesPointCustomizationSettings pointSettings) {
        IEnumerable<WeatherForecast> dataItems = pointSettings.Point.DataItems.Cast<WeatherForecast>();
        var weatherType = dataItems.GroupBy(x => x.CloudCover).OrderByDescending(x => x.Count()).First().Key;
        pointSettings.PointAppearance.Image.Url = $"images/{weatherType}.png";
    }
}

Chart Series Point Image

NOTE

Online Demo: Charts - Series Point Image

Customize Series Labels

The CustomizeSeriesPoint event allows you to customize individual labels in any series. Use the event argument's PointLabel property to specify labels' background color, position, and visibility state.

To define appearance settings common for all the labels in a series, use the DxChartSeriesLabel component.

TIP

Individual label settings have a priority over the common label settings.

The following example demonstrates how to:

  • use the DxChartSeriesLabel component to specify the position for all labels;
  • use the DxChartSeriesLabelConnector component to customize connectors between data points and labels;
  • handle the CustomizeSeriesPoint event to show only labels whose values are between 25 and 75.
<DxChart Data="@WeatherForecasts" CustomizeSeriesPoint="@PreparePointLabel">
    <DxChartLineSeries AggregationMethod="@(i => (int)i.Average())"
                       ValueField="@((WeatherForecast i) => i.TemperatureF)"
                       ArgumentField="@(i => i.Date.Date)"
                       Name="Temperature, F">
        <DxChartSeriesLabel Position="RelativePosition.Outside">
            <DxChartSeriesLabelConnector Visible="true" Width="3" />
        </DxChartSeriesLabel>
    </DxChartLineSeries>
    <DxChartLegend Position="@RelativePosition.Outside" />
</DxChart>

@code {
    WeatherForecast[] WeatherForecasts;
    ...
    protected void PreparePointLabel(ChartSeriesPointCustomizationSettings pointSettings) {
        double value = (double)pointSettings.Point.Value;
        if(value > 25 && value < 75)
            pointSettings.PointLabel.Visible = true;
    }
}

Chart Series Labels

See Also