How to display the point value in the line chart stroke of google api chart?

google-api, google-visualization, javascript

Solution

You simply have to correct the order of the column defintion:

data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn({type: 'number', role: 'annotation'});

Edit: See asgallant's comment on the correct order of columns. My text below isn't fully correct.

Although Google's documentation isn't that clear about it, you should always specify the x-axis first, then the values and put stuff like annotations at the end.

Problem

I am using linechart in google api chart. In this chart i need to display the vaxis value above point.but i am using annotation.It's create point value in near haxis .But i need above the point. Actual chart: Expected chart: ``` <script type="text/javascript"> google.load("visualization", "1", {packages: ["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Year'); data.addColumn('number', 'Sales'); data.addColumn({type: 'number', role: 'annotation'}); data.addRows([ ['2008', 23, 23], ['2009', 145, 145], ['2010', 245, 245], ['2011', 350, 350] ]); var options = { width: 400, height: 100, pointSize: 4, legend: {position: 'none'}, chartArea: { left: 0, top: 10, width: 400, height: 50}, vAxis: { baselineColor: '#fff', gridlines: {color: 'transparent'} }, tooltip: {trigger: 'none'}, annotation: { 1: { style: 'none' } } }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> ```

Original source