Under a multi-Y-axis setting, the bar chart displays inconsistent widths and margin

https://chart-studio.plotly.com/~lainey.w/2/#plot

The situation involves a total of nine traces,
grouped by the X-axis into three sets of three.
Among these three groups, there are two different yaxis.

In this scenario, Iā€™m encountering issues with inconsistent widths and margins in the bar chart.
How can I adjust them to uniformly match the presentation of section C on the X-axis?

Hi @stnyu ,

Try to set all bar of all traces with fixed width value.

For this example I set width: 0.08 for every trace.

trace1 = {
  meta: {columnNames: {
      x: 'A', 
      y: 'B'
    }}, 
  mode: 'markers', 
  type: 'bar', 
  xsrc: 'lainey.w:1:5bd701', 
  x: ['A', 'B', 'C'], 
  ysrc: 'lainey.w:1:586438', 
  y: ['41'], 
  orientation: 'v',width: 0.08
};
trace2 = {
  meta: {columnNames: {
      x: 'A', 
      y: 'C'
    }}, 
  type: 'bar', 
  xsrc: 'lainey.w:1:5bd701', 
  x: ['A', 'B', 'C'], 
  ysrc: 'lainey.w:1:dda71f', 
  y: [null, '56'], 
  orientation: 'v',width: 0.08
};
trace3 = {
  meta: {columnNames: {
      x: 'A', 
      y: 'D'
    }}, 
  type: 'bar', 
  xsrc: 'lainey.w:1:5bd701', 
  x: ['A', 'B', 'C'], 
  ysrc: 'lainey.w:1:c66a1d', 
  y: [null, null, '25'], 
  yaxis: 'y2', 
  orientation: 'v',width: 0.08
};
trace4 = {
  meta: {columnNames: {
      x: 'A', 
      y: 'E'
    }}, 
  type: 'bar', 
  xsrc: 'lainey.w:1:5bd701', 
  x: ['A', 'B', 'C'], 
  ysrc: 'lainey.w:1:122e9a', 
  y: ['61'], 
  orientation: 'v',width: 0.08
};
trace5 = {
  meta: {columnNames: {
      x: 'A', 
      y: 'F'
    }}, 
  type: 'bar', 
  xsrc: 'lainey.w:1:5bd701', 
  x: ['A', 'B', 'C'], 
  ysrc: 'lainey.w:1:a3782c', 
  y: [null, '39'], 
  orientation: 'v',width: 0.08
};
trace6 = {
  meta: {columnNames: {
      x: 'A', 
      y: 'G'
    }}, 
  type: 'bar', 
  xsrc: 'lainey.w:1:5bd701', 
  x: ['A', 'B', 'C'], 
  ysrc: 'lainey.w:1:1ed5e0', 
  y: [null, null, '10'], 
  yaxis: 'y2', 
  orientation: 'v',width: 0.08
};
trace7 = {
  meta: {columnNames: {
      x: 'A', 
      y: 'H'
    }}, 
  type: 'bar', 
  xsrc: 'lainey.w:1:5bd701', 
  x: ['A', 'B', 'C'], 
  ysrc: 'lainey.w:1:c2799b', 
  y: ['100'], 
  orientation: 'v',width: 0.08
};
trace8 = {
  meta: {columnNames: {
      x: 'A', 
      y: 'I'
    }}, 
  type: 'bar', 
  xsrc: 'lainey.w:1:5bd701', 
  x: ['A', 'B', 'C'], 
  ysrc: 'lainey.w:1:cdc02c', 
  y: [null, '79'], 
  orientation: 'v',width: 0.08
};
trace9 = {
  meta: {columnNames: {
      x: 'A', 
      y: 'J'
    }}, 
  type: 'bar', 
  xsrc: 'lainey.w:1:5bd701', 
  x: ['A', 'B', 'C'], 
  ysrc: 'lainey.w:1:1c4327', 
  y: [null, null, '35'], 
  yaxis: 'y2', 
  orientation: 'v',width: 0.08
};
data = [trace1, trace2, trace3, trace4, trace5, trace6, trace7, trace8, trace9];
layout = {
  xaxis: {
    type: 'category', 
    range: [-0.5, 2.5], 
    autorange: true
  }, 
  yaxis: {
    type: 'linear', 
    range: [0, 105.26315789473685], 
    autorange: true
  }, 
  bargap: 0.75, 
  yaxis2: {
    side: 'right', 
    type: 'linear', 
    range: [0, 36.8421052631579], 
    autorange: true, 
    overlaying: 'y'
  }, 
  autosize: true, 
  template: {
    data: {
      bar: [
        {
          type: 'bar', 
          marker: {colorbar: {
              ticks: '', 
              outlinewidth: 0
            }}
        }
      ], 
      table: [
        {
          type: 'table', 
          cells: {
            fill: {color: '#EBF0F8'}, 
            line: {color: 'white'}
          }, 
          header: {
            fill: {color: '#C8D4E3'}, 
            line: {color: 'white'}
          }
        }
      ], 
      carpet: [
        {
          type: 'carpet', 
          aaxis: {
            gridcolor: '#C8D4E3', 
            linecolor: '#C8D4E3', 
            endlinecolor: '#2a3f5f', 
            minorgridcolor: '#C8D4E3', 
            startlinecolor: '#2a3f5f'
          }, 
          baxis: {
            gridcolor: '#C8D4E3', 
            linecolor: '#C8D4E3', 
            endlinecolor: '#2a3f5f', 
            minorgridcolor: '#C8D4E3', 
            startlinecolor: '#2a3f5f'
          }
        }
      ], 
      mesh3d: [
        {
          type: 'mesh3d', 
          colorbar: {
            ticks: '', 
            outlinewidth: 0
          }
        }
      ], 
      contour: [
        {
          type: 'contour', 
          colorbar: {
            ticks: '', 
            outlinewidth: 0
          }, 
          autocolorscale: true
        }
      ], 
      heatmap: [
        {
          type: 'heatmap', 
          colorbar: {
            ticks: '', 
            outlinewidth: 0
          }, 
          autocolorscale: true
        }
      ], 
      scatter: [
        {
          type: 'scatter', 
          marker: {colorbar: {
              ticks: '', 
              outlinewidth: 0
            }}
        }
      ], 
      surface: [
        {
          type: 'surface', 
          colorbar: {
            ticks: '', 
            outlinewidth: 0
          }
        }
      ], 
      heatmapgl: [
        {
          type: 'heatmapgl', 
          colorbar: {
            ticks: '', 
            outlinewidth: 0
          }
        }
      ], 
      histogram: [
        {
          type: 'histogram', 
          marker: {colorbar: {
              ticks: '', 
              outlinewidth: 0
            }}
        }
      ], 
      parcoords: [
        {
          line: {colorbar: {
              ticks: '', 
              outlinewidth: 0
            }}, 
          type: 'parcoords'
        }
      ], 
      scatter3d: [
        {
          type: 'scatter3d', 
          marker: {colorbar: {
              ticks: '', 
              outlinewidth: 0
            }}
        }
      ], 
      scattergl: [
        {
          type: 'scattergl', 
          marker: {colorbar: {
              ticks: '', 
              outlinewidth: 0
            }}
        }
      ], 
      choropleth: [
        {
          type: 'choropleth', 
          colorbar: {
            ticks: '', 
            outlinewidth: 0
          }
        }
      ], 
      scattergeo: [
        {
          type: 'scattergeo', 
          marker: {colorbar: {
              ticks: '', 
              outlinewidth: 0
            }}
        }
      ], 
      histogram2d: [
        {
          type: 'histogram2d', 
          colorbar: {
            ticks: '', 
            outlinewidth: 0
          }, 
          autocolorscale: true
        }
      ], 
      scatterpolar: [
        {
          type: 'scatterpolar', 
          marker: {colorbar: {
              ticks: '', 
              outlinewidth: 0
            }}
        }
      ], 
      contourcarpet: [
        {
          type: 'contourcarpet', 
          colorbar: {
            ticks: '', 
            outlinewidth: 0
          }
        }
      ], 
      scattercarpet: [
        {
          type: 'scattercarpet', 
          marker: {colorbar: {
              ticks: '', 
              outlinewidth: 0
            }}
        }
      ], 
      scattermapbox: [
        {
          type: 'scattermapbox', 
          marker: {colorbar: {
              ticks: '', 
              outlinewidth: 0
            }}
        }
      ], 
      scatterpolargl: [
        {
          type: 'scatterpolargl', 
          marker: {colorbar: {
              ticks: '', 
              outlinewidth: 0
            }}
        }
      ], 
      scatterternary: [
        {
          type: 'scatterternary', 
          marker: {colorbar: {
              ticks: '', 
              outlinewidth: 0
            }}
        }
      ], 
      histogram2dcontour: [
        {
          type: 'histogram2dcontour', 
          colorbar: {
            ticks: '', 
            outlinewidth: 0
          }, 
          autocolorscale: true
        }
      ]
    }, 
    layout: {
      geo: {
        bgcolor: 'white', 
        showland: true, 
        lakecolor: 'white', 
        landcolor: 'white', 
        showlakes: true, 
        subunitcolor: '#C8D4E3'
      }, 
      font: {color: '#2a3f5f'}, 
      polar: {
        bgcolor: 'white', 
        radialaxis: {
          ticks: '', 
          gridcolor: '#EBF0F8', 
          linecolor: '#EBF0F8'
        }, 
        angularaxis: {
          ticks: '', 
          gridcolor: '#EBF0F8', 
          linecolor: '#EBF0F8'
        }
      }, 
      scene: {
        xaxis: {
          ticks: '', 
          gridcolor: '#DFE8F3', 
          gridwidth: 2, 
          linecolor: '#EBF0F8', 
          zerolinecolor: '#EBF0F8', 
          showbackground: true, 
          backgroundcolor: 'white'
        }, 
        yaxis: {
          ticks: '', 
          gridcolor: '#DFE8F3', 
          gridwidth: 2, 
          linecolor: '#EBF0F8', 
          zerolinecolor: '#EBF0F8', 
          showbackground: true, 
          backgroundcolor: 'white'
        }, 
        zaxis: {
          ticks: '', 
          gridcolor: '#DFE8F3', 
          gridwidth: 2, 
          linecolor: '#EBF0F8', 
          zerolinecolor: '#EBF0F8', 
          showbackground: true, 
          backgroundcolor: 'white'
        }
      }, 
      title: {x: 0.05}, 
      xaxis: {
        ticks: '', 
        gridcolor: '#EBF0F8', 
        linecolor: '#EBF0F8', 
        automargin: true, 
        zerolinecolor: '#EBF0F8', 
        zerolinewidth: 2
      }, 
      yaxis: {
        ticks: '', 
        gridcolor: '#EBF0F8', 
        linecolor: '#EBF0F8', 
        automargin: true, 
        zerolinecolor: '#EBF0F8', 
        zerolinewidth: 2
      }, 
      ternary: {
        aaxis: {
          ticks: '', 
          gridcolor: '#DFE8F3', 
          linecolor: '#A2B1C6'
        }, 
        baxis: {
          ticks: '', 
          gridcolor: '#DFE8F3', 
          linecolor: '#A2B1C6'
        }, 
        caxis: {
          ticks: '', 
          gridcolor: '#DFE8F3', 
          linecolor: '#A2B1C6'
        }, 
        bgcolor: 'white'
      }, 
      colorway: ['#636efa', '#EF553B', '#00cc96', '#ab63fa', '#19d3f3', '#e763fa', '#fecb52', '#ffa15a', '#ff6692', '#b6e880'], 
      hovermode: 'closest', 
      colorscale: {
        diverging: [['0', '#8e0152'], ['0.1', '#c51b7d'], ['0.2', '#de77ae'], ['0.3', '#f1b6da'], ['0.4', '#fde0ef'], ['0.5', '#f7f7f7'], ['0.6', '#e6f5d0'], ['0.7', '#b8e186'], ['0.8', '#7fbc41'], ['0.9', '#4d9221'], ['1', '#276419']], 
        sequential: [['0', '#0508b8'], ['0.0893854748603352', '#1910d8'], ['0.1787709497206704', '#3c19f0'], ['0.2681564245810056', '#6b1cfb'], ['0.3575418994413408', '#981cfd'], ['0.44692737430167595', '#bf1cfd'], ['0.5363128491620112', '#dd2bfd'], ['0.6256983240223464', '#f246fe'], ['0.7150837988826816', '#fc67fd'], ['0.8044692737430168', '#fe88fc'], ['0.8938547486033519', '#fea5fd'], ['0.9832402234636871', '#febefe'], ['1', '#fec3fe']], 
        sequentialminus: [['0', '#0508b8'], ['0.0893854748603352', '#1910d8'], ['0.1787709497206704', '#3c19f0'], ['0.2681564245810056', '#6b1cfb'], ['0.3575418994413408', '#981cfd'], ['0.44692737430167595', '#bf1cfd'], ['0.5363128491620112', '#dd2bfd'], ['0.6256983240223464', '#f246fe'], ['0.7150837988826816', '#fc67fd'], ['0.8044692737430168', '#fe88fc'], ['0.8938547486033519', '#fea5fd'], ['0.9832402234636871', '#febefe'], ['1', '#fec3fe']]
      }, 
      plot_bgcolor: 'white', 
      paper_bgcolor: 'white', 
      shapedefaults: {
        line: {width: 0}, 
        opacity: 0.4, 
        fillcolor: '#506784'
      }, 
      annotationdefaults: {
        arrowhead: 0, 
        arrowcolor: '#506784', 
        arrowwidth: 1
      }
    }, 
    themeRef: 'PLOTLY_WHITE'
  }, 
  showlegend: true, 
  bargroupgap: ''
};
Plotly.plot('plotly-div', {
  data: data,
  layout: layout
});

hi, @farispriadi
Adjusting the width and bargap worked well for me. Really appreciate your help! :sob: