Show line legend labels inside google chart - google-visualization

Question

I'd like to show labels next to each line in a google chart line graph. Can someone point me to the options I should be setting? anything to do with annotations?

Answer 1

you can use annotations to label a point in a series.
annotations are added as a column.
data.addColumn({role: 'annotation', type: 'string'});
each annotation column should follow the value column it represents.
looking at the image in the question, it appears you only want one annotation, or label, per series.
as such, set the value for the annotation column to null, except for the last row.
see following example...
annotations have a few settings that can be customized, see the configuration options for the particular chart...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Week');
data.addColumn('number', 'NO');
data.addColumn({role: 'annotation', type: 'string'});
data.addColumn('number', 'UK');
data.addColumn({role: 'annotation', type: 'string'});
data.addColumn('number', 'NL');
data.addColumn({role: 'annotation', type: 'string'});
data.addColumn('number', 'DK');
data.addColumn({role: 'annotation', type: 'string'});
data.addColumn('number', 'SE');
data.addColumn({role: 'annotation', type: 'string'});
data.addColumn('number', 'FI');
data.addColumn({role: 'annotation', type: 'string'});
data.addColumn('number', 'IL');
data.addColumn({role: 'annotation', type: 'string'});
data.addColumn('number', 'US 2014');
data.addColumn({role: 'annotation', type: 'string'});
var currentWeek = 27;
var ticks = [];
for (var i = 0; i < 52; i++) {
ticks.push(i + 1);
var row = [];
if (i < currentWeek) {
row.push(i + 1);
for (var x = 1; x < data.getNumberOfColumns(); x=x+2) {
var value = x * (Math.pow(i, 3));
var annot = null;
if (i === (currentWeek - 1)) {
annot = data.getColumnLabel(x) + ' - ' + value;
}
row.push(value, annot);
}
data.addRow(row);
}
}
new google.visualization.LineChart(document.getElementById('chart_div')).draw(data, {
annotations: {
stem: {
length: 0
}
},
chartArea: {
width: '80%'
},
hAxis: {
format: 'Week 0',
ticks: ticks
},
height: 600
});
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>