How not to overlap labels(Annotations) in google Harts?

Asked

Viewed 489 times

2

I am developing a line chart, where the labels(Annotations) are fixed, but some points are very close to each other, thus superimposing a label on the other.

I wonder if you have any way to change the position of labels dynamically or statically(positioning in different places)?

Remembering that I would like to keep them always fixed, that is, always appearing, without the need to put the mouse on top of the dots so that the information appears.

Follow an example of how it is: Gráfico Exemplo - Rótulos sobrepondo os outros

2 answers

1


uses Stem... I was having the same difficulty... set item 1 positive and item 2 negative, this way Annotation 1 will be on top of the axis, and 2 below...

series: {
              0: { annotations: { stem: { color: "transparent", length: 5}, alwaysOutside: true, textStyle: { color:'red',  bold: true, fontSize: 30 } } },
              1: { annotations: { stem: { color: "transparent", length: -40},  alwaysOutside: true, textStyle: { color:'yellow', bold: true, fontSize: 30 } } },
            }                
        };

1

In options, inside annotations, of your adding chart alwaysOutside: true. Leave the notes outside.

annotations: {
     textStyle: {
         color: 'black',
         fontSize: 11,
     },
     alwaysOutside: true
}

In that part of Documentation, talks about annotations.

  • Thanks for the answer, but that’s not what I want. I may have expressed myself badly. I want one Annotation not to overlap the other. What you have indicated is for the Annotation to stay out of the columns. Watch what the documentation says: Annotations.alwaysOutside In Bar and Column Charts, if set to true, draws all Annotations Outside of the Bar/Column. Type: Boolean Default: false

  • @Amarildomartins, I don’t think you can solve this bug with the functions of google Charts. You’ll have to overwrite SVG or do it with CSS.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.