Issues in creating a grouped horizontal bar chart

[AlmahaAlmalki]

Hi @davelandry

I was trying to create a grouped horizontal bar chart, and I wanted my x-axis to be on top as a log scale.

There are two issues; first, the axises overlaps not sure if there's a way to add padding using the react wrapper. Second, since I have a different number of bars in each year, the group padding is not efficient with all cases and as you can see it makes the bars super tiny. Is there a way where I can fix this problem?

let methods = {
      data: this.state.dataset,
      discrete: 'y',
      x: 'citations',
      y: 'year',
      xConfig:{
        orient: 'top',
        scale: 'log',
        title: 'Citations',
        titleConfig: {
          fontColor: '#fff',
          font: 'Open Sans'
        },
        barConfig: {
          stroke: 'transparent',
        },
        shapeConfig: {
          labelConfig: {
            fontColor: '#fff',
            font: 'Open Sans'
          },
          stroke: '#fff'
        },
        gridConfig: {
          stroke: '#transparent',
        }
      },
      yConfig: {
        title:'Year',
        titleConfig: {
          fontColor: '#fff',
          font: 'Open Sans'
        },
        barConfig: {
          stroke: '#ffffff'
        },
        shapeConfig: {
          labelConfig: {
            fontColor: '#fff',
            font: 'Open Sans'
          },
          stroke: '#fff'
        },
        gridConfig: {
          stroke: 'transparent'
        }
      },
      legend: false,
      shapeConfig: {
        fill: d => colorScale(d.year),
        fontFamily: 'Open Sans'
      }
    }

      timeLine = <BarChart config={methods} />

Thanks!!

[davelandry]

Oh boy, switching the axis to the top! I hadn't accounted for that, that one will need some dev work. I've made an issue for it here: https://github.com/d3plus/d3plus-plot/issues/64

For the padding, take a look at the barPadding and groupPadding properties. Those should take care of those skinny lines.