Grouped horizontal bar graph x axes tick labels

plotly.js
1

Hi,

How do I change the tick labels for a grouped horizontal bar chart? From the sample code below, the xaxes tick labels would always show the ranges for trace2. What I want to do is to show labels for trace2 on top of the chart and labels for trace1 at the bottom of the chart.

Thanks!

var trace1 = {
x: [“0.02”, “0.02”, “0.03”, “0.03”, “0.03”, “0.04”, “0.04”, “0.05”, “0.09”, “.14”],
y: [“a”, “b”, “c”, “d”, “e”, “f”, “g”, “h”, “i”, “j”],
name: ‘SF Zoo’,
type: ‘bar’,
orientation: ‘h’
};

var trace2 = {
x: [“2”, “5”, “1”, “3”, “3”, “1”, “4”, “5”, “3”, “21”],
y: [“a”, “b”, “c”, “d”, “e”, “f”, “g”, “h”, “i”, “j”], name: ‘LA Zoo’,
type: ‘bar’,
orientation: ‘h’
};

var data = [trace1, trace2];
var layout = {barmode: ‘group’};

Plotly.newPlot(“plotdiv”, this.data, this.layout, this.options);

2

Can you be more specific?

Are you trying to text labels to your bars like in http://codepen.io/etpinard/pen/dpLmRd ?

3

Let’s say my data for x1 is 10,20,30,40 and my data for x2 is 1000,2000.4000.10000. In the example, the width of the horizontal bars for both x1 and x2 are both based on the higher range (x2 ). Is there a way to plot x1 based on 0-40 and then plot x2 based on range 0-10000.

And would also like to be able to show both x axis ticks x1 on top and x2 at the bottom.

thanks!

4

plotly.js doesn’t allow bar grouping across multiple x-axes at the moment. The best we can do is the overlay them as in http://codepen.io/etpinard/pen/ALzgjW

You might want to look at Grouped bar charts do not work with multiple Y axes · Issue #78 · plotly/plotly.js · GitHub for more information about this problem.