Making multiple Bar Charts with bars of a fixed width

[G2Jose]

Question

Hello, I'm looking to make multiple bar charts, but where the bars have the same fixed width. I can't seem to find an obvious way to do this.

Background Info/Attempts

Here's what I've tried:

I tried using the transform property in Path to scale down bars to a specified targetWidth. Something like:

export function BarChartBar({
  points,
  chartBounds,
}: {
  points: PointsArray
  chartBounds: ChartBounds
}) {
  const { path, barWidth } = useBarPath(points, chartBounds, 0.6)

  const targetWidth = 10

  const scale = barWidth < Infinity ? targetWidth / barWidth : 0

  return (
    <Path
      path={path}
      style="fill"
      color="red"
      transform={[{ scaleX: scale }]}
    />
  )
}

This does work for making bars the same size, but unfortunately this moves all my bars to the left, so they no longer line up with the axis. I tried adding a translateX to the transform prop above, but that doesn't seem to have any effect.

<Path
  path={path}
  style="fill"
  color="red"
  transform={[{ scaleX: scale }]}
/>

For context, I need to show stats on multiple graphs, each of which will have different numbers of data points. Currently without scaling the bars, they can vary wildly in size. Charts that have just one datapoint for example, will have drastically different bar widths than ones that have say 20.

[masiddee]

Yep, @G2Jose, there's currently no easy way to set a fix width for the bar charts, as we dynamically calculate barWidth based on innerPadding, width of the chart, and the number of data points. This could be a nice feature improvement, if someone wants to take a stab at it. I may circle back to this myself once I have some time.

[owattenmaker]

what i ended up doing was adding a prop that is expectedDataLength so the bar width gets calculated off of that instead of reading data.length