Add ability to customize bar width on bar series about react-vis HOT 11 CLOSED

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.

from react-vis.

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

from react-vis.

+1

from react-vis.

+1

from react-vis.

+1

from react-vis.

+1

from react-vis.

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

from react-vis.

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

from react-vis.

@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.

from react-vis.

@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.

from react-vis.

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

from react-vis.