React-vis: Add ability to customize bar width on bar series

[chrisirhc]

Right now, the bar widths are automatically calculated, but there's no way to override it.

This is particularly useful for histograms.

[bkrall]

+1

[ranjithnori]

+1

[greatermeans]

+1

[k010]

+1

[mcnuttandrew]

@chrisirhc This is addressed by rect-series, so i'm going to close this issue. Feel free to re-open if you feel different

[sprzedwojski]

How would I use the rect-series if I need to set a custom bar width, but my x axis labels are strings?

My data:

[
  {
    "x": "Label 1",
    "y": 0.3
  },
  {
    "x": "Label 2",
    "y": 0.2
  },
  {
    "x": "Label 3",
    "y": 0.7
  }
]

It seems to be impossible to define an x0 if my x axis labels are not numbers.
Therefore I think setting a custom width on the vertical bar chart would be a useful feature.

[treetopvt]

I also would find it useful to limit the width of a bar. When working with ordinal data, I don't see how we can use a rect-series

[sprzedwojski]

I managed to "hack" the rect-series to draw a vertical bar chart with custom column width and strings as x-axis labels.
Below is my example code, maybe it helps somebody:

const values = [
  {"y": 0.9},
  {"y": 0.3},
  {"y": 0.5}
]

const labels = [
  'Label 1',
  'Label 2',
  'Label 3'
]

class BarChartCustomBarWidth extends React.Component {

  // by tweaking this value you can resize the columns
  // 1 - columns touch each other
  // 0 - columns are invisible
  columnWidth = 0.5

  transformDataToRectSeries(raw) {
    const transformed = raw.map((el, i) => {
      el.x0 = (i + 1) - this.columnWidth / 2
      el.x = (i + 1) + this.columnWidth / 2
      return el
    })
    transformed.unshift({x: 0.5, y: 0}) // fake data point, enables margin between y-axis and first column
    transformed.push({x: 3.5, y: 0}) // fake data point, enables margin between last column and chart end
    return transformed
  }

  render() {
    return (
      <XYPlot width={500} height={400}>
        <XAxis
          tickFormat={(v,i) => labels[i]}
          tickValues={[1, 2, 3]}
          />
        <YAxis/>
        <VerticalRectSeries
          data={this.transformDataToRectSeries(values)}
          />  
      </XYPlot>
    )
  }
}

ReactDOM.render(<BarChartCustomBarWidth />, document.getElementById('app'));

Codepen example

[mcnuttandrew]

@sprzedwojski nice work around! If you feel motivated I would gladly accept a PR adding custom width functionality. I think it would be reasonable to add an optional width prop bar series. In order to complete this work you also need to make sure an associated accessor (getWidth) works well, make tests etc.

[ralphholzmann]

@sprzedwojski Great workaround! However, while it does allow you to control the width of the bars, it doesn't allow you to set the width. If the width of your bar chart changes, the width of the bars will scale with it. A better API would allow you to set the point-width of each bar regardless of chart width. Will see if I can come up with something based on your fiddle.

[ralphholzmann]

Tried all day -- couldn't hack it :( best of luck to all who enter here looking for fixed width bars. Here be dragons.