Search results

Annotation

Annotations are used to mark the specific area of interest in the chart area with texts, shapes or images.

You can add annotations to the chart by using the annotations option. By using the Content option of annotation , you can specify the id of the element that needs to be displayed in the chart area.

annotation.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Title="Olympic Medals">
    <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category">
    </ChartPrimaryXAxis>
  
    <ChartAnnotations>
        <ChartAnnotation  X="France" Y="50" CoordinateUnits="Units.Point">
                       <ContentTemplate>
                           <div>Highest Medal Count</div>
                       </ContentTemplate> 
        </ChartAnnotation>
    </ChartAnnotations>
    
    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" XName="Country" YName="Gold" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</EjsChart>

Annotation

Region

Annotations can be placed either with respect to Series or Chart. By default, it is placed with respect to Chart.

region.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Title="Olympic Medals">
    <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category">
    </ChartPrimaryXAxis>
  
    <ChartAnnotations>
        <ChartAnnotation X="Japan" Y="70" Region="Regions.Series" CoordinateUnits="Units.Point">
            <ContentTemplate>
                <div>Highest Medal Count</div>
            </ContentTemplate>
        </ChartAnnotation>
    </ChartAnnotations>
  
    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" XName="Country" YName="Gold" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</EjsChart>

@code{
public class ChartData
{
    public string Country;
    public double Gold;
}
public List<ChartData> MedalDetails =  new List<ChartData>
    {
    new ChartData{ Country= "USA", Gold=50  },
    new ChartData{ Country="China", Gold=40 },
    new ChartData{ Country= "Japan", Gold=70 },
    new ChartData{ Country= "Australia", Gold=60},
    new ChartData{ Country= "France", Gold=50 },
    new ChartData{ Country= "Germany", Gold=40 },
    new ChartData{ Country= "Italy", Gold=40 },
    new ChartData{ Country= "Sweden", Gold=30 }
    };
}

Region

Co-ordinate Units

The coordinate units of the annotation can be specified either in Pixel or Point.

co-ordinate.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Title="Olympic Medals"> 
        <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category">
        </ChartPrimaryXAxis> 
  
        <ChartAnnotations> 
            <ChartAnnotation X="250" Y="100" CoordinateUnits="Units.Pixel">
             <ContentTemplate>
                <div>Annotation in Pixel</div>
            </ContentTemplate>
            </ChartAnnotation>
        </ChartAnnotations> 
  
        <ChartSeriesCollection> 
            <ChartSeries DataSource="@MedalDetails" XName="Country" YName="Gold" Type="ChartSeriesType.Column">
            </ChartSeries>
        </ChartSeriesCollection>
</EjsChart>

@code{
public class ChartData
{
    public string Country;
    public double Gold;
}
public List<ChartData> MedalDetails =  new List<ChartData>
    {
    new ChartData{ Country= "USA", Gold=50  },
    new ChartData{ Country="China", Gold=40 },
    new ChartData{ Country= "Japan", Gold=70 },
    new ChartData{ Country= "Australia", Gold=60},
    new ChartData{ Country= "France", Gold=50 },
    new ChartData{ Country= "Germany", Gold=40 },
    new ChartData{ Country= "Italy", Gold=40 },
    new ChartData{ Country= "Sweden", Gold=30 }
    };
}

Co-ordinate Unit

Alignment

Annotation provides VerticalAlignment and HorizontalAlignment. The VerticalAlignment provides options to move the content to Top, Bottom or Middle position and the HorizontalAlignment mouses the content to Near, Far or Center.

alignment.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Title="Olympic Medals">
    <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category">
    </ChartPrimaryXAxis>
  
    <ChartAnnotations>
        <ChartAnnotation X="France" Y="50" HorizontalAlignment="Alignment.Near" VerticalAlignment="Position.Top" CoordinateUnits="Units.Point">
            <ContentTemplate>
                <div>Medal count</div>
            </ContentTemplate>
        </ChartAnnotation>
    </ChartAnnotations>
  
    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" XName="Country" YName="Gold" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</EjsChart>

@code{
public class ChartData
{
    public string Country;
    public double Gold;
}
public List<ChartData> MedalDetails =  new List<ChartData>
    {
    new ChartData{ Country= "USA", Gold=50  },
    new ChartData{ Country="China", Gold=40 },
    new ChartData{ Country= "Japan", Gold=70 },
    new ChartData{ Country= "Australia", Gold=60},
    new ChartData{ Country= "France", Gold=50 },
    new ChartData{ Country= "Germany", Gold=40 },
    new ChartData{ Country= "Italy", Gold=40 },
    new ChartData{ Country= "Sweden", Gold=30 }
    };
}

See Also