Bar

Chart.Bar draws one bar for each row. Each bar is a focus target with an accessible name. The categories are on a band scale, and the values start at zero.

Anatomy

<script lang="ts">
	import { Chart } from '@human-kit/charts';
	import { scaleBand } from '@human-kit/charts/scales/band';
</script>

<Chart.Root data={rows} x="quarter" y="sales" series="region" xScale={{ type: scaleBand }}>
	<Chart.Title>Sales per quarter</Chart.Title>
	<Chart.Plot>
		<Chart.Bar layout="grouped" />
	</Chart.Plot>
</Chart.Root>

The mark makes a <g> with one group for each series. A series group holds one <rect> for each row.

The axis of the categories needs a band scale. Import scaleBand from @human-kit/charts/scales/band, and give it as the type of the scale. In a development build, the mark writes a warning when the scale has no bands.

Grouped and stacked

layout sets how the bars of two series share a category:

• grouped (the default) puts the bars side by side. groupPadding is the space between the bars of a group, as a fraction of a bar.
• stacked puts the bars one on the other. A negative value goes below zero.

A stack shows the series in the order of the legend and of the keyboard. On vertical bars, the first series is on the top, thus ArrowDown goes to the bar below. On horizontal bars, the first series is next to zero, thus ArrowRight goes to the bar on the right.

A stack changes the domain of the value scale. On the server, a guide before the mark does not see the top of the stack. Thus put the mark before the guides, or give the domain of the value scale.

Horizontal bars

Put the categories on the y axis to make horizontal bars, and give the y scale the band type. The bars then grow along x, and the x scale includes zero.

For horizontal bars, the vertical arrows move the focus from one bar to the next bar in the series. The name of a bar, a row of the data table and the tooltip start with the category.

Labels and round ends

labels writes the value of each bar after the end of the bar. With true, the text has the format of the value axis. A function writes the text of each point, for example a short form of a large number. The chart makes space for the labels, as it does for the ticks of an axis. The label of a negative bar goes before the bar when there is room, and else after zero.

The labels are hidden from assistive technology, because the name of each bar already has its value.

radius rounds the corners at the end of each bar. The corners at zero stay square, thus the bar stands on its baseline. A bar with a radius is a path, not a rect.

<Chart.Bar radius={3} labels={(point) => compact.format(point.x)} />

A stacked layout ignores the two props: only the last bar of a stack has an end.

Styles

Give each series a color with the CSS color. Each bar uses it as its fill.

.chart [data-bar][data-focused] {
	opacity: 0.8;
}

.chart [data-bar][data-focus-visible] {
	stroke: black;
	stroke-width: 2;
}

API reference

Bar

A bar mark. It makes one <rect> per row.

* required.