CODEWITHSUNDEEP
google-visualization
user433342
user433342

Reputation: 1050

Show line legend labels inside google chart

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?

enter image description here

Upvotes: 2

Views: 1182

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

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>

Upvotes: 1

Related Questions