How to avoid overlapping in Google Line chart annotations

Question

The annotations in the following Google line chart output are overlapping each other. How can I separate those?

It would be great if I can re-position the annotations like for first line (blue in the screenshot) I can bring the annotations beneath it and for the top most line put the annotations above it.

I am not sure if the above it possible without implementing any logic which I don't know! But at least if I can separate the annotations and make it clear to understand which annotation is for what, that would be excellent for now.

Answer 1

in the chart options, you can adjust the length of the annotation stem, per series.

to move the annotations below the line, you would use a negative stem length.

add the annotation options, to the series option...

var options = {
  series: {
    0: {  // <-- series 0
      annotations: {
        stem: {
          length: -10
        }
      }      
    },
    1: {  // <-- series 1
      annotations: {
        stem: {
          length: 10
        }
      }      
    },
    2: {  // <-- series 2
      annotations: {
        stem: {
          length: 20
        }
      }      
    }
  }
};