如何避免Google条形图中的注释重叠？

Question

我想生成带有2个注释的条形图。这是我的代码：

data = new google.visualization.DataTable();
data.addColumn('string', 'State');
data.addColumn({type:'string', role:'annotation'});
data.addColumn('number');
data.addRow(['Current State Run', '', 158468874]);
future_state_percent = [];
data.addRow(['Dynamic Container', '', 14121408]);
future_state_percent['Dynamic Container'] = (14121408 / 28481712) * 100;
data.addRow(['Public Cloud', '', 14360304]);
future_state_percent['Public Cloud'] = (14360304 / 28481712) * 100;

view = new google.visualization.DataView(data);
view.setColumns([0, 1,
                { calc: function(dt, row) {
                      return get_percent(dt, row);
                },
                type: "string",
                role: "annotation" },
                2, 
                { calc: "stringify",
                  sourceColumn: 2,
                  type: "string",
                  role: "annotation" },
               ]);

function get_percent(dataTable, row) {
    if (row == 0) {
        return ''
    }
    else {
        return future_state_percent[data.getValue(row, 0)].toFixed(2) + '%';
    }
}

在作品中，但注解并非在所有情况下都以相同的顺序呈现，有时它们会彼此呈现，例如：

如何强制始终以相同的顺序显示它们并防止出现第一种情况下出现的效果？

我尝试了在这里找到的建议：How to avoid overlapping label's on the Bar in google bar charts?来设置茎长，但这没有效果。

以下是显示我的代码正在运行的小提琴：

https://jsfiddle.net/3t8ps1h5/1/

是否可能因为我正在使用视图而导致词干设置不起作用？有没有一种方法可以将注释设置为使用HTML，然后我可以使用带有<br/>的单个注释？