I’m trying to make a set of vertical charts with different numbers of bars in each chart. I’d like the bar height and the gaps to be consistent so that the total height of the chart would be dynamic.
I could do this in D3 directly by multiplying the number of data points by the size required for each.
const svg = d3.select(chartRef.current)
.append('svg')
.attr('height', data.length > 0 ? data.length * 50 : 200)
.attr('width', 400)
;
I’ve been trying recharts, but I can’t get the spacing right. I can set the height of the bars, but ideally there’d be a way to tell the chart to dynamically expand to match the number of bars, but I can’t find such a setting. So I’m falling back to calculating it myself. I’ve set the bar height to 15, with 2 bars per data point, so I’m trying height = {data.length * 45 + margin}. The bars are completely different heights with completely different spacing between the reports. How can I get this right?
Additionally, the largest report has a big empty space at the top that isn’t the margin (and doesn’t show up as margin in the dev tools). I’m not sure where it’s coming from, but it’s thrown out the tooltips. The hovering seems to match where the data should be, but the highlighting matches the visible data. ie, if I hover my mouse at the top, in the white space, the first data point is highlighted and the tooltip (which follows my mouse) shows data for that data point. All three charts are in the same flex container and have exactly the same code but different data, so I don’t think the white space is coming from outside.
Are there any rechart experts who can point me in the right direction to sort these out?