Stop Plotly.js stacking bars with the same name

Question

I need to create a bar chart where some of the bars have the same name. By default Plotly seems to stacks these but I need them to be separate bars. Can someone please point me in the right direction. Currently my code looks like this:

votes = [1652, 679, 515, 359, 406, 1516, 411, 839]
party = ["Con", "Grn", "Lib D", "Ind", "Lab", "Con", "Lab", "Lib D"]
var data = [{
   y: votes,
   x: party,
   marker:{
        color: colours,
        line: { color: '#000000', width: 1 }
   },
   type: 'bar',
}];
var layout = {
   margin: {
        l: 60,
        r: 20,
        b: 40,
        t: 10,
        pad: 4
   },
   yaxis: {
        title: {text: 'Votes'}
   },
}
var config = {responsive: true, displayModeBar: false};
barchart = document.getElementById('barchart');
Plotly.newPlot(barchart, data, layout, config);

The output I'm looking for is:

But I'm ending up with

Thank you.

question from:https://stackoverflow.com/questions/65919215/stop-plotly-js-stacking-bars-with-the-same-name

Answer 1

Waitting for answers