0

I'm using Visualization: Column Chart and I have the annotations set to 'line', what I want to do is move the position of the annotations so they show above the bar, is this possible?

You can see the issue I am having in the image below:-

enter image description here

My code is currently as follows:-

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1,
   { calc: "stringify",
     sourceColumn: 1,
     type: "string",
     role: "annotation" },
   2]);                    

var options = {
    title: "{{$sample->name}} {{$test->name}} 'z' scores",
    height: 400,
    annotations: {
        style: 'line',
          textStyle: {
          fontSize: 10,
        },     
    },                         
    bar: {groupWidth: "95%"},                    
    legend: { position: "none" },
    tooltip: {isHtml: true, ignoreBounds: true},             
};

If you have a look at the following JSFIDDLE, I basically just want to move the annotations directly above the bar, so that they don't obstruct the bar.

Any help would be much appreciated.

nsilva
  • 5,184
  • 16
  • 66
  • 108
  • unfortunately, no standard options will change the position of the annotation, when set to `'line'` -- when using `'point'`, you can set `alwaysOutside: true` -- you could move the annotation manually with script, so long as you're not planning to use `getImageURI` to create an image of the chart... – WhiteHat Aug 23 '17 at 21:47
  • Thanks @WhiteHat - `alwaysOutside: true` doesn't seem to have any effect on the positions, how would you go above moving all annotations manually with script, if I could move all annotations +25px on the 'x' axis and -5px on the 'y' axis that would solve my problem. – nsilva Aug 24 '17 at 08:09
  • you can use jQuery to modify the charts svg, once it's _ready_ event fires -- I will give an example in a day or two – WhiteHat Aug 24 '17 at 20:58
  • the example will be similar to [this answer](https://stackoverflow.com/a/43846554/5090771), but still need to figure out how to move the line (`` element) by changing its `'d'` attribute... – WhiteHat Aug 25 '17 at 00:19
  • Thanks @WhiteHat - just trying to get the negative values to show underneath following your example here; https://stackoverflow.com/questions/45520457/google-chart-negative-positive-values-annotation-position - but can't seem to get this to work – nsilva Aug 25 '17 at 10:43

0 Answers0