Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

IChartSeriesPointImage.Height Property

Specifies the image height.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[DefaultValue(30)]
int Height { get; set; }

#Property Value

Type Default Description
Int32 30

The image height in pixels.

#Remarks

A Chart point’s image height is specified by the Height property. You can override this value for individual points. For this purpose, handle the CustomizeSeriesPoint event and use the PointAppearance.Image.Height property to set the new image height.

Note

The Chart component applies custom height and width settings to the <image> element, but the specified icon retains its original proportions. For <svg> icons, you can set the preserveAspectRatio attribute to none so that the graphic content matches the viewport rectangle.

The following example illustrates how to:

  • use the DxChartSeriesPointImage component to specify the image size for all points;
  • handle the CustomizeSeriesPoint event and use the PointAppearance.Image.Height and PointAppearance.Image.Width properties to change the image size for points whose values are greater than 75.
Razor
<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="25" Height="25" />
        </DxChartSeriesPoint>
    </DxChartLineSeries>
    <DxChartLegend Position="RelativePosition.Outside" />
</DxChart>

@code {q
    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 = $"_content/BlazorDemo/images/{weatherType}.png";

        double value = (double)pointSettings.Point.Value;
        if (value > 75) {
            pointSettings.PointAppearance.Image.Height = 50;
            pointSettings.PointAppearance.Image.Width = 50;
        }
    }
}

Chart Point Image Height

Run Demo: Charts - Series Point Image

See Also