Google Chart API (not Visualization API): How to get rid of annotation lines

Question

I'm trying to generate charts using Google Chart API and getting charts as images. Note that I'm rendering the chart on server side and not on browser side (ie not using the Google Visualization API).

In some of my charts, I draw a vertical line, representing a target. As the target is the same for all my different x values, I just need to label it on top of my graph, as shown in the image below:

I can manage to display only the top label, BUT: - How can I remove the small annotation line? Especially when no labels are displayed! - How can I move this label on top of the line instead of right (to prevent overlap with bar labels if e.g. A = 95)? - How can I format this unique label (ie set the text in a box with a background color)

Here is the code I used to generate the chart images:

var annotations = [0, 
                   1, {calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"},
                   2, {calc: "stringify", sourceColumn: 3, type: "string", role: "annotation"}, 
                   ];

var dataViewDefinition = Charts.newDataViewDefinition().setColumns(annotations).build();

var data = Charts.newDataTable()
  .addColumn(Charts.ColumnType.STRING, 'x')
  .addColumn(Charts.ColumnType.NUMBER, 'act')
  .addColumn(Charts.ColumnType.NUMBER, 'tgt')
  .addColumn(Charts.ColumnType.STRING, 'tgt_lbl')
  .addRow(['A', 90, 95, '95'])
  .addRow(['B', 80, 95, ''])
  .addRow(['C', 100, 95, ''])
  .build();


  var chart = Charts.newBarChart()
    .setDataTable(data)
    .setRange(0, 150)
    .setOption('series', {
      1: { lineWidth: 1, type: 'line'}
    })
    .setOption('chartArea', {'width': '80%', 'height': '100%'})
    .setColors(['#D9D9D9', '#0085AD'])
    .setOption('annotations', { textStyle: { color: '#000000' }})
    .setDataViewDefinition(dataViewDefinition)
    .build();


  var folder=DriveApp.getFolderById('Folder ID');
  folder.createFile(chart.getAs('image/png')).setName('Image Name');

I saw a trick to remove the annotations line when using the Visualization API by modifying the generated SVG, but how to proceed when using the Chart API ?

Thx for your help!

Answer 1

you can try the following options...

.setOption('annotations.stem.color', 'transparent')

or...

.setOption('annotations.stem.length', 0)

Answer 2

---

For an output like the above I tried a different approach:

If you think about it, the 95 target is not a data series, it is a static value common for all your series. So a different approach is to set a vertical line (tick) on the horizontal axis representing the target.

An example:

function createDataView(){
  // Build a DataTable with data
  var data = Charts.newDataTable();
  data.addColumn(Charts.ColumnType.STRING, 'Domain / Series');
  data.addColumn(Charts.ColumnType.NUMBER, 'Sales');
  data.addRow(['A', 90]);
  data.addRow(['B', 80]);
  data.addRow(['C', 100]);
  data.build();
  return data
}

function chartDataTable(dataTable) {
  
  // Create a ChartBuilder with the data 
  var chartBuilder = Charts.newBarChart().setDataTable(dataTable);
  chartBuilder.setOption('title','My chart');
  chartBuilder.setOption('titleTextStyle',{ 
                                        'fontName': 'AudioWide',
                                        'fontSize': 16,
                                        'bold': true,
                                        'italic': false 
                                      });
  chartBuilder.setOption('hAxes', {0:{'title':'Sales in USD',
                                      'titleTextStyle':{ 
                                        'fontName': 'AudioWide',
                                        'fontSize': 14,
                                        'bold': true,
                                        'italic': false 
                                      },
                                      'ticks':[{
                                        'v':95, 
                                        'f':'Target 95$'
                                      }],
                                      'gridlines':{
                                        'color':'black',
                                        'count': 5
                                      },
                                      'minorGridlines':{
                                        'color':'grey',
                                        'count': 0
                                      },
                                      'textPosition':'out',
                                      'textStyle':{ 
                                        'fontName': 'AudioWide',
                                        'fontSize': 12,
                                        'color':'magenta',
                                        'bold': true,
                                        'italic': true 
                                      }
                                     },
                                   1:{}
                                  }
                        );
  chartBuilder.setOption('vAxes', {0:{'title':'Accounts',
                                      'titleTextStyle':{ 
                                        'fontName': 'AudioWide',
                                        'fontSize': 14,
                                        'bold': true,
                                        'italic': false 
                                      },
                                      'textPosition':'out'
                                     }
                                  }
                        );
  
  // Asign data series to axis
  chartBuilder.setOption('series', {
    0:{'targetAxisIndex':0},
    1:{'targetAxisIndex':0, 
       'visibleInLegend':false       
      }
  });
  
  // Asign a range for the chart
  chartBuilder.setRange(50,150);
  
  
  // Create the dataView we will use
  var dataView = Charts.newDataViewDefinition();
  
  // Create column Indexes for the Data view
  // indexes start at 0
  var calculated_col_obj = {
    calc: 'stringify',
    type: 'string',
    label: '',
    id: '',
    sourceColumn: 1,
    role: 'annotation',
  };
  
  var columnIndexes = [0,1,calculated_col_obj]; 
  
  // Build the data view with the column indexes we require
  dataView.setColumns(columnIndexes).build();
  
  // set the dataview for this chart
  chartBuilder.setDataViewDefinition(dataView)
  
  //  Build the chart
  var chart = chartBuilder.build();
  
  // save chart in Drive folder
  var folder=DriveApp.getFolderById('<YOUR-FOLDER-ID>');
  folder.createFile(chart.getAs('image/png')).setName('MyChartFromDataView');
}

Finally:

chartDataTable(createDataView())