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

I am using a line chart in a google api chart. In this diagram, I need to display the vaxis value above the point. But I use annotation. I am creating a point value in the near corner. But I need a higher point.

Actual chart:

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>
+4
source share
1 answer

You just need to fix the column definition order:

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

Edit: See comment for proper column order. My text below is not entirely correct.

Google , x , .

+1

All Articles