Skip to main content
All docs
V25.1
  • IChartSeriesPointImage Interface

    Defines a point’s image settings.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    public interface IChartSeriesPointImage

    The following members return IChartSeriesPointImage objects:

    Remarks

    Use the Image property in a CustomizeSeriesPoint event handler to access and modify the following settings of point images:

    Height
    Specifies the image height.
    Url
    Specifies the image URL.
    Width
    Specifies the image width.

    Example

    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 SummaryMethod="@(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";
        }
    }
    

    Charts - A series point image

    Run Demo: Charts - Series Point Image

    See Also