Class AccumulationChartAnnotation

Represents a user-defined HTML element that can be placed on a chart. Annotations enhance the visual elegance of the chart. This property specifies the options to customize the annotation.

Inheritance

System.Object

SfBaseComponent

SfDataBoundComponent

AccumulationChartAnnotation

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.GetEffectivePlatform()

SfBaseComponent.GetMainComponentPlatform()

SfBaseComponent.IsMainLicenseComponent()

SfBaseComponent.LicenseContext

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

SfBaseComponent.ValidateLicense()

SfDataBoundComponent.DataManager

SfDataBoundComponent.MainParent

SfDataBoundComponent.OnAfterRenderAsync(Boolean)

SfDataBoundComponent.OnInitializedAsync()

SfDataBoundComponent.OnParametersSetAsync()

SfDataBoundComponent.SetDataManager<T>(Object)

Namespace: Syncfusion.Blazor.Charts

Assembly: Syncfusion.Blazor.dll

Syntax

public class AccumulationChartAnnotation : SfDataBoundComponent

Constructors

AccumulationChartAnnotation()

Declaration

public AccumulationChartAnnotation()

Properties

Content

Gets or sets the content of the annotation, defined by the ID of the custom element.

Declaration

public string Content { get; set; }

Property Value

Type	Description
System.String	A string representing the ID of the custom element used in the annotation. The default value is null.

Remarks

This property allows the users to specify an element ID that serves as the content for the chart annotation.

Examples

// The following example demonstrates how to set up an accumulation chart with custom annotations:
<SfAccumulationChart>
    <AccumulationChartAnnotations>
        <AccumulationChartAnnotation Content="annotationChart" X="130" Y="180">
            <ContentTemplate>
                <div>Annotation in Pixel</div>
            </ContentTemplate>
        </AccumulationChartAnnotation>
    </AccumulationChartAnnotations>
    ...
</SfAccumulationChart>

ContentTemplate

Gets or sets the content template for the annotation. The content template can be any HTML element, allowing for a flexible and customizable way to display additional information or visuals on the chart.

Declaration

public RenderFragment ContentTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	The template content is applied to the chart annotation based on the custom template provided by the user that is being rendered. The default value is null.

Remarks

The ContentTemplate property is used to define a custom template for the chart annotation.

Examples

// The following code snippet shows how to set up an accumulation chart with custom annotation templates:
<SfAccumulationChart>
     <AccumulationChartAnnotations>
        <AccumulationChartAnnotation X="130" Y="180" CoordinateUnits="@(Syncfusion.Blazor.Charts.Units.Pixel)">
            <ContentTemplate>
                <div>Annotation in Pixel</div>
            </ContentTemplate>
        </AccumulationChartAnnotation>
    </AccumulationChartAnnotations>
    ...
</SfAccumulationChart>

CoordinateUnits

Gets or sets the annotation’s coordinate units, either in Pixel or Point.

Declaration

public Units CoordinateUnits { get; set; }

Property Value

Type	Description
Units	One of the Units enumerations that specifies the coordinate units of an annotation. The options include: `Pixel`: Annotation renders based on x and y pixel values. `Point`: Annotation renders based on x and y values. The default value is Units.Pixel.

Remarks

Adjust the CoordinateUnits property to control how the annotation is positioned on the chart. Choosing Pixel makes the annotation placement more absolute relative to the control's boundaries, whereas Point allows it to respond dynamically to data changes.

Examples

// The following code snippet shows how to set up an accumulation chart with annotations using different coordinate units:
<SfAccumulationChart>
    <AccumulationChartAnnotations>
        <AccumulationChartAnnotation X="Chrome" Y="37" CoordinateUnits="@(Syncfusion.Blazor.Charts.Units.Point)">
            <ContentTemplate>
                <div>Annotation in Point</div>
            </ContentTemplate>
        </AccumulationChartAnnotation>
    </AccumulationChartAnnotations>
    ...
</SfAccumulationChart>

Description

Gets or sets additional information about the annotation for assistive technology.

Declaration

public string Description { get; set; }

Property Value

Type	Description
System.String	A string providing extra context or details about the annotation that can be utilized by assistive technology, such as screen readers.

Remarks

Use the Description property to convey useful information to screen readers and other accessibility tools.

Examples

// The following code snippet demonstrates how to use the Description property for an annotation in an accumulation chart:
<SfAccumulationChart>
    <AccumulationChartAnnotations>
        <AccumulationChartAnnotation X="130" Y="180" Description="Assistive description for coordinates">
            <ContentTemplate>
                <div>Annotation in Point</div>
            </ContentTemplate>
        </AccumulationChartAnnotation>
    </AccumulationChartAnnotations>
    ...
</SfAccumulationChart>

Region

Gets or sets the regions to insert annotations in relation to a series or a chart.

Declaration

public Regions Region { get; set; }

Property Value

Type	Description
Regions	One of the Regions enumerations that specify the regions of an annotation. The options include: `Chart`: Annotation renders based on chart coordinates. `Series`: Annotation renders based on series coordinates. The default value is Regions.Chart.

Remarks

Adjust the Region property to change where and how annotations are displayed on the chart.

Examples

// This example demonstrates how to position an annotation in relation to chart series:
<SfAccumulationChart>
    <AccumulationChartAnnotations>
        <AccumulationChartAnnotation X="130" Y="180" Region="@(Syncfusion.Blazor.Charts.Regions.Series)">
            <ContentTemplate>
                <div>Annotation in Series</div>
            </ContentTemplate>
        </AccumulationChartAnnotation>
    </AccumulationChartAnnotations>
    ...
</SfAccumulationChart>

X

Gets or sets the X-coordinate value for the annotation in an accumulation chart.

Declaration

public string X { get; set; }

Property Value

Type	Description
System.String	Specifies the pixel value or percentage of the chart's coordinate space. The default value is zero.

Remarks

This property determines the horizontal position of the annotation within the accumulation chart. The X value is relevant for positioning annotations in charts like pie or doughnut charts, where coordinates are typically handled in terms of pixels or percentages relative to the chart's dimensions.

Examples

// This example demonstrates how to use the X property for an annotation in an accumulation chart:
<SfAccumulationChart>
    <AccumulationChartAnnotations>
        <AccumulationChartAnnotation X="130" Y="180" Region="@(Syncfusion.Blazor.Charts.Regions.Series)">
            <ContentTemplate>
                <div>Annotation positioned at specific pixel coordinates</div>
            </ContentTemplate>
        </AccumulationChartAnnotation>
    </AccumulationChartAnnotations>
    ...
</SfAccumulationChart>

Y

Gets or sets the Y-coordinate value for the annotation in an accumulation chart.

Declaration

public string Y { get; set; }

Property Value

Type	Description
System.String	Specifies the pixel value or percentage of the chart's coordinate space. The default value is zero.

Remarks

This property determines the vertical position of the annotation within the accumulation chart. The Y value is relevant for positioning annotations in charts like pie or doughnut charts, where coordinates are typically handled in terms of pixels or percentages relative to the chart's dimensions.

Examples

// This example demonstrates how to use the Y property for an annotation in an accumulation chart:
<SfAccumulationChart>
    <AccumulationChartAnnotations>
        <AccumulationChartAnnotation X="130" Y="180" Region="@(Syncfusion.Blazor.Charts.Regions.Series)">
            <ContentTemplate>
                <div>Annotation positioned at specific pixel coordinates</div>
            </ContentTemplate>
        </AccumulationChartAnnotation>
    </AccumulationChartAnnotations>
    ...
</SfAccumulationChart>

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder