Annotations Google Chart - Stacked Horizontal

Question

I’m using the Google Chart to develop some graphics. I have the following chart working:

<script src="https://www.google.com/jsapi?autoload={%27modules%27:[{%27name%27:%27visualization%27,%27version%27:%271.1%27,%27packages%27:[%27bar%27]}]}.js"></script>

<div id="chart_div"></div>

<script>

  google.setOnLoadCallback(drawChart);
    function drawChart() {
             var tdata = google.visualization.arrayToDataTable([
                   ['Estados', 'Concluídos', 'Total'],
                   ['MS', 1, 262],
                   ['RJ', 70, 205],
                   ['SP', 57, 176],
                   ['MG', 0, 82]
                ]);
                var options = {
                    chart: {
                        title: 'Gráfico Clientes',
                        subtitle: 'Total Clientes',
                    },
                    bars: 'horizontal', // Required for Material Bar Charts.
                    hAxis: { format: 'decimal' },
                    height: 400,
                    colors: ['#1b9e77', '#d95f02'],
                    isStacked: true
                };

                var chart = new google.charts.Bar(document.getElementById('chart_div'));

                chart.draw(tdata, google.charts.Bar.convertOptions(options));
        };
</script>

What I need is to add the total value in front of each bar, staying like the image below:

I tried to use {type:'number', role:'annotation'} to add the value at the end, but does not return any error and/or information.

<script src="https://www.google.com/jsapi?autoload={%27modules%27:[{%27name%27:%27visualization%27,%27version%27:%271.1%27,%27packages%27:[%27bar%27]}]}.js"></script>

<div id="chart_div"></div>

<script>

  google.setOnLoadCallback(drawChart);
    function drawChart() {
             var tdata = google.visualization.arrayToDataTable([
                   ['Estados', 'Concluídos', 'Total', {type:'number', role:'annotation'}],
                   ['MS', 1, 262, 263],
                   ['RJ', 70, 205, 205],
                   ['SP', 57, 176, 233],
                   ['MG', 0, 82, 82]
                ]);
                var options = {
                    chart: {
                        title: 'Gráfico Clientes',
                        subtitle: 'Total Clientes',
                    },
                    bars: 'horizontal', // Required for Material Bar Charts.
                    hAxis: { format: 'decimal' },
                    height: 400,
                    colors: ['#1b9e77', '#d95f02'],
                    isStacked: true
                };

                var chart = new google.charts.Bar(document.getElementById('chart_div'));

                chart.draw(tdata, google.charts.Bar.convertOptions(options));
        };
</script>

With other types of graphics works formally, as can be seen in this example.

Answer 1

In options, inside annotations, of your adding chart alwaysOutside: true.

var options = {
    chart: {
        title: 'Gráfico Clientes',
        subtitle: 'Total Clientes',
    },
    bars: 'horizontal', // Required for Material Bar Charts.
    hAxis: { format: 'decimal' },
    height: 400,
    colors: ['#1b9e77', '#d95f02'],
    isStacked: true,
    annotations: {
        textStyle: {
            color: 'black',
            fontSize: 11,
        },
        alwaysOutside: true
    }
};