Skip to main content
All docs
V25.1
  • DxChartAnnotationImage Class

    Defines settings for image annotations.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    public class DxChartAnnotationImage :
        DxSettingsComponent<ChartAnnotationImageModel>

    Remarks

    The Chart component allows you to display images within chart annotations. To enable this functionality, set the DxChartAnnotation.Type property to Image and add a DxChartAnnotationImage object to annotation markup. You can configure the following image settings:

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

    The following example configures settings for an image annotation:

    <DxChart Data="@DataSource">
        @* ... *@
        <DxChartLineSeries ValueField="@((ApplePrice i) => i.Close)"
                           ArgumentField="@((ApplePrice i) => i.Date)"
                           Name="AAPL" />
        <DxChartAnnotation PositionX="150"
                           PositionY="150"
                           Type="ChartAnnotationType.Image"
                           Color="transparent"
                           PaddingLeftRight="0"
                           PaddingTopBottom="0">
            <DxChartAnnotationImage Url="@StaticAssetUtils.GetImagePath("AppleStock/stock.svg")"
                                    Width="60"
                                    Height="60" />
            <DxChartAnnotationBorder Visible="false" />
        </DxChartAnnotation>
    </DxChart>
    

    Chart - Image annotation

    Refer to the following section for more information about annotations: Annotations in Blazor Charts.

    Inheritance

    Object
    ComponentBase
    DxSettingsComponent<DevExpress.Blazor.Internal.ChartAnnotationImageModel>
    DxChartAnnotationImage
    See Also