Auto Height for Charts (height depending upon content)

[is-it-ayush]

Hi! Is there a way to set the height of a chart automatically if the amount of data is dynamic? I've tried using <ParentSize /> but on parent I have to manually specify a fixed height for visx to display anything (which makes sense). Now, Suppose I have 3 charts on the same row & each of them have different amount of data. If I specify a fixed height for all them and their data changes. The chart looks strange (having more data on the same range i.e. the same height will cause the svg to be rendered more tightly packed).

• How can I just let visx make the svg rect bigger if the data changes (inceases / decreases)?

For example, Both charts on the same row have height of 300px. The left has 5 x-points, The right has only 3. The right appears to be more spread out.

The Parent Code,

 <div className="flex flex-col space-y-2 h-[300px]">
  <span className="text-lg font-semibold">browser overview.</span>
  {
    urlDetails.data?.browser_data ? (
      <ParentSize>
        {parent => {
          const data = urlDetails.data?.browser_data.map((data) => ({
            name: data.name ?? "",
            count: data._count
          }))
          return <HorizontalGraph height={parent.height} width={parent.width} data={data} />;
        }}
      </ParentSize>
    ) : null
  }
</div>

The Chart Code,

export const HorizontalGraph = ({ data: inputData, width, height }: HorizontalGraphProps) => {

  const [theme,] = useTheme();
  const data = inputData.slice().sort((a, b) => a.count - b.count);
  const xMax = width - (defaultMargin.left + defaultMargin.right);
  const yMax = height - (defaultMargin.top + defaultMargin.bottom);

  // scales
  const scaleX = scaleLinear<number>({
    domain: [0, Math.max(...data.map((d) => d.count))],
    range: [0, xMax],
    round: true
  });
  const scaleY = scaleBand({
    domain: data.map((d) => d.name),
    range: [yMax, 0],
    padding: 0.2,
    round: true
  });

  console.log(`xMax = ${xMax} ; yMax = ${yMax}`)

  return (
    <div>
      <svg
        width={width}
        height={height}
      >
        <g transform={`translate(${0}, ${0})`}>
          <rect
            x={0}
            y={0}
            width={xMax}
            height={yMax}
            fill={"#ffffff00"}
            rx={14}
          />
          <Group>
            {data.map((d, idx) => {
              const barWidth = scaleX(d.count);
              const barY = scaleY(d.name);
              return (
                <g key={`bar-${d.count}-${idx}`}>
                  <Bar
                    x={0}
                    y={barY}
                    width={barWidth}
                    height={barHeight}
                    radius={10}
                    fill={theme === "light" ? "#000" : "#fff"}
                    onClick={() => {
                      alert(`clicked: ${JSON.stringify(Object.values(d))}`);
                    }}
                  />
                  <Text
                    x={barWidth + 15} // Adjust the position
                    y={(barY ?? 0) + (barHeight / 2)}
                    verticalAnchor="middle"
                    fontSize={11}
                    fill={theme === "light" ? "#000000" : "#ffffff"} // Text color
                  >
                    {d.count}
                  </Text>
                  <Text
                    x={10} // Adjust the position
                    y={(barY ?? 0) + (barHeight / 2)}
                    verticalAnchor="middle"
                    fontSize={11}
                    fill={theme === "light" ? "#ffffff" : "#000000"} // Text color
                  >
                    {d.name}
                  </Text>
                </g>
              );
            })}
          </Group>
        </g>
      </svg>
    </div>
  );
}

[williaster]

Hey @is-it-ayush, typically the dynamic height with ParentSize is used to make a chart take up the available container height.

To accomplish what you want, it seems like you don't actually care about the size of the parent container, but you want each of your bar heights to be equal so they match across charts? In that case I would just compute the height of the svg like this , and render each bar as a fixed-height <rect />

<svg height={BAR_HEIGHT * data.length + MARGIN} {...} />

[is-it-ayush]

Thank you @williaster! That makes perfect sense. I refactored my code to the following constraints,

const BAR_HEIGHT = 30;
const DEFAULT_MARGIN = 40;

const width = 300 - (2 * DEFAULT_MARGIN); // substracting margin = compress graph horizontally
const height = (BAR_HEIGHT * data.length) + (2 * DEFAULT_MARGIN); //  adding margin = expand the graph vertically
const xMax = width;
const yMax = height;

Here width and height are passed onto <svg /> and every <Bar /> is rendered via BAR_HEIGHT. This is certainly better to what I wrote earlier.

Although, I still see large gaps being generated when the data provided shrinks. For example in the below image, you can notice "operating system overview" graph has more gap between bars than "browser overview" graph or other's. Is there some way to resolve this?