Add labels for point in google charts - charts

Question

Does google charts support the ability to add labels to a chart? I need to add labels to the chart, but I don't know how to do it.
I'm using such function for chart draw:
function drawChart(node, rows) {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Index');
data.addRows(rows);
var options = {
titleTextStyle: {
color: '#00FF00',
},
height: 350,
width: $('#' + node).width(),
pointsVisible: true,
colors:['#00FF00'],
backgroundColor: '#1b1b1b',
legend: {position: 'right', textStyle: {color: '#fff', fontSize: 12}},
pointShape: 'square',
annotations: {
textStyle: {
fontName: 'Times-Roman',
fontSize: 18,
bold: true,
italic: true,
color: '#e5d385',
},
stem: {
length: 0
}
},
hAxis: {
title: "Date",
titleTextStyle: {
color: '#fff'
},
format: 'dd.MM.yyyy',
gridlines: {count: 15, color: '#7d7d7d'},
baselineColor: '#fff',
slantedTextAngle: 45,
slantedText: true,
baselineColor: '#fff',
minorGridlines:{
color: "#494949"
},
textStyle:{color: '#FFF'},
ticks: ticksX
},
vAxis: {
title: "Index",
titleTextStyle: {
color: '#fff'
},
gridlines: {color: '#7d7d7d'},
minValue: 0,
baselineColor: '#fff',
minorGridlines:{
color: "#494949"
},
textStyle:{color: '#FFF'},
ticks: ticksY
},
};
var dataView = new google.visualization.DataView(data);
dataView.setColumns([
// reference existing columns by index
0, 1,
// add function for line color
{
calc: function(data, row) {
var colorDown = '#FF0000';
var colorUp = '#00FF00';
if ((row === 0) && (data.getValue(row, 1) < data.getValue(row + 1, 1))) {
return colorDown;
} else if ((row > 0) && (data.getValue(row - 1, 1) < data.getValue(row, 1))) {
return colorDown;
}
return colorUp;
},
type: 'string',
role: 'style',
}
]);
var chart = new google.visualization.LineChart(document.getElementById(node));
chart.draw(dataView, options);
}
I can't find information how to add labels to a chart. All documentation contains information how to add labels to the axes of the chart. I need to add labels above the line chart points.
Can you help me with it?

Answer 1

annotations, or labels, are added using an annotation column role,
similar to the style column role, already being used.
here, I add an annotation column role to the data view,
to display labels for the min & max values...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var rows = [];
var oneDay = (24 * 60 * 60 * 1000);
var currentEndDate = new Date();
var currentStartDate = new Date(currentEndDate.getTime() - (oneDay * 365.25));
for (var i = currentStartDate.getTime(); i <= currentEndDate.getTime(); i = i + oneDay) {
var direction = (i % 2 === 0) ? 1 : -1;
var rowDate = new Date(i);
rows.push([rowDate, rowDate.getMonth() + (rowDate.getDate() * direction)]);
}
drawChart('chart_div', rows);
});
function drawChart(node, rows) {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Index');
data.addRows(rows);
var options = {
titleTextStyle: {
color: '#00FF00',
},
height: 350,
width: $('#' + node).width(),
pointsVisible: true,
colors:['#00FF00'],
backgroundColor: '#1b1b1b',
legend: {position: 'right', textStyle: {color: '#fff', fontSize: 12}},
pointShape: 'square',
annotations: {
textStyle: {
fontName: 'Times-Roman',
fontSize: 18,
bold: true,
italic: true,
color: '#e5d385',
},
stem: {
length: 0
}
},
hAxis: {
title: "Date",
titleTextStyle: {
color: '#fff'
},
format: 'dd.MM.yyyy',
gridlines: {count: 15, color: '#7d7d7d'},
baselineColor: '#fff',
slantedTextAngle: 45,
slantedText: true,
baselineColor: '#fff',
minorGridlines:{
color: "#494949"
},
textStyle:{color: '#FFF'}
},
vAxis: {
title: "Index",
titleTextStyle: {
color: '#fff'
},
gridlines: {color: '#7d7d7d'},
minValue: 0,
baselineColor: '#fff',
minorGridlines:{
color: "#494949"
},
textStyle:{color: '#FFF'}
},
};
var range = data.getColumnRange(1);
var dataView = new google.visualization.DataView(data);
dataView.setColumns([
// reference existing columns by index
0, 1,
// add function for line color
{
calc: function(data, row) {
var colorDown = '#FF0000';
var colorUp = '#00FF00';
if ((row === 0) && (data.getValue(row, 1) < data.getValue(row + 1, 1))) {
return colorDown;
} else if ((row > 0) && (data.getValue(row - 1, 1) < data.getValue(row, 1))) {
return colorDown;
}
return colorUp;
},
type: 'string',
role: 'style',
},
// add annotation
{
calc: function(data, row) {
var value = data.getValue(row, 1);
if (value === range.min) {
return 'Min: ' + data.getFormattedValue(row, 1);
} else if (value === range.max) {
return 'Max: ' + data.getFormattedValue(row, 1);
}
return null;
},
type: 'string',
role: 'annotation',
}
]);
var chart = new google.visualization.LineChart(document.getElementById(node));
chart.draw(dataView, options);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://www.gstatic.com/charts/loader.js'></script>
<div id="chart_div"></div>