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

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:

  • Google Transliterate Result not updating in the scope for use in Angular Controller
  • Google Visualization stacked bar chart: colors and labels for each value
  • Google Charts API datetime unix format?
  • google.load - and message “google is not defined”
  • Get the position where user indicates
  • Font Family Selection With Google Charts?
  • enter image description here

    Expected chart:

    enter image description here

        <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>
    

  • Automate the Import Function from Google Sheets
  • Google Charts API datetime unix format?
  • Checking User Login Status with Google
  • Google+ Sign-In with JavaScript callback issue
  • How to check if user is logged in or not with “Google Sign In” (OAuth 2.0)
  • Is there a link to the “latest” jQuery library on Google APIs?
  • One Solution collect form web for “How to display the point value in the line chart stroke of google api chart?”

    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.