Layout and orientation

Horizontal or vertical

orientation on the Chart sets the direction bars run:

• "horizontal" (the default): bars run left to right, and rows stack top to bottom.
• "vertical": bars run bottom to top, and rows sit side by side, as columns.

The same rows work both ways: labels, gaps and rounded ends follow the turn. A vertical chart is 240px tall unless you set height on the Chart. Give a horizontal chart a height too, and rows without a thickness share it, so the rows fit the space you have.

Row size and room for text

slat() takes two layout settings besides css:

• thickness: each row’s height in a horizontal chart, in px (32 by default). In a vertical chart, columns share the width unless thickness sets theirs.
• room: the space the row’s labels need outside the chart, in px. start is before the chart, where names go; end is after it, where numbers go past the bars.

import { Chart, Plot, Bar, Label, slat } from "@bezda/rhp";

// thickness: each row's height. room: the space outside the plot for the
// names
// (start) and the numbers (end).
const Row = slat({ thickness: 30, room: { start: 150, end: 60 } }, (d) => (
  <div>
    <Label edge="start">{d.language}</Label>
    <Bar to={d.speakers} />
    <Label at={d.speakers}>{d.speakers} M</Label>
  </div>
));

export default function Languages() {
  return (
    <Chart scale={[0, 1600]} ticks={[0, 400, 800, 1200, 1600]}>
      <Plot
        language={["English", "Mandarin Chinese", "Hindi", "Spanish"]}
        speakers={[1500, 1140, 610, 560]}
      >
        {Row}
      </Plot>
    </Chart>
  );
}

room can also hold before and after: space above the first row and below the last. When the settings differ by direction, give each its own: thickness: { horizontal: 40, vertical: 60 }.

The chart makes room for the largest room any of its rows ask for, and for its axis numbers.

Width

A chart is as wide as the element it’s in, like any block of HTML. Set its width with CSS on a wrapper, or with class or style on the Chart.