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>

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>

• javascript
• google-api
• google-visualization

1 Answer 1

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