Scaling bars when using Cell.Width

[bzbetty]

Currently using cell.width to allow for multiple sized bars in a stack

eg

(light blue lines are set usin barSize, colourful ones using width on cell)

Current issue is that I no longer get auto scaling on the width of the bars, so if the graph gets squished the bars that don't set a fixed width scale, but the ones that have a width stay the same size

eg

Is there a way to calculate widths in a Cell component so i can make them scale?

[bzbetty]

extra notes

• tried using width as % - made it hard to calculate the offset (eg smaller bars are translated X to center them)
• could poentially get the width of the graph (ref) and calculate it myself?

[bzbetty]

used a useLayoutEffect() to calculate the bar widths based on the chart width

eg

const  [width, setWidth] = useState(40);
const chartRef = React.useRef<any>(null);
useLayoutEffect(() => {
  setWidth(chartRef.current.props.width / 10)
}, [chartRef.current.props.width])

   <Bar>

                    <Cell width={width/>                         
              </Bar>