Quick Start Guide > Tutorials (Java Android) > Tutorial 07 - Adding Annotations
Tutorial 07 - Adding Annotations

In the second tutorial, Creating a Chart, we briefly mentioned the Text Annotations API to write Hello World on the chart.

This API also It lets you to add other UI elements to a chart, like:

  • Lines
  • Text
  • Boxes
  • Arrows
  • Android Views, like, e.g., an ImageView
  • custom Markers
Source code for this tutorial can be found at SciChart.Android.Examples Github Repository.

Chart Annotations in SciChart

The SciChart annotations derive from the IAnnotation interface.

This annotation types include:

Adding Annotations to the Chart

In this tutorial, we are going to build on the previous tutorial. We will add a bulletin type marker (e.g., text, like a stock ticker or news item) to the chart.

To do this, we will modify the updateDataTask.

We create a TextAnnotation and add it to the Annotations collection of the SciChartSurface. We use SciChartBuilder to create and configure the annotation.

The modified code is shown below:

Example Title
Copy Code
final int fifoCapacity = 500;
    final XyDataSeries lineData = sciChartBuilder.newXyDataSeries(Integer.class, Double.class)
        final XyDataSeries scatterData = sciChartBuilder.newXyDataSeries(Integer.class, Double.class)
        TimerTask updateDataTask = new TimerTask() {
            private int x = 0;
            public void run() {
                UpdateSuspender.using(surface, new Runnable() {
                    public void run() {
                        lineData.append(x, Math.sin(x * 0.1));
                        scatterData.append(x, Math.cos(x * 0.1));
                        // New code here
                        // Add an annotation every 100 data points
                        if(x%100 == 0) {
                            TextAnnotation marker = sciChartBuilder.newTextAnnotation()
                                    .withFontStyle(20, ColorUtil.White)
                            // Remove one annotation from the beginning
                            // in the FIFO way
                            if(x > fifoCapacity){
                        // Zoom series to fit the viewport
        Timer timer = new Timer();
        long delay = 0;
        long interval = 10;
        timer.schedule(updateDataTask, delay, interval);

This code from produces this following chart where we have added the letter N as a TextAnnotation as each points where x is a multiple of 100.

Further Reading

You can find out more about the Annotations API in the relevant section of the documentation: What Is an Annotation. Also, there is a couple of examples showcasing annotations in the SciChart Android Examples Suite.

See Also