Same names (x-axis) not allowed to show in bar-charts?

plotly.js
1

Hi,

I am not able to show data with duplicate names in bar chart. Y axis elements may have same string but X axis value is always different. I want to show all 5 elements but could get only three. Is there any solution available for the issue?

eg.
var trace1 = {
x: [150, 280, 340, 350, 420],
y: [“John”, “Mark”, “Hello”, “John”, “Mark”],
name: ‘Complete’,
orientation: ‘h’,
marker: {
color: ‘orange’,
width: 1
},
type: ‘bar’
};

var trace2 = {
x: [200, 180, 180, 300, 300],
y: [“John”, “Mark”, “Hello”, “John”, “Mark”],
name: ‘In Progress’,
orientation: ‘h’,
type: ‘bar’,
marker: {
color: ‘blue’,
width: 1
}
};

var trace3 = {
x: [100, 200, 250, 200, 230],
y: [“John”, “Mark”, “Hello”, “John”, “Mark”],
name: ‘Not Started’,
orientation: ‘h’,
type: ‘bar’,
marker: {
color: ‘red’,
width: 1
}
};

var data = [trace2, trace3, trace1];

var layout = {
bargap: .7,
width: 550,
height: 220,
barmode: ‘stack’,
legend: {
“orientation”: “h”,
x:-.3,
y:-.3
},
margin: {
l: 110,
r: 50,
t: 50,
b: 30,
pad: 8
},
paper_bgcolor: “transparent”,
showlegend: 1
};

Plotly.newPlot(‘myDiv’, data, layout);

Capture

2

See https://github.com/plotly/plotly.js/issues/1516#issuecomment-289139760

3

Thanks but it’s possible for heatmap (https://codepen.io/cpsievert/pen/bqKJoe) but I am unable to bring it in js based bar chart. Can you help me to identify the changes required in above mentioned code?

4

It’s an old topic but I had the same problem and stumbled upon this (it appears quite early on google if you search for this), so I want to share the solution:

You need to set the ticks with position and label yourself in your layout:

  const layout = {
    barmode: 'stack',
    xaxis: {
      ticktext: ['John', 'Mark', 'Hello', 'John', 'Mark'],
      tickvals: [0, 1, 2, 3, 4],
    },
  };

Please note that the tickvals need to have the same length as ticktext. tickvals give the position and ticktext the values.

And you need to remove the x from your traces as it seems like internally plotly is referring to them as keys and if they’re duplicated the bars are (kind of) “overwritten”.