Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

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

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

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

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?