Display annotation text in google charts for max and min values only

Question

How to display annotation text in google charts for max and min values only. I do not want to display and annotation message for other values please see image for info

Note :Just want to show text for circled points

Answer 1

It could be achieved using google.visualization.DataView.setColumns function, the example below shows how to display annotation text in google charts for max and min values only:

//add calculated column to print annotation only for min/max values
view.setColumns([0,1,
    {
        role: "annotation",
        type: "string",
        calc: function (dt, row) { 
            var range = dt.getColumnRange(1);
            var curVal = dt.getFormattedValue(row, 1);
            if(curVal == range.min || curVal == range.max)
                return curVal; 
            return null; 
        }
    }
]);

Complete example

google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);

function drawChart() {
   
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Month'); // Implicit domain label col.
    data.addColumn('number', 'Sales'); // Implicit series 1 data col.
   
    data.addRows([
        ['April', 1000],
        ['May', 1170],
        ['June', 660],
        ['July', 1030]
    ]);

    var view = new google.visualization.DataView(data);

    var options = {
        title: 'Company Sales',
    };

    //add calculated column to print annotation only for min/max values
    view.setColumns([0,1,
        {
            role: "annotation",
            type: "string",
            calc: function (dt, row) { 
                var range = dt.getColumnRange(1);
                var curVal = dt.getFormattedValue(row, 1);
                if(curVal == range.min || curVal == range.max)
                    return curVal; 
                return null; 
            }
        }
    ]);

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
    chart.draw(view, options);
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="curve_chart" style="width: 900px; height: 500px"></div>