How to draw scatter chart with labels on google chart?

Question

Look at this Google chart in spreadsheet .

How to draw this names on chart rather than tooltips? Is there need to change in data or options given to Google chart?

You can check this plunker .

var chart2 = {};
chart2.type = "ScatterChart";
chart2.cssStyle = "height:400px; width:500px;";
chart2.data = [
      ['Age', 'Weight'],
      [ {'v':8,'f':'Name 1'},      -12],
      [ {'v':-4,'f':'Name 2'},      5.5],
      [ {'v':11,'f':'Name 3'},     14],
      [ {'v':-4,'f':'Name 4'},      -5],
      [ {'v':3,'f':'Name 5'},      3.5],
      [ {'v':6.5,'f':'Name 6'},    -7]
    ];

chart2.options = {
    "title": "Age Vs Maturity",
    "isStacked": "true",
    "fill": 20,
    "hAxis": {"title": "Age", minValue: -15, maxValue: 15},
    "vAxis": {"title": "Maturity", minValue: -15, maxValue: 15},
    "legend": 'none'
};

$scope.chart2 = chart2;

Answer 1

you can use an annotation column to add labels to a scatter chart...

see following example...

 google.charts.load('current', { callback: function () { var data = google.visualization.arrayToDataTable([ ['Age', 'Weight', {role: 'annotation'}], [ 8, 12, 'Point 1'], [ 1, 5.5, 'Point 2'], [ 11, 14, 'Point 3'], [ 4, 5, 'Point 4'], [ 3, 3.5, 'Point 5'], [ 6.5, 7, 'Point 6'] ]); var options = { title: 'Age vs. Weight comparison', hAxis: {title: 'Age', minValue: 0, maxValue: 15}, vAxis: {title: 'Weight', minValue: 0, maxValue: 15}, legend: 'none' }; var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); chart.draw(data, options); }, packages:['corechart'] }); 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>