Add labels for point in google 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?

WhiteHat WhiteHat · Accepted Answer · 2019-06-25T16:59:10

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>

Add labels for point in google charts

1 Answers