Annotations in Stacked Chart

[Martin Kopecký]

Hi,

I am struggling with Stacked Column Chart. I am trying to add annotations value for each part of column, but I am not successful.

If value is 0 or bigger, then Annotation value should be visible inside the part of column. If value is 0, then annotation should be not visible.

I was able to do something like this:

But I need something similar like this:

How can I render Annotations inside these bars?

Source Code:

function drawChart(selectedM, callDataTable) {

        var data = new google.visualization.DataTable();

        data.addColumn("string", "month");

        data.addColumn("number", "Events");

        data.addColumn("number", "Emails");

        data.addColumn("number", "Calls");

        

        if (callDataTable) {

          for (

            var i = callDataTable.length - selectedM.value - 1;

            i < callDataTable.length;

            i++

          ) {

            // $scope.stepVar.push(

            //   "inside for -> Graph " + callDataTable[i].value

            // );

            data.addRows([[callDataTable[i].labelM, 4, 3, callDataTable[i].value,]]);

          }

        }

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

        view.setColumns([

          0,

          1,

          2,

          3,

          {

            calc: "stringify",

            sourceColumn: 1,

            type: "string",

            role: "annotation"

          },

          {

            calc: "stringify",

            sourceColumn: 2,

            type: "string",

            role: "annotation"

          },

          {

            calc: "stringify",

            sourceColumn: 3,

            type: "string",

            role: "annotation"

          }

        ]);

        var options = {

          bar: {

            groupWidth: "85%"

          },

          isStacked: true,

          legend: { position: "none" },

          colors: ["#fa9616","blue", "green"],

          hAxis: {

            direction: 1,

            textPosition: "out",

            slantedText: true,

            slantedTextAngle: 30,

            baselineColor: "none",

            ticks: []

          },

          vAxis: {

            baselineColor: "none",

            gridlines: { count: 4}

          },

          chartArea: {

            width: "90%",

            height: "70%"

          },

          annotations: {

            alwaysOutside: false,

            textStyle: {

              fontName: "Times-Roman",

              fontSize: 15,

              bold: true,

              italic: false,

              color: "#871b47",

              opacity: 0.9

            }

          }

        };

        var chart = new google.visualization.ColumnChart(

          document.getElementById("columnchart_values")

        );

        chart.draw(view, options);

      }

Could you please help me to solve it?

Martin