Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

How to expand bar chart intervals in Plotly.js?

I’m having a trouble styling my bar chart in Plotly.js .

The intervals in the chart is too narrow to me, so I’d like to make wider.

I could not find properties to do it in the documentation.
What is the property to make the intervals wider ?

My code is below.

  const source = [...Array(100).keys()].reverse().map((n) => {
    const y = `some_feature_name_foo_bar${n}`;
    const x = (n + 1) * 10;
    return [y, x];
  });

  const xValues = source.map((s) => { return s[1]; }).reverse();
  const yValues = source.map((s) => { return s[0]; }).reverse();

  const data = [{
    type: 'bar',
    x: xValues,
    y: yValues,
    orientation: 'h',
    width: 0.7,
    marker: {
      color: '#015de2',
    },
  }];

  const layout = {
    autosize: true,
    height: 3000,
    margin: {
      l: 200,
      r: 50,
      t: 100,
      pad: 10,
    },
    xaxis: {
      title: 'Feature importance',
      side: 'top',
    },
    yaxis: {
      title: 'Feature',
      tickangle: 30,
      tickfont: {
        size: 10,
      },
    },
  };

  Plotly.newPlot(targetId, data, layout, { displayModeBar: false });

I’m not a 100% sure what you mean by interval, but you could try tweaking layout.bargap

Thank you, yeah I think what I want is layout.bargap, but it did not work at all :frowning:
I put bargap: 1 in this layout.

My bar chart looks like this now,

And I want to make it like this.