Plotly: Display total sum of number on top of stacked bar chart

Question

Let's use the example in the following URL:https://jsfiddle.net/d3fzsw25/

I would like to display the total sum on top of the stacked bar chart. The value should display 45.

I tried to use the "Text" and "Annotation" method to display my total sum.

One sample function to count the total:

    function getTotalY(graphData) {
    var total = [],
        undefined;
    for (var i = 0, n = graphData.length; i < n; i++) {
        var arg = graphData[i].y
        for (var j = 0, n1 = arg.length; j < n1; j++) {
            total[j] = (total[j] == undefined ? 0 : total[j]) + arg[j];
        }
    }
    return total.reduce(function (a, b) {
        return a + b;
    });
}

To display the annotation:

    function countTotal(graph) {
    var graphData = graph.data; //Loaded traces
    //making new layout
    var newLayout = {
  x: 'giraffes',
  y:getTotalY(graphData),
  mode: 'markers+text',
  name: 'Markers and Text',
  text: getTotalY(graphData),
  textposition: 'top',
  type: 'scatter'
  };
    Plotly.update('myDiv', graphData, newLayout)
}

Is there any mistake I made in the JS? Any suggestion will be appreciated! Thank you.