Annotations for grouped bar charts

[ashishbaghudana]

I was trying to create annotations for grouped bar charts - where each bar has a specific data label.

An example is as follows: https://plot.ly/~ashish.baghudana/49.embed

However, as you see the data labels are not centered individually, but overall. I was wondering if there is a workaround to this, rather than annotating manually.

Appreciate the help!

The code itself is a simple modification of the examples in tutorial.

import plotly.plotly as py
import plotly.graph_objs as go

x = ['Product A', 'Product B', 'Product C']
y1 = [20, 14, 23]
y2 = [12, 18, 29]

annotations1 = [dict(
            x=xi,
            y=yi,
            text=str(yi),
            xanchor='auto',
            yanchor='bottom',
            showarrow=False,
        ) for xi, yi in zip(x, y1)]
annotations2 = [dict(
            x=xi,
            y=yi,
            text=str(yi),
            xanchor='auto',
            yanchor='bottom',
            showarrow=False,
        ) for xi, yi in zip(x, y2)]
annotations = annotations1 + annotations2

trace1 = go.Bar(
    x=x,
    y=y1,
    name='SF Zoo'
)
trace2 = go.Bar(
    x=x,
    y=y2,
    name='LA Zoo'
)
data = [trace1, trace2]
layout = go.Layout(
    barmode='group',
    annotations=annotations
)
fig = go.Figure(data=data, layout=layout)
plot_url = py.plot(fig, filename='stacked-bar')

[chriddyp]

Thanks for reporting @ashishbaghudana ! There isn't a good workaround right now. Could you re-open this issue in the plotly.js repo? Once better support gets added there, it'll be available in here in python.

[aleburato]

I might have found a decent workaround (I use the JS library but, you get the point):

var data = [];

var numOfPoints = 3;
var numOfTraces = 6;
var bargap = 0.4;

var categories = [];

for (p = 0; p < numOfPoints; p++) {
    categories.push("cat " + p);
}

for (var t = 0; t < numOfTraces; t++) {
    var values = [];
    for (p = 0; p < numOfPoints; p++) {
        values.push(Math.round((Math.random() - 0.5) * 100));
    }
    var trace = {
        x: categories,
        y: values,
        type: "bar",
        name: "Series " + t
    }

    data.push(trace);
}

var annotations = [];
var delta = (1 - bargap) / numOfTraces;
var pivot = Math.floor(numOfTraces / 2);

for (var i = 0; i < categories.length; i++) {
    for (var j = 0; j < data.length; j++) {
        var offset = j - pivot;
        if ((numOfTraces % 2) === 0) {
            offset += 0.5;
        }
        var x = i + offset * delta;
        var y = data[j].y[i];
        var a = {
            x: x,
            y: y,
            text: y,
            xanchor: 'center',
            yanchor: y >= 0 ? 'bottom' : 'top',
            showarrow: false
        };
        annotations.push(a);
    }
}

var layout = {
    barmode: 'group',
    bargroupgap: 0.02,
    bargap: bargap,
    annotations: annotations
};

Plotly.newPlot('myDiv', data, layout);

[tarunparmar]

Is there any workaround for this in R ?

[salim-b]

Is there any workaround for this in R ?

By now it's properly supported, just set textposition.

[GeorgeFlorian]

By now it's properly supported, just set textposition.

This hasn't been fixed/added.
textposition applies only to the text properties of each trace and annotations represent a layout property.