Blazor [Preview]
Demos
Support
Forum
Download
Search results

Annotation

The annotations are used to mark the specific area of interest in the chart with texts, shapes or images. By using the content option of annotation property, you can specify the Id of the HTML element that needs to be displayed in the chart.

annotation.razor
<EjsAccumulationChart Title="Mobile Browser Statistics">
    <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
  
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users" Name="Browser">
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
  
    <AccumulationAnnotationSettings>
        <AccumulationChartAccumulationAnnotation  X="iPhone" Y=19 CoordinateUnits="@Syncfusion.EJ2.Blazor.Charts.Units.Point" Region="@Syncfusion.EJ2.Blazor.Charts.Regions.Series">
            <ContentTemplate>
                <div style='border: 1px solid black;background-color:red;padding: 5px 5px 5px 5px'>19</div>
            </ContentTemplate>
        </AccumulationChartAccumulationAnnotation>
    </AccumulationAnnotationSettings>
</EjsAccumulationChart>

@code{
    public class Statistics
    {
        public string Browser;
        public double Users;
    }

    public List<Statistics> StatisticsDetails = new List<Statistics> 
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };
}

Annotation

Region

The annotation can be placed with respect to Series or Chart.

region.razor
<EjsAccumulationChart Title="Mobile Browser Statistics">
    <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
  
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users" Name="Browser">
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
  
    <AccumulationAnnotationSettings>
        <AccumulationChartAccumulationAnnotation  X=350 Y=180 CoordinateUnits="@Syncfusion.EJ2.Blazor.Charts.Units.Pixel" Region="@Syncfusion.EJ2.Blazor.Charts.Regions.Chart">
            <ContentTemplate>
                <div style='border: 1px solid black;background-color:red;padding: 5px 5px 5px 5px'>19</div>
            </ContentTemplate>
        </AccumulationChartAccumulationAnnotation>
    </AccumulationAnnotationSettings>
</EjsAccumulationChart>

@code{
    public class Statistics
    {
        public string Browser;
        public double Users;
    }

    public List<Statistics> StatisticsDetails = new List<Statistics> 
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };
}

Region

Co-ordinate Units

Specifies the coordinate units of an annotation either in Pixel or Point.

co-ordinate.razor
<EjsAccumulationChart Title="Mobile Browser Statistics">
    <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
  
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users" Name="Browser">
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>

  <AccumulationAnnotationSettings>
    <AccumulationChartAccumulationAnnotation  X="Chrome" Y="37" CoordinateUnits="@Syncfusion.EJ2.Blazor.Charts.Units.Point" Region="@Syncfusion.EJ2.Blazor.Charts.Regions.Series">
       <ContentTemplate>
         <div style='border: 1px solid black;background-color:red;padding: 5px 5px 5px 5px'>Chrome:37</div>
      </ContentTemplate>
    </AccumulationChartAccumulationAnnotation>
  </AccumulationAnnotationSettings>
</EjsAccumulationChart>

@code{
    public class Statistics
    {
        public string Browser;
        public double Users;
    }

    public List<Statistics> StatisticsDetails = new List<Statistics> 
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };
}

Co-ordinate Units

Alignment

The annotations can be moved vertically and horizontally from its default position by using VerticalAlignment or HorizontalAlignment properties. The VerticalAlignment provides options to move the content to Top, Bottom or Middle and the HorizontalAlignment mouses the content to Near, Far or Center.

alignment.razor
<EjsAccumulationChart Title="Mobile Browser Statistics">
    <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
  
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users" Name="Browser">
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
  
    <AccumulationAnnotationSettings>
        <AccumulationChartAccumulationAnnotation  X="iPhone" Y=19 CoordinateUnits="@Syncfusion.EJ2.Blazor.Charts.Units.Point" 
                             VerticalAlignment="Position.Top" HorizontalAlignment="Alignment.Near" Region="@Syncfusion.EJ2.Blazor.Charts.Regions.Series">
            <ContentTemplate>
                <div style='border: 1px solid black;background-color:red;padding: 5px 5px 5px 5px'>iPhone:19</div>
            </ContentTemplate>
        </AccumulationChartAccumulationAnnotation>
    </AccumulationAnnotationSettings>
</EjsAccumulationChart>

@code{
    public class Statistics
    {
        public string Browser;
        public double Users;
    }

    public List<Statistics> StatisticsDetails = new List<Statistics> 
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };
}
Previous
Next