Line

Chart.Line draws one line for each series. Each row is a point on the line. The point is a focus target with an accessible name.

Anatomy

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

<Chart.Root data={rows} x="year" y="downloads" series="package" xScale={{ type: scaleTime }}>
	<Chart.Title>Downloads per year</Chart.Title>
	<Chart.Plot>
		<Chart.Line />
	</Chart.Plot>
</Chart.Root>

The mark makes a <g> with one group for each series. A series group holds a <path> for the line and one <circle> for each point.

Points

Each point is a circle with the radius r. The default is 3 pixels. Give r={0} to hide the points. They stay focus targets, and you can show the focused point with data-focused.

The order of the points is the order of the rows. Sort the rows by x before you give them to the chart.

A row without a valid x or y value has no point, and the line stops there. The line starts again at the next row with a value. A value is valid when it is a string, a finite number or a valid date. Thus null, undefined and NaN are not valid. They are not zero. A row without a value is not a focus target, and it is not in the data table. The same rule applies to areas.

A mark with its own data

A mark can replace the data of the root with its own data. Thus one chart can show two sets of rows with different fields, on the same scales. The values of the mark go into the domains of the scales.

Only a mark with its own data can have its own x, y and series. The types check these field names against the rows of the mark. A mark cannot get the row type of the root, thus a channel on a mark without data is a type error. To show a second field of the root rows, give the rows to the mark again:

<Chart.Root data={sales} x="month" y="revenue">
	<Chart.Plot>
		<Chart.Line name="Revenue" />
		<Chart.Line data={sales} y="cost" name="Cost" />
	</Chart.Plot>
</Chart.Root>

The name of a mark

A mark without a series channel shows one series without a name. Give it a name with name. The legend, the names of the points and the data table show it. Give each mark a name when two marks show two fields. Without the names, the points of the two lines have the same type of name, and the data table shows only the first line.

Keyboard

The arrow keys move the focus along the line. ArrowUp and ArrowDown move to the point with the closest x value in the previous or the next series. The full table is on the Accessibility page.

Styles

Give each series a color with the CSS color. The path uses it as its stroke, and the points use it as their fill. Give the line a stroke-width.

.chart [data-series='Core'] {
	color: #2563eb;
}

.chart [data-line] {
	stroke-width: 2;
}

.chart [data-point][data-focused] {
	r: 5;
}

API reference

Line

A line mark. It makes one <path> per series, and one circle per row.

* required.