Skip to main content

ChartSeriesPointImageModel Class

Defines a Chart point’s image and its settings.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.2.dll

NuGet Package: DevExpress.Blazor


public class ChartSeriesPointImageModel :

The following members return ChartSeriesPointImageModel objects:


Use instances of the ChartSeriesPointImageModel class in the CustomizeSeriesPoint event handler. These instances specify the customized point’s image and its settings (height and width).

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">
            <DxChartSeriesPointImage Width="50" Height="50" />
    <DxChartLegend Position="RelativePosition.Outside" />

@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";

Charts - A series point image

Run Demo: Charts - Series Point Image


See Also